收藏
批改状态：合格
老师批语：写得这么好 , 不多说, 好评
盒子的属性有width、height、background、margin、padding、border。margin、padding、border三个属性具有方向性：按照顺时针方向依次排列，如：margin-top、margin-right、margin-bottom、margin-left
在内容大小一定的情况下，如果添加内边距和边框，那么整个盒子的大小就会增大，如果还想保持盒子原来的大小，那就必须重新定义内容的大小，这样每调整一次内边距和边框，都要重新设置内容的大小 ，是很麻烦的一件事，如果使用了box-sizing属性，那么不论怎么改变边框和内边距，盒子的大小都不会再改变了，都会保持原来的大小。
当两个同级盒子按照默认顺序时行上下排列的时候，在不设置外边距的情况下，两只盒子是紧紧贴在一起的，中间没有距离的。代码如下：
实例
……
<div class="box1"></div>
<div class="box2"></div>
……
样式规则：
div {
box-sizing: border-box;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
运行实例结果如下图：
1.png
当给上边的盒子设置外边距为20px时，两只盒子之间的距离就会有20px。样式代码如下：
实例
.box1 {
margin-bottom: 20px;
}
运行实例如下图：
2.png
当下边的盒子也设置上边外边距为30px时，此时两个盒子之间的距离不是20+30，实际上只有30px，这种现象就叫做外边距的合并。样式代码如下：
实例
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}
运行实例结果如下图：
3.png
手抄代码如下：
4.jpg
总结：两只盒子之间的距离，就是两个盒子相邻边距中的较大的值。
如果是两只嵌套的盒子，那么子盒子会默认贴在父盒子的左上角。如果想让子盒子离开父盒子的上边线，依靠设置子盒子margin-top属性值是做不到的，如果设置，子盒子的外边距会传导给父盒子，成为父盒子的外边距。因此要想让子盒子离开父盒子的上边线，可以通过设置父盒子的上内边距来实现。代码如下：
实例
……
<div class="box3">
<div class="box4"></div>
</div>
……
样式规则：
.box4 {
margin-top: 30px;
}
运行实例结果如下图：
5.png
设置父盒子的上边内边距，让子盒子离开父盒子的上边线，代码如下：
实例
.box3 {
padding-top: 30px;
}
运行实例结果如下图：
7.png
手抄代码：
8.jpg
HTML代码如下：
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景控制</title>
<link rel="stylesheet" href="static/css/style3.css">
</head>
<body>
<div class="box"></div>
</body>
</html>`
基本CSS样式代码：
`.box {
width: 450px;
height: 500px;
box-sizing: border-box;
}
/背景色/
.box {
background-color: lightgreen;
}
/通过边框间隙,可以看到背景色会自动延伸到内边距, 边框/
/背景裁切: 设置背景的覆盖范围, 也适用于背景图片/
.box {
/默认: 包括内边距与边框/
background-clip: border-box;
/*只到内边距,不包括边框*//*background-clip: padding-box;*//*内容区*//*background-clip: content-box;*/
}
/背景色渐变/
/为了更好的演示效果, 将边框设置为实线样式/
.box {
border: 1px solid gray;
}
CSS代码如下：
.box {
background: linear-gradient(green, white);
｝
运行实例结果如下图：
CSS代码如下：
`.box {
background: linear-gradient(to right,green, white);
}
运行结果如下图：
CSS代码如下：
.box {
background: linear-gradient(to left,green, white);
｝
运行结果如下图：
CSS代码如下：
.box {
background: linear-gradient(to right bottom,green, white);
｝
运行结果如下图：
CSS代码如下：
.box {
background: linear-gradient(30deg,green, white);
｝
运行结果如下图：
CSS代码如下：
.box {
background-image: url(“../images/dog.jpg”);
background-repeat: no-repeat;
｝
CSS代码如下：
.box {
background-size: cover;
｝
运行结果如下图：
CSS代码如下：
.box {
background-size: contain;
｝
运行结果如下图：
CSS代码如下：
.box {
background-position: center center;
｝
运行结果如下图：
CSS代码如下：
.box {
background-position: left center;
｝
运行结果如下图：
CSS代码如下：
.box {
background-position: right bottom;
｝
运行结果如下图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
