简析CSS盒模型Box-Model

CSS 盒子模型(Box Model)

每个 HTML 元素都可以看作是一个盒子，封装周围的 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;