CSS+HTML开发经验
1：大模块，也具有唯一性，所以在开头的div使用id选择器header;
中间层使用id选择器mainbody,底层使用id选择器footer;
2:先布局，后填充
3:为三个层设置一个包裹层，使内容居中,方法技巧，使用width设置一下宽度，然后使用margin:0 auto;自动居中
(自动居中一列布局需要设置margin左右值设置为auto，而且一定要设置width为一个定值。)
特别提醒，设置了浮动float或者设置了绝对定位position也是无法实现自动居中的
CSS+HTML的案例
(CSS规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。)
1：自动居中
列布局案列，盒子模型的使用方法
自动居中与列布局：
三个技能点：标准文档流，块级元素，margin属性
2：浮动布局案例
2.1：float属性，解决浮动影响的方法
2.2：网页布局最常见的方式之一
主要应用技能：float属性，使纵向排列的块级元素，横向排列
margin属性，设置两列之间的间距
3：绝对定位布局案例
绝对定位实现横向两列或多列布局
4:标准文档流(Normal flow)
4.1：特点：从上到下，从左到右，输出文档内容
由块级元素和行级元素组成
4.2：块级元素
特点：从左到右撑满页面，独占一行
触碰到页面边缘时，会自动换行
常见的块级元素，如
div,ul,li,dl,dt,p...
4.3:行级元素
特点:能在同一行内显示
不会改变html文档结构
常见的行级标签如
span,strong,img,input...
4.4:块级元素和行级元素都是盒子模型
盒子模型=网页布局的基石，由4部分组成：
(1)：边框(border)
(2)：外边距(margin):上(top)右(right)下(bottom)左(left)
margin顺时针设置方向：三个值代表上，左右，下
两个值代表上下，左右
一个值代表四个属性值相同
(3)：内边距(padding):设置三个值代表：上，左右，下
上右下左的顺序设置值
(4)：盒子中的内容(content)
盒子3D模型有外到内margin>background-color>background-image>padding+content>border
从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。
从第五层到第一层依次为：margin、background-color、、background-image、content+padding、border。
盒子模型的尺寸=边框+外边距+内边距+盒子中的内容尺寸
5:浮动布局
5.1：css中规定的第二种定位机制，能够实现横向多列布局。
5.2：通过float属性实现。含三个属性值，left左浮动，right右浮动，none不浮动
特点：元素会左移，或右移，直至碰触到容器为止
设置了浮动的元素，仍旧处于标准文档流中
注意：当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化
5.3：清除浮动的常用方法
(1):clear属性：常用clear:both或者clear:left或者clear:right;
(2):同时设置width:100%(或固定宽度)+overflow:hidden;
(对受到浮动影响的元素设置清除浮动clear:both或者width:100%+overflow:hidden;)
当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动
6:绝对定位
6.1：通过设置position属性实现，css中规定的第三种定位机制
6.2：position属性
拥有3种定位形式：
(1)静态定位，
(2)相对定位：
特点：相对于自身原有位置进行偏移，仍处于标准文档流中，随即拥有偏移量和z-index属性
(3)绝对定位(属性值含absolute和fixed)
特点：建立了以包含块为基准的定位，完全脱离了标准文档流，随即拥有偏移属性和z-index属性;
未设置偏移量特点：无论是否存在已定位祖先元素，都保持在元素初始位置，脱离了标准文档流
设置偏移量特点，偏移参照基准：无已定位祖先元素，以html为偏移参照基准，有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
可设置4个属性值：(1)static静态定位，(2)relative相对定位，(3)absolute绝对定位，(4)fixed固定定位
6.3：横向两列布局
使用绝对定位实现横向两列布局，应用比较少
优势：使用absolute实现横向两列布局，常用于一列固定宽度，另一列宽度自适应的情况
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery