Web前端开发技术课件：网页布局设计.pptxVIP

;目标;当一个HTML页面被浏览器打开时，浏览器首先会对页面进行解析，读取HTML页面中的所有内容，然后将内容显示在浏览器的页面上。当我们没有通过CSS样式对页面中的元素进行布局时，页面显示的内容会按照标准的排版模式来进行内容布局，我们将这种标准的排版方式称为标准文档流。

标准文档流是指浏览器读取HTML内容后对元素进行排列的一种标准方式，在这种标准方式中，浏览器会根据读取到标签的先后顺序来排列HTML元素，在显示网页时，元素按照从左至右、自上而下的顺序排列。;我们制作的HTML页面在浏览器中是否皆是按照标准文档流来进行排列的？

;盒子的定位是页面布局中一个非常重要的概念，广义的“定位”是指将某个元素放置于某个位置，该动作称为定位操作，可以使用CSS规则或使用表格等传统的布局方式来实现。狭义的“定位”是指CSS中的一个非常重要的属性position，此单词的中文意思也是定位，它是CSS布局的核心，然而要使用CSS进行定位操作并不能仅通过该属性来实现。在CSS布局中，position属性有以下几种取值：

static：静态定位，它是默认的属性值，取该值的元素按照标准文档流进行布局排列。

relative：相对定位，使用相对定位的元素以标准文档流为基础，元素可以在它原来的位置上进行偏移，该元素的偏移是显示上的偏移，但在文档流中的位置不会变化。

absolute：绝对定位，绝对定位的元素会脱离标准文档流，对其后的其他元素没有影响，它可以以页面左上角为基准，定位至页面的任何地方。

fixed：固定定位，它与绝对定位类似，只是其以浏览器窗口为基准进行定位，即当拖动浏览器窗口的滚动条时，它依然保持位置不变。

;float属性

盒子的浮动实际是通过设置元素的float属性来完成的，其属性主要取值有none、left和right。当float取值为none时表示不浮动，这时元素会按照默认的标准文档流的方式来处理；当float取值为left时表示向左浮动，这时元素会脱离标准文档流，不占文档流中的位置空间；当float取值为right时表示向右浮动，这时元素也会脱离标准文档流。

;浮动和display取值为inline-block都可以让块级元素排在一行，实现多栏或多列的布局，那么它们各有什么特点呢？它们的特点如下：

（1）display:inline-block可以让元素排在一行并且支持宽度和高度，代码实现起来方便，添加该属性的元素在标准文档流中，不需要清除浮动。

（2）浮动可以让元素排在一行并支持宽度和高度，还可以决定排列方向。

（3）display:inline-block的位置方向不可控制，会解析空格。在IE6、IE7上不被支持。

（4）浮动元素会脱离标准文档流，会对周围元素产生影响，所以必须在它的父元素上添加清楚浮动的样式。

;页面整体布局;元素名