网页布局

网页布局

发布时间：2018年01月15日 21:46:15
CSS中存在3中定位机制：

• 标准文档流（Normal flow）
• 浮动（Floats）
• 绝对定位（Abosulte positioning）

一、标准文档流

特点：

• 从上到下，从左到右，输出文档内容。
• 由块级元素和行级元素组成。

1.块级元素

特点：

• 从左到右撑满页面，独占一行。
• 触碰到页面边缘时，会自动换行。
• 如：div,ul,li,dl,dt,p······

2.行级元素

特点：

• 能在同一行内显示，不会改变HTML文档结构
• 如：span,strong,img,input······（大部分表单元素）

块级元素和行级元素都是盒子模型。

盒子模型由四部分组成：边框（border），外边距（margin），内边距（padding），盒子中的内容（content）
盒子3D模型共五层：

• 第一层，border；
• 第二层，content+padding；
• 第三层，background-image；
• 第四层，background-color；
• 第五层，margin。

---

二、一列布局和两列布局

1.自动居中一列布局

在最外层包裹wrap中设置：margin:0 auto;auto会根据浏览器的宽度自动设置两边的外边距，

原理：（浏览器的宽度-外包含层的宽度）/2=外边距。

PS：若想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性（float/position）。

2.横向两列布局

（1）浮动布局

• 能够实现横向多列布局
• 通过设置float属性实现

float属性：

• 3个属性值：left --左浮动；right–右浮动；none–不浮动
• 特点：元素会左移或右移，直至触碰到容器为止。

PS：

• 设置了浮动的元素，仍旧处于标准文档流中（即占用了空间）
• 当元素没有设置width，而设置了float，元素的宽度随内容的变化而变化。（即，无内容时，则为一个点，看不到）
• 当元素设置了float后，会对相邻元素产生影响，相邻元素特指紧邻后面的元素。

（2）清除浮动

①clear属性 --常用clear:both

• clear:left;或clear:right;(清除左/右侧浮动)

②同时设置width:100%(或固定宽度)+overflow:hidden;

PS:空标签无意义，不建议使用此方法清除浮动，

• eg:<br/>(对代码结构有影响，不符合W3C标准)

（3）横向两列布局（网页布局最常见的方法之一）

• float属性–使纵向排列的块级元素，横向排列。
• margin属性–设置两列之间的间距。

PS：当父包含块缩成一条时，用clear:both方法清除浮动无效。它一般用于紧邻后面元素的清除浮动。

三、绝对定位布局

• 通过设置position属性实现
• 能够实现横向多列布局及较为复杂的定位
• 带有遮罩层效果的提示框、固定层效果、全屏广告）

position属性：

1. 静态定位

• 即在未设置position属性时的默认定位。

2. 相对定位

特点：

• 相对于自身原有的位置进行偏移
• 仍处于标准文档流中（占据空间）
• 随即拥有偏移属性（top: ;left: ;）和z-index属性

3.绝对定位

特点：

• 列表内容建立了以包含块为基准的空间
• 完全脱离了标准文档流（不再对其兄弟流产生影响）
• 随即拥有偏移属性和z-index属性

①未设置偏移量

特点：

• 无论是否存在已定位祖先元素，都保持在元素初始位置
• 脱离了标准文档流
• 宽度随内容的扩展而扩展

②设置偏移量

• 偏移参照基准：
• 无已定位祖先元素，以（根元素）为偏移参照基准；
• 有已定位祖先元素，以距其最近的已定位的祖先元素为偏移参照基准。

PS：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。

③绝对定位实现横向两列布局

• 应用较少
• 常用于一列固定宽度，另一列宽度自适应的情况
• 主要应用技能：
  relative–父元素设置相对定位
  absolute–自适应宽度元素绝对定位
  (absolute元素在relative元素里面)

PS:固定宽度列的高度 > 自适应宽度的列
（由于绝对定位脱离标准文档流，高度无法撑开父元素，可能脱离父元素的范围）