CSS盒模型与box-sizing

1 盒模型

1.1 CSS宽度（width）

1.1.1 定义

width 属性设置元素的宽度

说明：这个属性定义元素内容区的宽度，在内容区外⾯可以增加内边距、边框和外边距

取值：

• auto 元素实际宽度

• length 设置像素级px宽度

• % 基于父级元素的百分比宽度

• inherit 从父级元素继承宽度，也就是等于父级元素的宽度

1.1.2 用法

.auto {
    width:auto;
}
.length {
    width:200px;
}
.pct {
    width:100%;
}
.inherit {
    width:inherit;
}

1.2 CSS高度（height）

1.2.1 定义

height属性设置元素的⾼度

注意：height属性不包括填充，边框，或边距

取值：

• auto 元素实际高度

• length 设置像素级px高度

• % 基于父级元素的百分比高度

• inherit 从父级元素继承高度，也就是等于父级元素的高度

1.2.2 用法

.auto {
    height:auto;
}
.length {
    height:200px;
}
.pct {
    height:100%;
}
.inherit {
    height:inherit;
}

1.3 CSS内边距（padding ）

1.3.1 定义

padding 简写属性在⼀个声明中设置所有内边距属性

说明：这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。⾏内⾮替换元素上设置的内边距不会影响⾏⾼计算。如果⼀个元素既有内边距⼜有背景，从视觉上看可能会延伸到其他⾏，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。

补充：

• 非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。比如一个段落的文本都在该元素本身之内，这个段落就是一个非替换元素。

• 替换元素：作为其他内容占位符的一个元素称为替换元素，根据标签和属性的值来显示内容的元素。比如img元素，它只是指向一个图像文件，这个文件插入到文档流中。大多数表单元素（input，根据type属性来显示内容）也是替换元素。

注意：不允许指定负边距值。

取值：

• auto 自动计算内边距

• length 设置像素级px内边距

• % 基于父级元素宽度的百分比的内边距

• inherit 从父级元素继承内边距

1.3.2 用法

p {
    /* 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px */
    padding:10px 5px 15px 20px;
    /* 上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px */
    padding:10px 5px 15px;
    /* 上内边距和下内边距是 10px 右内边距和左内边距是 5px */
    padding:10px 5px;
    /* 4 个内边距都是 10px */
    padding:10px;
}

1.4 CSS外边距（margin）

1.4.1 定义

margin 简写属性在⼀个声明中设置所有外边距属性。该属性可以有 1 到 4 个值，与内边距相同

说明：这个简写属性设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，⽽⾏内元素实际上不占上下外边距，⾏内元素的的左右外边距不会合并。同样，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使⽤时要⼩⼼。

注意：允许使⽤负值。

取值：

• auto 自动计算外边距

• length 设置像素级px外边距

• % 基于父级元素宽度的百分比的外边距

• inherit 从父级元素继承外边距

1.4.2 用法

p {
    /* 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px */
    margin:10px 5px 15px 20px;
    /* 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px */
    margin:10px 5px 15px;
    /* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */
    margin:10px 5px;
    /* 4 个外边距都是 10px */
    margin:10px;
}

1.5 CSS边框

1.5.1 定义

border 简写属性在⼀个声明设置所有的边框属性

可以按顺序设置如下属性：

• border-width

• border-style

  • solid 实线

  • dotted 点状线

  • double 双实线

  • dashed 虚线

• border-color

1.5.2 用法

/* 设置四条边框的样式 */
p {
    border:5px solid #ff0000;
}
/* 设置每⼀条边框的样式 */
p {
    border-top:10px solid red;
    border-left:20px dotted green;
    border-right:30px double orange;
    border-bottom:40px dashed red;
}
/* css画一个三角形 */
div {
    width:0;
    height:0;
    border:10px solid transparent;
    border-top-color:red;
}

2 盒模型

2.1 定义

盒模型通过一个模型来描述元素在页面中占用的空间。

• W3C 标准模型 元素的设置宽度和设置高度指内容的宽度和高度

  • 元素总宽度=设置宽度+左填充+右填充+左边框+右边框+左边距+右边距

  • 元素总高度=设置高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

• IE模型 元素的设置宽度和设置高度包括内容的宽度和内边距以及边框宽高

  • 元素总宽度=设置宽度+左边距+右边距

  • 元素总高度=设置高度+上边距+下边距

2.2 box-sizing属性

box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。

取值：

• content-box 指定盒模型为 W3C 标准模型，元素的宽度 = 设置宽度 + 边框宽度 + 内边距

• border-box 指定盒模型为 IE模型，元素的宽度 = 设置宽度 - 边框宽度 - 内边距

• inherit 从父元素继承 box-sizing 属性值

2.3 用法

/* 设置盒子模型为ie盒⼦模型 */
.container {
    box-sizing:border-box;
}
/* 设置盒子模型为标准盒⼦模型 */
.container {
    box-sizing:content-box;
}