通过学习盒模型,了解到盒模型对于布局来说是非常重要的。而背景的控制可以进一步美化布局,让整个网页多姿多彩。下面就盒模型与背景控制做一下总结。
1.默写盒模型的全部属性,并准确说出他们的应用场景
width:内容的宽度,height: 内容的高度,padding:内边距,边框到内容的距离,border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离
2. `box-sizing`: 解决了什么问题, 不用它应该如何处理
`box-sizing`: 解决了内边距与边框对盒子大小的影响问题。不用它应该要把内边距加边框加内容才是盒子的大小。
3.盒子外边距之的合并是怎么回事,并实例演示
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距对盒子位置的影响</title> <style> .box1{ width: 150px; height: 150px; background-color: lawngreen; margin-bottom: 20px; } .box2{ width: 200px; height: 200px; background-color: lightcoral; margin-bottom: 50px; } </style> </head> <body> <!--同级关系: 外边距合并--> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距对盒子位置的影响</title> <style> .box1{ width: 300px; height: 300px; background-color: lawngreen; padding-top: 50px; } .box2{ width: 200px; height: 200px; background-color: lightcoral; /*塌陷现象,解决方法:在父级用padding-top*/ /*margin-top: 50px;*/ } </style> </head> <body> <!--嵌套关系: --> <!--1. 外边距由内向外传递--> <div class="box1"> <div class="box2"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5.实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style> .box{ width: 400px; height: 500px; border: 1px solid gray; /*向右下方渐变,从红到白*/ background: linear-gradient(to right bottom,red,white); } </style> </head> <body> <div class="box"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 这例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style> .box{ width: 400px; height: 500px; border: 1px solid gray; /*设置背景图片*/ background-image: url("../images/girl.jpg"); /*设置背景不重复*/ background-repeat: no-repeat; /*设置背景图片的位置*/ background-position: left center; /*设置背景图片的大小*/ background-size: cover; } </style> </head> <body> <div class="box"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码和总结中涉及知识点注释总结:
1.盒模型的基本特征
2.内边距与边框对盒子大小的影响
3.外边距对盒子位置的影响
4.背景控制的知识