* 默写盒模型的全部属性,并准确说出他们的应用场景
padding内边距 在盒子内容和边框之间的距离
border边框 盒子的边框距离
margin外边框 盒子到附近内容的距离
* `box-sizing`: 解决了什么问题, 不用它应该如何处理
解决盒子内添加边框和内边距时改变盒子宽高的问题
在盒子宽高值内 减去 两边的边框和内边距的值和
* 盒子外边距之的合并是怎么回事,并实例演示
同级两个盒子在外边距冲突时 会取其中两个盒子最大值使用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距值的合并</title> <!-- <link rel="stylesheet" href="css/style1.css">--> <style> .box1 { width: 200px; height: 200px; background-color: cadetblue; margin-bottom: 30px; } .box2 { width: 300px; height: 300px; background-color: chocolate; margin-top: 60px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
* 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
子盒子添加外边距时会传递给父盒子 使父盒子的外边距产生变化 子盒子无变化
需要子盒子添加外边距时 可以给父盒子添加内边距实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距值的合并</title>
<!-- <link rel="stylesheet" href="css/style1.css">-->
<style>
.box3 {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: chocolate;
padding-top: 80px;
padding-left: 80px;
}
.box4 {
width: 50px;
height: 50px;
background-color: brown;
}
</style>
</head>
<body>
<!--<div class="box1"></div>-->
<!--<div class="box2"></div>-->
<!--<hr>-->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色线性渐变</title>
<!-- <link rel="stylesheet" href="css/style2.css">-->
<style>
.box {
box-sizing: border-box;
width: 300px;
height: 300px;
/*background-color: beige;*/
/*默认渐变从上到下*/
/*background: linear-gradient(lightseagreen, lightpink);*/
/*到上方向渐变*/
/*background: linear-gradient(to top,lightgreen, lightseagreen);*/
/*角度渐变*/
background: linear-gradient(30deg, lightpink, lightgreen);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
*实例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片大小位置</title>
<!-- <link rel="stylesheet" href="css/style3.css">-->
<style>
.box {
box-sizing: border-box;
width: 500px;
height: 500px;
border: 10px solid brown;
background-image: url("https://img.php.cn/upload/image/341/292/475/1572601696368223.jpg");
/*图片不可重复*/
background-repeat: no-repeat;
/*图片完全填充background-size: contain;*/
background-size: contain;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
