默写盒模型的全部属性,并准确说出他们的应用场景
width：宽度 （设置盒子的宽度）
height：高度 （设置盒子的高度）
background：背景（设置盒子的背景，image：背景图片，position：位置，size：大小）
padding：内边距（设置盒子的内边距 top-right-bottom-left）
margin：外边距 （设置盒子的外边距 top-right-bottom-left）
border：边框 （设置盒子的边框）
box-sizing`: 解决了什么问题, 不用它应该如何处理
box-sizing=content+padding+border
box-sizing：解决了内边距与边框对盒子大小的影响
不使用box-sizing时，应用盒子的宽度（width）和高度（height）减去内边距（padding）及边框（border）
width = box.width - padding*2-border*2
height = box.height- padding*2-border*2
盒子外边距之的合并是怎么回事,并实例演示
外边距取最大的值，下面例子中box1的下外边距设置了20px，box2的上外边距设置了50px，最中合并取大值50px
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子外边距之的合并是怎么回事,并实例演示</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: lightseagreen;
margin-bottom: 20px;
}
.box2{
width: 150px;
height: 150px;
background-color: lightslategray;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
外边距是由内向外传递（当设置box2上外边距20px，box1会距离边界20px）
当前想让box2在box1里距上下10px，左右20px，那么在box1里设置内边距（padding：10px 20px）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套盒子之间内边距与外边距的表现有何不同, 如何处理</title>
<style>
.box1{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: lightseagreen;
padding:10px 20px;
}
.box2{
width: 150px;
height: 150px;
background-color: lightslategray;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示: 背景颜色的线性渐变的</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid black;
/* 颜色渐变 */
/*向下下*/
/*background: linear-gradient(lightslategray,white);*/
/*向右*/
/*background: linear-gradient(to right,lightslategray,white);*/
/*45度*/
background: linear-gradient(45deg,lightslategray,white);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示: 背景图片的大小与位置的设定</title>
<style>
.box{
box-sizing: border-box;
width: 500px;
height: 500px;
border: 1px solid black;
background-image: url("https://www.php.cn/static/images/user_avatar.jpg");
/*不重复*/
background-repeat: no-repeat;
/*大小，等比缩放*/
background-size: cover;
/*位置*/
background-position: 50% 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
很轻松的实现盒子的位置，距离，设置背景图片，位置，大小等
笔记
