* 默写盒模型的全部属性,并准确说出他们的应用场景
width 宽度，给盒模型元素设置宽度
height 高度 给盒模型元素设置高度
padding 内边距 给盒模型元素内部添加边距
margin 外边距 给盒模型元素外部添加边距
border 边框 给盒模型元素添加边框
* `box-sizing`: 解决了什么问题, 不用它应该如何处理
解决了盒模型元素的固定宽高，不会把盒模型元素撑大，不用它应该手动缩减盒模型元素内部子元素的大小
* 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
盒子之间的内边距是只在自己内部生效，盒子之间的外边距会反映到祖先元素的上面。如果子元素要调整外边距应该用父元素调整内边距
* 盒子外边距之的合并是怎么回事,并实例演示
盒子外边距如有重叠，只会已最大的值为准
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子外边距之的合并是怎么回事,并实例演示</title>
</head>
<style>
.div1{
width: 200px;
height:200px;
background-color: #999999;
margin-bottom: 20px;
}
.div2{
width: 200px;
height:200px;
background-color: blue;
margin-top: 20px;
}
</style>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示: 背景颜色的线性渐变的</title>
</head>
<style>
div{
width:200px;
height: 300px;
background: linear-gradient(#333333,#999999);
}
</style>
<body>
<div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
这例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片的大小与位置的设定</title>
</head>
<style>
.div1{
width: 60px;
height: 40px;
border: #333333 solid 1px;
background: url("https://www.php.cn/static/images/logos.png") no-repeat 1px -18px;
}
.div2{
width: 500px;
height: 300px;
background: url("https://www.php.cn/static/images/logos.png");
background-size: 500px 300px;
}
</style>
<body>
<div class="div1">
</div>
<div class="div2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
