核心提示：css布局技巧_网页布局基础学习。一、网页布局概念 1-1.网页布局模型分为标准文档流、浮动布局、绝对定位 1-2.对网页布局模型的练习题二、自动居中一列布局 2-1.标准文档流概念、块级元素和行级元...
css布局技巧_网页布局基础学习。
一、网页布局概念
1-1.网页布局模型分为标准文档流、浮动布局、绝对定位
1-2.对网页布局模型的练习题
二、自动居中一列布局
2-1.标准文档流概念、块级元素和行级元素
2-2.盒子模型概念
盒子模型遮挡顺序
border
content+padding
background-image
background-color
margin
2-3.外边距、内边距、边框使用，注意外边距和内边距四个参数、三个参数、两个参数、一个参数和边框参数顺序
2-4.自动居中一列布局是在定宽和不定宽都可的基础上使用了margin:0 auto
2-5.注意盒子模型的遮挡顺序
2-6.注意自动居中一列布局关键在于margin:0 auto
三、横向两列布局
3-1.添加浮动float属性后元素大小随着内容自适应增加
3-2.清除浮动有两种clear:both/left/right width:100% + overflow:hidden
3-3.clear:both用于浮动之后紧邻后面的元素使用，清除父级元素收到子级元素的浮动影响的时候使用overflow
3-4.注意对clear:both和overflow:hideen的分辨
四、绝对定位布局
4-1.static、relative、absolute、fixed概念说明
4-2.relative概念说明，仍处于标准文档流，有偏移属性和z-index，偏移后会遮盖元素
4-3.absolute脱离了标准文档流，若没有偏移属性留在原来的位置，有的话会根据最近父元素有位置属性的为标准没有则为html
4-4.绝对定位实现横向两列布局，一个固定宽度列relative，一个自适应宽度列absolute 前者高度一定要大于后者
4-5.注意绝对定位的定位基准
4-6.注意绝对定位实现横向两列布局
