简析CSS盒模型（Box Model）

CSS 盒子模型(Box Model)

每个HTML元素都可以看作是一个盒子，父元素和子元素的关系就行大盒子里放了个小盒子，兄弟元素就像在大盒子平放了两个小盒子。盒模型包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

• 个人觉得盒模型主要是用来区分如何计算元素的大小

标准盒模型 (W3C盒模型)

标准的盒模型由content内容+padding内填充+border边框+margin外边距组成
盒子的大小由:内容的宽高+内填充的大小+边框的大小+外边距的大小决定

div{
    width: 200px;
    height: 200px;
    background: red;
    padding:10px;
    border:10px solid #ccc;
    margin:10px;
}
//盒子宽：260px;高：260px;
//div元素宽：240px;高：240px;
//content宽200px,高:200px;

怪异盒模型 (IE盒模型)

怪异盒模型由content内容+padding内填充+border边框组成
盒子的大小由：width、height决定

div{
    width: 200px;
    height: 200px;
    background: red;
    padding:10px;
    border:10px solid #ccc;
    margin:10px;
}
//盒子宽：200px;高：200px;
//div元素宽：200px;高：200px;
//content宽160px,高:160px;

• 既标准盒模型的width、height是指content的大小，怪异盒模型的width、height是指content+padding+border的大小
• 当box-sizing为content-box时，使用的是W3C盒模型，当box-sizing为border-box时，使用的是IE盒模型。

内边距padding

• padding-方向（left,right,top.bottom）表示给指定方向设置内边距。
• padding 简写，其属性值遵循上右下左的顺序，若缺值找反向的值。若只有一个值，则上右下左方向的值都一样。

div{
    width: 200px;
    height: 200px;
    background: red;
    padding:10px 20px;
    padding-left:30px;
} 

外边距margin

• margin-方向（left,right,top.bottom）表示给指定方向设置外边距。
• margin 简写，其属性值遵循上右下左的顺序，若缺值找反向的值。若只有一个值，则上右下左方向上的值都是一样的。

div{
    width: 200px;
    height: 200px;
    background: red;
    margin:10px 20px 30px 40px;
    margin-top:50px;
}

边框属性 border

1.边框宽度 border-width

2.边框样式 border-style,属性值为：solid实线 dashed虚线 dotted点线 double双线

3.边框颜色 border-color

div{
    width: 200px;
    height: 200px;
    border-width:3px;
    border-style: double;
    border-color:red;
    <!--border:1px solid #ccc;合并写法-->
}

4.改变某条边框的属性值,border-方向left、right、top、bottom）

border-left:2px dashed red;
border-bottom:4px solid orange;

5.改变某条边框的具体某个属性的属性值,border-方向-属性(width、style、color)

border-right-style:dotted;
border-left-color:pink;
border-top-width:1px;