CSS3盒模型与背景控制-第九期线上作业4（补10.31作业）

默写盒模型的全部属性,并准确说出他们的应用场景
margin属性：适用于两个同级盒子模型之间的间距，在嵌套盒子时使用auto属性可用让子盒子居中；
padding属性：适用于盒子内border与内容content之间间距，以及在嵌套盒子时父盒子作为子盒子的外间距使用；
border属性：是盒子的边框，用来设置盒子边框的颜色、粗细、样式等。
box-sizing: 解决了什么问题, 不用它应该如何处理
box-sizing解决了盒子因内边距、线框撑开时改变了盒子的大小，如果不用box-sizing时，我们在给盒子添加内边距和线框时需要把内边距padding和线框border分上下、左右计算到盒子的长宽中，来设置盒子中内容content的长宽。
盒子外边距之的合并是怎么回事,并实例演示
盒子的外边距合并指的是两个同级盒子的外边距，会只显示外边距值大的盒子的值，而不是两个盒子值的和，

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {margin: 20px;padding:20px;border:1px green solid;background-color: yellow;width: 50px;height: 55px;}
        .box2 {margin:30px;border: 2px red solid;background-color: #1E9FFF;width: 40px;height: 35px;}
    </style>

</head>
<body>
<div class="box1"></div>
<div class="box2"></div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
嵌套盒子之间，盒子的内边距不受影响，但是子盒子的外边距会传递给父盒子，如果想要给子盒子添加外边距，可以在父盒子中设置内边距padding来达到效果，同时子盒子外边距设置auto属性，可以达到在父盒子中居中的目的。
实例演示: 背景颜色的线性渐变的

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {margin: 20px;
            border:1px green solid;
            width: 500px;
            height: 550px;
            background: linear-gradient(to right,yellow,blue);}
    </style>

</head>
<body>
<div class="box1"></div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

这例演示: 背景图片的大小与位置的设定

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {margin: 20px;
            border:1px green solid;
            width: 500px;
            height: 550px;
            background: url("https://img.php.cn/upload/course/000/000/001/5d9f0b79ad447136.jpg") no-repeat center;}
    </style>

</head>
<body>
<div class="box1"></div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

实例

相关文章