1: 默写盒模型的全部属性,并准确说出他们的应用场景
content(width,height)内容
border边框
margin外边距
padding内边距
background背景
2:`box-sizing`: 解决了什么问题, 不用它应该如何处理
box-sizing可以清除内边距和边框对于盒子大小的影响。如果不用可以使用总宽度=内边距+内容+边框为盒子宽度
3:盒子外边距之的合并是怎么回事,并实例演示
盒子外边距合并是,当一个盒子的下边距和同级盒子的上边距都有值得时候,将会取值比较大的准。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子外边距之的合并是怎么回事,并实例演示 </title> <style> .box1{ width: 200px; height: 200px; background-color: lawngreen; } .box2{ width: 150px; height: 150px; background-color: lightsalmon; } .box1{ margin-bottom: 30px; } .box2{ margin-top: 50px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4: 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
嵌套盒子之间盒子边距处理。给子盒子添加外边距时,外边距将直接叠加在父盒子上。如果要给子盒子设置外边距。则可使用父盒子的内边距来实现。
5: 实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例演示: 背景颜色的线性渐变的</title> <style> .box1{ width: 400px; height: 300px; background:linear-gradient(green,yellow,white); } </style> </head> <body> <div class="box1"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6:实例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这例演示: 背景图片的大小与位置的设定</title> <style> .box1{ width: 600px; height: 600px; /*默认重复平铺*/ /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg");*/ /*不平铺*/ background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") no-repeat; /*横向平铺*/ /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") repeat-x;*/ /*纵向平铺*/ /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") repeat-y;*/ /*纵向平铺*/ /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") 50% 50%;*/ /*水平垂直居中*/ /*background-position: 50% 50%;*/ /*等比例缩放*/ /*background-size: cover;*/ /*完全填充,有可能显示不全,*/ /*background-size: contain;*/ background-color: lavender; } </style> </head> <body> <div class="box1"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例