五、盒子模型
1.简介
盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：
- width 宽度
- height 高度
- border 边框
- padding 内边距
- margin 外边距
2.盒子模型
2.1 border
表示盒子的边框
分为四个方向：
- 上top、右right、下bottom、左left
- border-top、border-right、border-bottom、border-left
每个边框包含三种样式：
- border-top-color、border-top-width、border-top-style
- border-right-color、border-right-width、border-right-style
- border-bottom-color、border-bottom-width、border-bottom-style
- border-left-color、border-left-width、border-left-style
样式style的取值：
solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线
简写，三种方式：
-
按方向简写：
border-top、border-right、border-bottom、border-left
书写顺序：
border-顺序：width style color
-
按样式简写：
border-color、border-width、border-style
书写顺序：
border-样式：top right bottom left
必须按顺时针方向书写，同时可以缩写：
- border-width:2px;--------->四个边框的宽度均为2px
- border-width:1px 2px;
- border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样
-
终级简写：
如果四个边框样式完全相同，border:width style color;
2.2 padding
表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准
2.3 margin
表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
居中对齐：
/* 元素的水平居中 */
/* 1.块级元素的水平居中 */
margin:0 auto;
/* 提示：块级元素必须指定宽度 */
/* 2.文本的水平居中 */
text-align:center;
/* 3.垂直居中，将height和line-height设置为相同 */
height:100px;
line-height:100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:250px;
background:#ccc;
}
.first{
/* border-top-color:red;
border-top-width:1px;
border-top-style:solid;
border-right-color:blue;
border-right-width:2px;
border-right-style:dotted;
border-bottom-color:green;
border-bottom-width:4px;
border-bottom-style:dashed;
border-left-color:gray;
border-left-width:6px;
border-left-style:double; */
/* border-top:1px solid red;
border-bottom:2px dashed blue; */
/* border-color:red yellow green;
border-width:1px 2px 4px 6px;
border-style:solid dashed dotted solid; */
border:1px solid red;
padding:20px;
margin:10px;
}
.second{
/* padding-top:5px;
padding-left:3px;
padding-bottom:10px;
padding-right:8px; */
/* padding:1px 2px 4px 6px; */
padding:5px;
}
.third{
/* margin-top:50px;
margin-left:30px; */
/* margin:10px 20px; */
/* 元素的居中 */
/* 1.块级元素水平居中 */
margin:auto;
/* 2.文本水平居中 */
text-align:center;
/* 3.文本垂直居中 将height与line-height设置为相同 */
height:100px;
line-height:100px;
}
</style>
</head>
<body>
<p class="first">nihao</p>
<p class="second">hello</p>
<p class="third">welcome</p>
</body>
</html>
示例：
3.其他
3.1 元素所占空间
页面中的元素实际所占的空间
- 宽度=width+左右padding+左右border+左右margin
- 高度=height+上下padding+上下border+上下margin
3.2 盒子属性默认值
不同标签的盒子属性默认值可能不同，需要自己设置
body,ul,ol,dl,li,p,h1,h2,h3,h4,h5,h6,form{
margin:0;
padding:0;
}
- 1
- 2
- 3
- 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* body默认margin不为0 */
body{
margin:0;
padding:0;
}
/* p默认margin不为0 */
p{
margin:0;
}
ul{
list-style:none;
margin:0;
padding:0;
}
body,ul,ol,dl,li,p,h1,h2,h3,h4,h5,h6,form{
margin:0;
padding:0;
}
</style>
</head>
<body>
welcome to css!
<p>hello world</p>
<!-- ul>li{hello$}*3 -->
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
</ul>
</body>
</html>
示例：
3.3 外边距的合并
也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边
距值为其中较大的那个外边距值
两种情况：
- 当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并
- 当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并
外边距的合并的好处，让排版在视觉上显得更美观
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
background:#cccccc;
}
.div1{
margin-bottom:20px;
}
.div2{
margin-top:30px;
}
.div3{
width:100px;
height:100px;
background:blue;
margin-top:20px;
/* padding:2px;
*/ /* border:1px solid red; */
}
.div4{
margin-top:30px;
}
p{
margin:20px 0;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<hr>
<div class="div3">
<div class="div4"></div>
</div>
<hr>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
</body>
</html>
示例：
