CSS的盒模型

最近在实习，主要是做一些页面布局和逻辑等一些简单工作。嗯......因为实习之前连布局都不是很熟悉?。布局是用CSS来写，CSS（层叠样式表Cascading Style Sheets）是用来表现HTML、XML等文件的样式的语言，依我的理解，HTML、XML是骨骼，是整个页面的渲染架构；CSS是血肉，用来展现页面的外观，包括一些酷炫的动画；JavaScript 是灵魂和感官，可以做控制，也可以感知外界（获取数据等）。

学习CSS最基础的就是了解盒模型。

                                                

上图蓝色区域是内容（content）区，绿色是内边距（padding），黄色是边框（border），最外面一层驼色的是外边距（margin）。可以用快递盒来理解盒模型，快递的实际内容物（就是我们买的东西）是content，在内容物外包裹的一层泡沫纸是padding（假设泡沫纸与内容物、快递盒均紧密贴合），快递盒的纸板厚度是border，两个快递需要空出一定距离，那就是margin。

在使用盒模型时的一些小问题：

1. width：100%和padding结合使用会出现问题。height、width均指的是内容物的高和宽，例如上图的width = 375px，height = 2939.440px。当元素没有指定宽时，默认width+padding+border+margin = 100%，所以元素的实际宽度会被压缩，不到100%；当元素指定了宽度以后，那么元素的实际宽度就是100%，再加上padding等，盒子的总宽就会超过100%，当body被设成overflow：hidden的时候，就会是这个样子：

                                     

2. margin边距会合并。两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于较大的那个边距值。比如当一个div的下边距为10px，另一个div的上边距也是10px时，他们叠加起来得到的边距还是10px；若一个是10px，一个是20px，则得到的是20px。

3. CSS需要初始化。

body, html, div, img, li, ul{
    margin:0;
    padding:0;
}

暂时就这些，想到还会更新～