I AM MAO.YOUR FRIEND.WELCOME TO HERE.

每一个不曾起舞的日子都是对生命的辜负

三栏式布局理解float和position

一个多星期前加入了百度前端学院2016年春季班,有一些经典的任务值得分享和琢磨,在接下来的一两个月内会不断记录,也当作是学习笔记了。

任务描述:
左右两栏宽度固定,中间一栏根据父元素宽度填充满,区域的高度取决于三个子元素中最高的高度。
注意测试不同情况,尤其是极端情况下的效果
调节浏览器宽度,固定宽度和自适应宽度的效果始终符合预期。

点击我查看代码
点击我查看Demo

学习笔记:

1、设置了float浮动的元素和绝对定位position:absolute的元素会脱离正常的文档流。但是设置absolute的元素不会占据空间,相当于隐形了。
2、相对定位position:relative是指相对于文档流中的其它已经定义的元素位置进行定位。在不设置top/left/right/bottom/Z-index等值的情况下和默认值static表现一样。
3、绝对定位position:absolute是相对于上一个不为static默认定位的父元素进行绝对定位。若父元素没有指定position,该元素会相对于整个html文档进行定位。
4、overflow:auto;一种清除浮动的方法,在具有浮动元素的父容器中添加,这样父容器就会有一个高度,随着子元素高度增加而增加。
5、考虑浏览器宽度变小的时候,要加min-width~