css盒模型

一个盒模型是由content(内容)、border(边框)、padding(填充)、margin(间隔)这4个部分组成的。

CSS内定义的宽(width)高(height)，指的是填充以内的内容范围，而一个元素实际的宽度＝左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界。如：

 div{
       width:100px;
       margin:10px;
       padding:10px;
       border:10px solid #ccc;
 }

 

 div的实际宽度＝ 10px+10px+10px+100px+10px+10px+10px。

关于盒模型需要注意的几点：

1.边框默认样式(border-style)可设置为不显示(none);

2. 填充值不可为负；

3.浮动元素链接不压缩，若浮动元素不声明宽度，则其宽度趋向于0，即延伸到其内容能承受的最小宽度；

4. 内联元素，例如a元素，定义上下边界不会影响到行高；

5.如果盒中没有内容，则即使定义宽度和高度都为100%，实际上只占0%，即不会被显示，因此在采取布局的时候需要特别注意这一点。