Four parts of the box:
border: border
padding: inner margin
margin: outer margin
content: the length and width of the content
box is actually the same as the length and width of the content.
border: border
Three attributes: border color, border line type, border thickness
- The four sides can be set separately.
- The border definition can be abbreviated, and the three attributes have no order requirements.
padding: inner margin
- The four sides can be set separately.
- The meanings that can be set together are as follows
: padding: 10px; all
four paddings are 10px
padding: 10px 15px;
four paddings represent up and down, left and right
padding: 10px 15px 20px;
four paddings represent top, left, and bottom
padding: 10px 15px 20px 25px;
four inner margins represent top, right, bottom, left
3. Application: You can set the navigation bar to be evenly
padding: 0px 20px; the
inner margin is 20, which can make the grid uniform
margin: outer margin
- The four sides can be set separately.
- The meanings can be set together as follows
: padding: 10px;
four outer margins are 10px
padding: 10px 15px;
four outer margins represent up and down, left and right
padding: 10px 15px 20px;
four outer margins represent top, left, and bottom
padding: 10px 15px 20px 25px; The
four outer margins represent top, right, bottom, and left
3. Application: You can set the element to be centered.
Margin: auto; or
margin: 0 auto;
As long as the left and right outer borders are automatic, block-level elements can be centered
text-align: center ;
Another inline element with no width can be centered.
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子属性</title>
<style>
.div0 {
height: 50px;
background-color: black;
/* 为了显示边界，方便观察 */
}
.div1 {
border: red 5px solid;
/* 简写模式 无顺序要求*/
/* border-style: solid; */
/* 边框线的类型 */
border-top: solid 5px blue;
/* 四个边可分别设置 */
padding: 10px 15px 20px 25px;
/* 四个内边距 代表上，右，下，左 */
/* padding-left: 10px; */
/* 四个边可分别设置 */
margin: 10px 15px 20px 25px;
/* 四个外边距 代表上，右，下，左 */
background-color: chartreuse;
}
.div2 {
width: 500px;
height: 200px;
border: red 5px solid;
padding: 10px 15px 20px 25px;
margin: 0 auto;
/* 只要左右外边框为自动，便可以居中 */
text-align: center;
/* 另没有宽度的行内元素，可以居中 */
background-color: chartreuse;
}
.div3 {
/* width: 500px; */
/* 不设置宽 */
height: 20px;
padding: 0px 20px;
margin: 0 auto;
/* 内边距为20，可以是格子均匀 */
text-align: center;
background-color: chartreuse;
}
.span1 {
background-color: rosybrown;
}
.span2 {
background-color: blanchedalmond;
}
* {
margin: 0px;
/* 清除自带的外边距 */
padding: 0px;
/* 清除自带的内边距 */
}
</style>
</head>
<body>
<div class="div0"></div>
<div class="div1">四大属性</div>
<div class="div0"></div>
<div class="div2">居中</div>
<div class="div0"></div>
<div class="div3">
<span class="span1">长的内容----</span>
<span class="span2">短的</span>
<span class="span1">较长的</span>
</div>
</body>
</html>
Web page style:
