CSS盒子模型

一、盒子模型

        1.外边距 -- margin

        2.边框 -- border

        3.内边距 -- padding

        4.实际内容 -- content

二、盒子边框

        border-width 边框粗细

        border- style 边框样式

        border-color 边框颜色 

        边框样式（border-style），常用属性值如下：

        none：没有边框即忽略所有边框的宽度（默认值）
        solid：边框为单实线(最为常用的)
        dashed：边框为虚线  
        dotted：边框为点线
        double：边框为双实

1. 边框综合设置

         border: 1px solid red；

2 .圆角边框(CSS3)

        border-radius: 左上角  右上角  右下角  左下角;

        圆：border-radius: 50%;

三、内边距

        padding属性用于设置内边距 ---- 边框与内容之间的距离。

        padding-top:上内边距

        padding-right:右内边距

        padding-bottom:下内边距

        padding-left:左内边距

        上下左右      ----padding: 20px;

        上下     左右 ---- padding: 10px 20px;

        上    左右    下 ---- padding: 10px 20px 30px;

        上   右   下   左 ---- padding: 10px 20px 30px 40px; 

四、外边距

        margin属性用于设置外边距。

        margin-top:上外边距

        margin-right:右外边距

        margin-bottom:下外边距

        margin-left:上外边距

        margin:上外边距 右外边距  下外边距  左外边

        取值顺序跟内边距相同。

1.外边距塌陷

        给元素设置边框：可以为父元素定义1像素的上边框 或上内边距。

2.外边距的应用-盒子居中

        1.块元素 div 

         2.盒子必须指定了宽度（width） 

         3.左右的外边距都设置为auto**，就可使块级元素水平居中 

五、盒子模型计算大小

        1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此

        值为其默认值，其让元素维持W3C的标准Box Mode。

        2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。

1.盒子模型的分类

        1.1W3C标准盒子（content-box）：

                这种盒模型下元素 width ，实际上只包含 content

                盒子总宽度 = margin + border + padding + width

        1.2.IE盒子（border-box）：

                又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

                在这种盒模型下，元素width ，实际上包含了 content + padding + border

                盒子总宽度= margin + width

六、盒子阴影 

语法格式：

        box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

注意:

        前两个属性是必须写的。其余的可以省略。

        默认是外阴影 (outset) ，不用设置， 想要内阴影设为 inset 。

        X轴与Y轴如果有值，就改变了（正值 向右 向下）