14.CSS-边框属性、内边距属性和外边距属性⽂章⽬录
边框属性
1.什么是边框？
边框就是环绕在标签宽度和⾼度周围的线条
2.边框属性的格式
border的属性：
border-width
border-style
border-color
border-style的取值
none 定义⽆边框。
dotted 定义点状边框。在⼤多数浏览器中呈现为实线。
dashed 定义虚线。在⼤多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
2.1连写（同时设置四条边的边框）
border：边框的宽度 边框的样式 边框的颜⾊
快捷键：bd+ +tab——>border: 1px solid #000;
2.2连写（分别设置四条边的边框）
border-top：边框的宽度 边框的样式 边框的颜⾊
border-bottom：边框的宽度 边框的样式 边框的颜⾊
border-right：边框的宽度 边框的样式 边框的颜⾊
border-left：边框的宽度 边框的样式 边框的颜⾊
快捷键：
bt+ +tab——>border-top: 1px solid #000;
bb+ +tab——>border-bottom: 1px solid #000;
br+ +tab——>border-right: 1px solid #000;
bl+ +tab——>border-left: 1px solid #000;
2.1和2.2注意点
1.连写格式中颜⾊属性可以省略，省略之后默认就是⿊⾊；
2.连写格式中样式不能省略，省略之后就看不到边框了；
3.连写格式中宽度可以省略，省略之后还是可以看到边框。
2.3连写（分别设置四条边的边框）
border-width: 上 右 下 左
border-style: 上 右 下 左
border-color: 上 右 下 左
2.3注意点
1.这三个属性的取值是按照上右下左赋值的（顺时针）
2.这三个属性的取值省略时的规律：
如果只赋值了上右下，那么左边的取值和右边⼀样；
如果只赋值了上右，那么左边的取值和右边⼀样，下边的取值和上边⼀样；如果只赋值了上，那左边、右边、下边的取值和上边⼀样。
2.4⾮连写（⽅向+要素）
border-top-width: ;
border-top-style: ;
border-top-color: ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>44-边框练习</title>
<style>
div{
width: 100px;
height: 100px;
}
.box1{
border: 5px solid black;
}
.box2{
border-width: 5px 5px 5px 5px;
border-style: solid solid solid solid;
border-color: red green blue purple;
}
.box3{
border-top: 5px solid red;
border-right: 5px dashed red;
border-bottom: 5px solid red;
border-left: 5px solid red;
}
.box4{
border-top: 5px solid red;
border-right: 5px dashed red;
border-bottom: 5px solid red;
border-left: 5px dashed red;
}
.box5{
border-top: 5px solid black;
border-right: 5px solid black;
border-left: 5px solid black;
}
.box6{
width: 0;
height: 0;
border-width: 25px;
border-style: solid;
border-color: red white white white;
}
</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
<hr>
<div class="box5"></div>
<hr>
<div class="box6"></div>
</body>
</html>
可以画出⼀个倒三⾓形
width: 0;
height: 0;
border-width: 25px;
border-style: solid;
border-color: red white white white；内边距属性
1.内边距
内边距就是单元格的边框和内容之间的距离。
默认情况下，内边距就是1。
2.如何设置内边距属性？
2.1 ⾮连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2 连写
padding：上 右 下 左；
这个属性的取值省略时的规律：
如果只赋值了上右下，那么左边的取值和右边⼀样；
如果只赋值了上右，那么左边的取值和右边⼀样，下边的取值和上边⼀样；如果只赋值了上，那左边、右边、下边的取值和上边⼀样。
3.注意点
1.给标签设置内边距之后，标签占有的宽度和⾼度会发⽣变化；
2.内边距也会有背景颜⾊。
外边距属性
1.外边距
外边距就是单元格和单元格之间的距离。
默认情况下，外边距就是2。
2.如何设置外边距属性？
2.1 ⾮连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2 连写
margin: 上 右 下 左;
这个属性的取值省略时的规律：
如果只赋值了上右下，那么左边的取值和右边⼀样；
如果只赋值了上右，那么左边的取值和右边⼀样，下边的取值和上边⼀样；如果只赋值了上，那左边、右边、下边的取值和上边⼀样。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>46-外边距属性</title>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="box1">我是span</span>
<span class="box2">我是span</span>
<span class="box3">我是span</span>
</body>
</html>
标签与标签的间隔不是外边距，⽽是把回车当成空格来处理的。如果把空格和回车删掉就会变成这样：
3.注意点
外边距的那⼀部分是没有背景颜⾊的。
cssclass属性4.外边距合并现象
在默认布局的垂直⽅向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距⽐较⼤就听谁的。text-align:center和margin:0 auto；的区别
text-align: center;
作⽤：设置盒⼦中存储的⽂字和图⽚⽔平居中
margin:0 auto;
作⽤：让盒⼦⾃⼰⽔平居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。