包含:宽高,内外间距,边框
content:包含width,height
border:边框部分,边框会影响实际盒子大小
border-方向-width: 边框的宽度
border-方向-color: 设置边框颜色
border-方向-style: 设置边框的样式
一次可设置多个边框:四个值:上右下左;三个值:上 左右 下;两个值:上下 左右
border简写:border:颜色,样式,粗细
实例:三角边框的实现:
实现原理:给该元素不设置高度,设置目标三角形边的颜色,其余各边设置为透明色
<!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>Document</title>
<style>
//中间留有间隙
.box1{
width:5px;
height:5px;
background-color:yellow;
border-top:30px red solid;
border-bottom:30px blue solid;
border-right:30px green solid;
border-left: 30px pink solid;
}
//四个三角形
.box2{
width:0;
/* height:5px; */
background-color:yellow;
border-top:30px red solid;
border-bottom:30px blue solid;
border-right:30px green solid;
border-left: 30px pink solid;
}
//上三角形
.box3{
width:0;
/* height:5px; */
/* background-color:yellow; */
border-top:30px red solid;
border-bottom:30px transparent solid;
border-right:30px transparent solid;
border-left: 30px transparent solid;
}
//下三角
.box4{
width:0;
border-top:30px transparent solid;
border-left:30px rgba(0,0,0,0) solid;
border-right:30px transparent solid;
border-bottom:30px green solid;
}
</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
</body>
</html>
padding:内间距,标签边框距离内容之间的间距,会改变盒子实际大小
简写:
padding: 上 右 下 左
padding: 上下 左右
padding: 上下左右
margin:外边距,设置盒子与盒子间的距离
简写:同上,使用auto,浏览器自动计算
外边距应用:实现已知宽度块级盒子居中