浮动、版心布局
浮动 float:left/float:right
-
标准流(文档流):元素按部就班按照自身的特性排列。
-
浮动:元素会脱离标准普通流的控制,移动到指定位置的过程
-
结论(浮动的特征):
-
浮动后的元素会脱离标准流,漂浮在其他没有浮动的盒子上边
-
浮动后的元素不占有原来的位置
-
浮动后的两个块状元素会在同一行显示
-
浮动后的元素不会超出父元素的范围
-
浮动后的元素自动的转化为行内块元素
-
浮动后的元素不超过父元素的内边距
版心布局
-
版心定义:网页主体内容所在的区域
-
布局流程: 由外到内,由大到小
-
确定页面的版心(可视区域)
-
分析页面中的行模块,以及行模块中的列模块
-
制作HTML结构
-
css初始化,然后通过盒子模型的原理,通过div+css布局来控制网页的各个模块。
-
布局分类
-
一列宽度且居中
-
两列左窄右宽
-
通栏平均分布型