CSS小记 - 盒子模型

盒子模型(margin、border、padding)

- margin(外边距)

        常用样式写法：margin:10px 10px 0 0; 依次设定上、右、下、左外边距 

        其他相关样式：

                - padding-top/right/bottom/left:1px  -  单独设置上下左右外边距

        注意：

        嵌套元素塌陷问题 - 对子元素使用margin没办法将子元素与父元素隔开

        解决：

                1.为父元素定义上边框

                2.为父元素定义上内边框

                3.为父元素添加overflow:hidden

- border(边框) ：会撑开盒子

        常用样式写法：border:1px solid #ccc; 依次表示边框宽度、边框样式(solid(实线)\dotted(点线)\dashed(虚线))、边框颜色

        其他相关样式：

                - border-top/right/bottom/left:1px  -  单独设置上下左右边框

                - border-style:solid  -  单独设置边框样式

                - border-color:#ccc  -  单独设置边框颜色

                - border-width:1px  -  单独设置边框宽度

                 -border-collapse:collapse  -  设置相邻边框合并

        CSS3新增样式：

                - border-radius:10px 10px 0 0;  设置边框的角半径，有效利用可获得圆形、椭圆等

- padding(内边距)：会撑开盒子

        常用样式写法：padding:10px 10px 0 0; 依次设定上、右、下、左内边距 

        其他相关样式：

                - padding-top/right/bottom/left:1px  -  单独设置上下左右内边距

        注意：盒子本身没有width/height时，不会撑开盒子

margin、border、padding区别：

margin  -  盒子与父盒子之间的距离

border  -  盒子边框，如一个60*60px的盒子，其border为2px，则其实为62*62px的盒子

padding  -  盒子中内容与盒子内边框的距离，可用来控制盒子中文本居中或某一位置显示