[华为云WEB前端全栈成长计划]九、CSS盒模型
这一章节，我们学习CSS中大名顶顶的盒元素。
盒模型
简单的说就是把元素当作一个东西，然后用盒子装起来，然后盒子就相当于这个东西(元素)的边框。元素到这个盒子的距离就是内边距，盒子到墙壁的距离就是外边距。
构成：元素内容(content)/东西、内边距(padding)/到盒子之间的距离、边框(border)盒子本身、外边距(margin)盒子在房间内的位置。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
.div{
padding: 100px;
border: 1px solid red;
margin: 50px;
}
</style>
</head>
<body>
<div class="div">我的快递</div>
</body>
</html>
效果：
注意看所示盒子和右下角的小图展示。
绿色区域为内边距，蓝色区域为内容，剩下这个不认识的颜色(??)就是外边距，而外边距和内边距之间有一条1px红色实线就是边框。
内边距
内边距有四个方向，上下左右。可以使用
padding-top: 上
padding-left: 左
padding-bottom: 下
padding-right: 右
来设置四个边距的大小，可以使用百分比或者具体的像素值
也可以简写为padding：这个属性比较神奇，你可以设置1-4个值。都可以分别代表
1个值：上下左右
2个值：上下 左右
3个值：上 左右 下
4个值：上 右 下 左
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
.div{
padding-top: 10px;
padding-left: 20px;
padding-bottom: 30px;
padding-right: 40px;;
/*padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;*/
}
</style>
</head>
<body>
<div class="div">我的快递</div>
</body>
</html>
效果图：
边框
我们经常对边框有如下的设置：
样式、宽度、颜色、还有复合属性(使用多种样式定义边框)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
.div{
/*border-style:solid ;
border-width: thick;
border-color: red; */
border: dotted thick red;
}
</style>
</head>
<body>
<div class="div">我的快递</div>
</body>
</html>
其中border-style：可以是solid(实线)、dashed、dotted、double、groove、ridge、inset、outset等
border-width：可以是长度，也可以是thin、medium、thick
border-color：可以使用三种颜色赋值方案进行赋值
border：是以上三种的整合。样式、宽度、颜色。
我们也可以对边框的四个方向分别进行单独处理。可使用的属性为：
border-bottom/top/left/right:
border-bottom/top/left/righ-style:
border-bottom/top/left/righ-width:
border-bottom/top/left/righ-color:
外边距
margin属性赋值和padding差不多，只需要把padding换成margin即可。
但是需要注意的是里面的值可以设置为auto。当左边距设置为auto，表示居左，有边距设置auto表示居右，当左右属性设置为auto表示居中。左右元素就是当设置两个值，或者3个值时候的第二个属性值，不要忘了。
另外我们使用margin时要注意当块级元素和块级元素相连接，计算距离的时候取边距最大一个值，而行级元素计算记录取边距之和。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
.div1{
width: 200px;
margin: 10px auto;
}
.div2{
margin: 10px 20px;
}
.div3{
margin: 10px 40px;
}
.span1{
margin: 20px 10px;
}
.span2{
margin: 40px 10px;
}
</style>
</head>
<body>
<div class="div1">11111111111111111</div>
<div class="div2">22222222222222222</div>
<div class="div3">33333333333333333</div>
<span class="span1">444444444444444444</span>
<span class="span2">555555555555555555</span>
</body>
</html>
代码如上，可以自己使用F12，进行检查元素。
display
display用来设置块元素和内联元素(行)的转换，可以将div设置为内联元素，也可将span设置为块元素，或者你可以让元素同时具备块和内联的特性比如设置宽和高，同行显示多个元素，又或者隐藏他们。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
.div1{
color: red;
display: inline;
}
.span1{
color: blue;
display: block;
}
.div2{
color: gray;
border: solid 1px red;
height: 50px;
width: 400px;
display: inline-block;
}
.div3{
color: gray;
border: solid 1px red;
height: 50px;
width: 400px;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">11111111111111111111111111111</div>
<span class="span1">22222222222222222222222222222</span>
<div class="div2">11111111111111111111111111111</div>
<div class="div2">22222222222222222222222222222</div>
<br />
<div class="div3">33333333333333333333333333</div>
<div class="div3">33333333333333333333333333</div>
</body>
</html>
效果：
我们发现行级元素间，有小的距离，这是因为我们使用了回车或者空格，也会展示出来。
为了解决这个问题。我们改进了代码，使用body的font-size属性，将其设置为0.然后，我们需要给每个元素设置字体的大小，要不然，会丢失字体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
.div1{
color: red;
display: inline;
font-size: 20px;
}
.span1{
color: blue;
display: block;
font-size: 20px;
}
.div2{
color: gray;
border: solid 1px red;
height: 50px;
width: 400px;
display: inline-block;
font-size: 20px;
}
.div3{
color: gray;
border: solid 1px red;
height: 50px;
width: 400px;
display: inline-block;
font-size: 20px;
}
body{
font-size: 0px;;
}
</style>
</head>
<body>
<div class="div1">11111111111111111111111111111</div>
<span class="span1">22222222222222222222222222222</span>
<div class="div2">11111111111111111111111111111</div>
<div class="div2">22222222222222222222222222222</div>
<br />
<div class="div3">33333333333333333333333333</div>
<div class="div3">33333333333333333333333333</div>
</body>
</html>
效果：
- 点赞
- 收藏
- 关注作者
评论（0）