任务三:三栏式布局/任务四:居中布局
理解position的含义(事实上在这个例子中似乎作用不大)
Float的用法:div以左右中布局,左右采用float,中间采用左右距离的margin使其实现自适应
浮动的消除:在container容器中添加清楚浮动的属性:overflow:auto
如何防止margin和padding造成的将盒子撑破问题(参考他人例子得知):
- calc() :
calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度。
比如说:width:calc(50% + 2em)
这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
通常用于一些百分比的计算,要注意的是在使用加减号的时候,注意符号前后要有空格,否则判定无效。 - box-sizing:
默认属性为content-box, 沿袭W3C的Box Model
Element width = width + padding + margin + border
防止撑破布局的话,可以使用border-box属性,element width里面就已经包括了border+padding+margin
calc() 参考资料:
http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
box-sizing 参考资料:
http://www.w3cplus.com/content/css3-box-sizing