* 默写盒模型的全部属性,并准确说出他们的应用场景 *
width: 宽度
height: 高度
background: 背景
padding: 内边距
border: 外框
margin: 外边距
box-sizing: 解决了什么问题, 不用它应该如何处理 *
box-sizing解决div盒子被撑爆影响其他盒子的问题。不用它需要不断调整盒子宽高及边距解决。
盒子外边距之的合并是怎么回事,并实例演示 *
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子外边距之的合并是怎么回事,并实例演示 *</title> <link rel="stylesheet" href="work1.css"> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1{
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 20px;
}
.box2{
width: 150px;
height: 150px;
background-color: cadetblue;
margin-top:50px;
}
/**两个平级盒子会发生叠加/也叫外边距的塌陷*/运行实例 »
点击 "运行实例" 按钮查看在线实例
嵌套盒子之间内边距与外边距的表现有何不同, 如何处理 *
嵌套盒子用padding来处理边距，而外边距则是margin。
实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="work3.css">
<title> 实例演示: 背景颜色的线性渐变的 </title>
</head>
<body>
<div class="box"></div>
</body>
</html>
.box {
width: 300px;
height: 300px;
background: linear-gradient(yellow,white);
}运行实例 »
点击 "运行实例" 按钮查看在线实例
背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="work4.css">
<title>背景图片的大小与位置的设定</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
.box {
width: 450px;
height: 500px;
}
.box {
background-color: lightgreen;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-position: center center;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
1.在css开始,记得写box-sizing属性,防止div撑爆变形.
2.padding是内,margin是外.
3.margin垂直合并取最大值.
4.padding,margin简写是上右下左顺时针顺序,如只有2,3个简写,则第二个是左右,第一个是上或上下.