一、盒模型
1.什么是盒模型
所有的HTML标签都可以看成矩形盒子，由width、height、padding、border构成。
2.盒模型总宽度
盒子的总宽度=width + 左右padding + 左右border
border：边框
padding：内容到达边框区域（页边距）
3.width属性
width属性表示盒子内容的宽度。
width属性的单位通常是px，移动端开发也会设计百分数、rem等单位。
当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满。
4.padding属性
padding是盒子的内边距，即盒子边框内壁到文字的距离。
1）padding四个方向
padding属性的四个方向，可以分别用最小属性来设置
| 四个方向 | 含义 |
|---|---|
| padding-top | 上 padding |
| padding-right | 右 padding |
| padding-bottom | 下 padding |
| padding-left | 左 padding |
2）padding的四数值写法：
padding属性如果用四个数值以空格隔开进行设置，分别表示：上、右、下、左的padding
顺时针：上右下左
3）padding三数值写法
padding属性如果用三个数值以空格隔开进行设置，分别表示：上、左右、下的padding
5.margin属性
margin是盒子的外边距，即盒子和盒子之间的距离
1）margin四个方向
margin属性的四个方向，可以分别用最小属性来设置
| 四个方向 | 含义 |
|---|---|
| margin-top | 上 margin |
| margin-right | 右 margin |
| margin-bottom | 下 margin |
| margin-left | 左 margin |
2）margin塌陷现象(少)
竖直方向的margin有塌陷现象。即：margin不叠加，小的margin会塌陷到大的margin中，以大的为准
3）元素默认margin(少)
有些元素有默认的margin，比如：body、hn、ul、ol、p等，在开始网页制作时，一般要将他们清除
6.盒子水平居中(少)
若盒子的左右margin都设置为auto，盒子将水平居中
若盒子的text-align设置为center，盒子内的文本将居中对齐
注：盒子的垂直居中，需要使用绝对定位技术实现
7.box-sizing属性(少)
若想将padding、border都包含到width中，可以设置box-sizing: border-box;
8.块级元素与行内元素比较
img元素和表单元素是特殊的行内块元素，他们即能够并排显示，也能够设置宽高
9.display属性
display属性规定元素应该生成的框的类型
二、CSS案例
盒模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4.盒模型</title>
</head>
<style>
/*
盒模型：所有的HTML标签，都可以看成矩形的盒子，由宽度、高度、padding、border构成，称为：盒模型
*/
/* 没有设置box-sizing属性。盒子的宽度就是220 */
.box1 {
width: 220px;
height: 220px;
padding: 30px;
border: 30px solid red;
margin: 60px;
}
/*如果设置了box-sizing属性=border-box，盒子的宽度则包含了padding 和 border */
.box2 {
box-sizing: border-box;
width: 220px;
height: 220px;
padding: 30px;
border: 30px solid red;
margin: 60px;
}
/*如果设置了box-sizing属性=inherit，规定应从父元素继承 box-sizing 属性的值。 */
.box3 {
box-sizing: inherit;
width: 80px;
height: 80px;
padding: 10px;
border: 10px solid red;
margin: 0px;
}
</style>
<body>
<!-- 盒模型1：没有设置box-sizing属性。盒子的宽度就是220 -->
<div class="box1">
220*220
</div>
<!-- 盒模型2：设置了box-sizing属性=border-box，盒子的宽度则包含了padding 和 border -->
<div class="box2">
100*100
</div>
<!-- 盒模型3：设置了box-sizing属性=padding-box，盒子的宽度则包含了padding -->
<div class="box2">
<div class="box3">
40*40
</div>
</div>
</body>
</html>
padding的四个方向：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding的四个方向</title>
<style>
/*
padding 的定义：padding 是盒子的内边距，即盒子边框内壁到文字的距离
margin 的定义：是盒子的外边距，即盒子和盒子之间的距离（最后顺便讲一下）
*/
/* 四值表示法 (上、右、下、左) */
.box1 {
padding: 50px 50px 50px 50px;
}
/* 三值表示法 (上、左右、下) */
.box2 {
padding: 50px 50px 50px;
}
/* 二值表示法 (上下、左右) */
.box3 {
padding: 50px 50px;
}
/* 一值表示法 (四周) */
.box4 {
padding: 50px;
}
/* 最小属性法 */
.box5 {
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
}
div {
border: 30px pink solid;
width: 250px;
height: 250px;
margin-top:30px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box1">1.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
<div class="box2">2.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
<div class="box3">3.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
<div class="box4">4.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
<div class="box5">5.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
</body>
</html>
margin塌陷：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin塌陷</title>
<style>
/*
竖直方向的margin有塌陷现象。即：margin不叠加，小的margin会塌陷到大的margin中，以大的为准。
*/
div {
border: 30px pink solid;
width: 250px;
height: 250px;
overflow:hidden;
}
.box1 {
margin-bottom: 50px;
}
.box2 {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">1.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
<div class="box2">2.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
</body>
</html>
块级元素和行内元素互转：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级函数、行内元素互转</title>
<style>
/*
display 属性规定元素应该生成的框的类型，因此可以用它来进行块级元素和行内元素转换
*/
a,span {
display: block; /*行内元素转块级元素*/
width: 200px; /*可以设置宽高了*/
}
p,div {
display: inline;/*块级元素转换为行内元素*/
}
</style>
</head>
<body>
<h2>1.以下a、span、元素转换为块级元素了（不并排显示了）</h2>
<a href="www.baidu.com">到百度</a>
<a href="www.google.com">到谷歌</a>
<span>你好，</span>
<i>天猫</i>
<hr>
<h2>2.以下p、h元素转换为行内元素了(可以并排显示)</h2>
<p>贵州茅台</p>
<div>不错</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
