【前端从0开始】CSS——8、盒模型

---

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 简写属性设置所有内边距属性。

补充：

• 非替换元素：元素的内容包含在文档中
• 替换元素：作为其他内容的占位符

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

取值：

• auto：自动计算内边距
• length：设置像素级px内边距
• %：基于父级元素宽度的百分比内边距
• inherit：从父级元素继承内边距

1.3.2 用法

css

p {
    padding:10px 5px 15px 20px;
    padding:10px 5px 15px;
    padding:10px 5px;
    padding:10px;
}

1.4 CSS外边距（margin）

1.4.1 定义

margin 简写属性设置所有外边距属性。

注意：允许使用负值。

取值：

• auto：自动计算外边距
• length：设置像素级px外边距
• %：基于父级元素宽度的百分比外边距
• inherit：从父级元素继承外边距

1.4.2 用法

css

p {
    margin:10px 5px 15px 20px;
    margin:10px 5px 15px;
    margin:10px 5px;
    margin:10px;
}

1.5 CSS边框 （border）

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;
}
div {
    width:0;
    height:0;
    border:10px solid transparent;
    border-top-color:red;
}

1.5.3 边框圆角（border-radius）

div{
	width: 300px;
	height: 200px;
	background-color: cadetblue;
	border-radius: 50%;
}

2 盒模型

2.1 定义

盒模型描述元素在页面中占用的空间。

• W3C 标准模型

  • 总宽度 = 设置宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
  • 总高度 = 设置高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

---