* 默写盒模型的全部属性,并准确说出他们的应用场景 *
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个简写,则第二个是左右,第一个是上或上下.