網(wǎng)頁布局基礎(chǔ)（定位）

標(biāo)簽：

Html/CSS

1.css的三种定位机制：标准文档流，浮动，绝对定位
2.盒子3D模型，一共五层，由上往下：
第一层：border、content+padding、background-image、background-color、margin
3.自动居中的三个技能点：标准文档流，块级元素，margin属性
margin:0 auto; 自动居中，auto会根据浏览器的宽度自动的设置两边的外边距
margin：auto自动居中时，不可再设置float或者position，否则会失效
4.width:100%; 设定对象的宽度占父元素100%
width:auto; 根据对象实际大小自适应宽度
5.当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化
6.清除浮动的常用方法：要对受到浮动影响的元素标签使用哦！
法1：clear:both;(或者是left/right)(推荐！！！)：一般用于紧邻后面的元素的清除浮动
法2：width:100%;overflow:hidden;当子包含块中有浮动设置，受影响的是其父包含块和紧邻后面的元素
法3：加<br/>空标签对于块级元素清除浮动比较明显，但是不建议这么做，空标签没意义，对代码结构有影响。
7.横向两列布局是最常用的网页布局方式
主要应用技能：
float属性--使纵向排列的块级元素，横向排列
margin属性--设置两列之间的间距
8.相对定位的特点:
1.相对于原先位置进行定位
2.仍处于文档流中,会占据原来的空间位置
3.拥有偏移属性和Z-index属性,即空间层叠现象
设定相对定位时，会产生层叠效果，并且遮盖住其他元素，而且长度和宽度不会有变化，会将浏览器撑开
9.当元素设置为绝对定位后，元素也会多出两类属性：偏移量属性和 Z-index属性
不同的是：
1.该元素已经脱离了标准文档流（不占位）
2.建立的定位基准不是该元素的原来位置，而是分两种情况
2.1：没有设置偏移量：无论是否存在已定位的祖先元素，都保持在元素初始位置，脱离文档流，宽度塌陷（随内容变化而变化）
2.2：设置了偏移量：又分两种情况（A.无已定位的祖先元素 B.有已定位的祖先元素）
A.无已定位的祖先元素:它会以根节点（<html>）为偏移参照基准
B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准
绝对定位不在文档流中（不会占位置，宽度及长度显示随内容增减而增减
10.横向两列布局
使用absolute实现横向两列布局
常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：relative父元素相对定位 absolute自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列
11.横向有两栏就可以用浮动
横向三栏或三栏以上则要用到定位
页面自动居中：先设置内容的宽度width再margin：0 auto