ife-学习笔记（1） Task01

任务三：三栏式布局/任务四：居中布局
理解position的含义（事实上在这个例子中似乎作用不大）
Float的用法：div以左右中布局，左右采用float，中间采用左右距离的margin使其实现自适应
浮动的消除：在container容器中添加清楚浮动的属性：overflow:auto

如何防止margin和padding造成的将盒子撑破问题（参考他人例子得知）：

1. calc() ：
   calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度。
   比如说：width:calc(50% + 2em)
   这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。
   通常用于一些百分比的计算，要注意的是在使用加减号的时候，注意符号前后要有空格，否则判定无效。
2. 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