css布局学习2--盒子模型

1.在以前的css布局中，元素在页面中实际大小是有width+border+padding  确定得。如图1所示，两个div的大小一致，但在页面实际看来却不同

图1

    以前的页面开发者，为了解决这个问题，会把width变小一点，用来调整整个div在页面中所占的实际大小，现在有了一个属性box-sizing:border-box;这样的话border和padding属性都不会增加元素在页面中的实际大小，代码如图2所示，效果如图3所示，上下两个div的宽度是一样的。

图2

图3

 盒子模型如图4所示

内容区content，呈现了盒子的主要信息内容，这些内容可以是文本，图像等，内容区有三个属性 width height overflow，注意width height是用来定义内容区宽 、高的，而overflow用来定于当内容信息太多是，超出内容区所占范围是，可以用overflow来指定处理方法，为hidden，表示溢出部分不可见，为visible，表示内容可见，但是呈现在盒子外部，为scroll，滚动条被自动加入到盒子中，用户可以滚动显示内容，为auto，由浏览器处理溢出部分。

外边距位于盒子的最外围，她不是一条线，而是添加在边框外边的边框。外边距使元素盒子之间不必紧凑连接在一起。可以通过设置外边距 为负数，产生重叠的效果。