盒子模型

盒子布局

div：divide分隔，

        场景  网页较复杂时，把网页分成一个一个的区域（导航、主题内容、新闻列表），利于代码可读性和可维护性。

div的css属性：

           border：边框。初学时为div加边框有利于理解

            margin：外边距

                            1）div兄弟同级别。div与div之间的外边距距离       外边距重叠算较大的。

                            2）div父子嵌套。子div的边框到父div的边框距离。默认0px。body也是容器。

            padding：内边距        一个div自己内容的自己边框距离（垂直距离）；默认0px；

              内容：div中其他标签占据的体积。

              width：宽，   为了防止div宽度不确定导致不容易布局，发明者规定    默认div宽度100%。

              height：高，      默认值为内容的高度+内边框的高度

 

小技巧：文字在div垂直（不是水平）居中

                思路：div不设置height。这样div的高度等于文字高度+上内边距+下边距