CSS中的盒模型(五)

··](https://img.haomeiwen.com/i1658521/8d987130d6fec275.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Snip20161109_13.png

这个盒子的width: 100px; height: 100px;但是真实的宽高是204*204.因为还得加上padding以及border.
真实占有宽度 = 左border +左padding+wigth+右padding+右border
举两个例子
Css样式：

    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 5px solid red;
        }
        .box2{
            width: 250px;
            height: 250px;
            padding: 25px;
            border: 5px solid red;
        }
    </style>

真实占有宽度

1.1 盒子中的padding(内边距)属性

padding:10px 8px 6px 4px; 上10px 右8px 下6px 左4px
padding:10px 8px 5px; 上10px 左右8px 下5px
padding:10px 5px; 上下10px 左右5px
padding:10px; 上右下左各10px
注意写法:
用小属性层叠大属性

padding:10px;
padding-right:20px;

错误方式(不能把小属性，写在大属性前面,这样会把20px层叠掉):

padding-right:20px;
padding:10px;

层叠掉的意思举例说明:

层叠举例说明

1.2 盒子中的border(边框)属性

边框三要素:粗细、线型、颜色。
颜色不写默认黑色，另外两个属性必须要写

线型：solid(实线)、dashed(虚线)、dotted(圆虚线)

三种border线型

border属性能够被拆开，有两大拆开方式：
按三要素: border-width(边框宽度)、border-style(边框线型)、border-color(边框颜色)、
按方向:border-left、border-right、border-top、border-bottom

还能这么玩:

   .box1{
            border-width: 10px 30px;
            border-style: solid dashed dotted;
            border-color: gold fuchsia pink chartreuse;
            height: 100px;
            width: 100px;
        }

将三要素拆分

其他用法：

border:5px solid red;
border-right-color:green;

Snip20161111_25.png