Correction status:qualified
Teacher's comments:完成的相当出色, 手写部分也合格, 继续努力
一、默写盒模型的全部属性,并准确说出他们的应用场景
1、width:设置盒子的宽度
2、height:设置盒子的高度
3、border:设置盒子的边框属性,包括是否显示边框,边框线的种类、颜色
4、background:背景
5、padding:内边距,设置盒子边框与内容之间的距离
6、margin:外边距,设置盒子边框与外部元素之间的距离
二、 `box-sizing`: 解决了什么问题, 不用它应该如何处理
1、没有设置box-sizing:border-box,width/height=content
2、设置了box-sizing:border-box,width/height=content+padding+border
三、盒子外边距之的合并是怎么回事,并实例演示
同级盒子之间,同时添加外边距,并未出现想象中的边距叠加,而是出现了外边距的合并, 这种现象, 也叫外边距的塌陷
二个盒子之间的间距, 最终由以较大值确定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距的塌陷</title> </head> <style> div { box-sizing: border-box; } .box1 { width: 100px; height: 100px; background-color: lightblue; margin-bottom: 20px; } .box2{ width: 150px; height: 150px; background-color: lightpink; margin-top: 30px; } </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
四、 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
1、当父盒子不设置边框时,设置子盒子的margin上边距,会发生子盒子上边距传递到父盒子上
2、解决方法:给父盒子设置padding内边距,或者给父盒子设置边框
五、实例演示: 背景颜色的线性渐变的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景颜色的线性渐变的</title> <style> .box { border: 1px solid gray; width: 450px; height: 500px; box-sizing: border-box; } .box { /*从蓝到白, 默认从上到下方向渐变*/ background: linear-gradient(green, white); /*!*向右渐变*!*/ /*background: linear-gradient(to right,green, white);*/ /*!*向左渐变*!*/ /*background: linear-gradient(to left,green, white);*/ /*!*向上渐变*!*/ /*background: linear-gradient(to top,green, white);*/ /*!*向右下方渐变*!*/ /*background: linear-gradient(to right bottom,green, white);*/ /*!*角度渐变*!*/ /*background: linear-gradient(30deg,green, white);*/ /*!*可连续设置多种颜色的渐变效果, 很少用到*!*/ /*background: linear-gradient(red, green, blue, white);*/ } </style> </head> <body> <div class="box"></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
六、例演示: 背景图片的大小与位置的设定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box { border: 1px solid gray; width: 450px; height: 500px; box-sizing: border-box; } .box { /*设置背景图片*/ background-image: url("../images/dog.jpg"); /*设置背景重复: repeat, no-repeat, repeat-x, repeat-y*/ background-repeat: no-repeat; /*设置背景图片的位置: 水平, 垂直*/ /*支持关键字设置*/ /*background-position: center center;*/ /*background-position: left center;*/ /*background-position: right bottom;*/ /*支持数值或百分比*/ /*background-position: 75px 75px; !* 水平垂直居中 *!*/ background-position: 50% 50%; /*设置背景图片的大小*/ /*图片拉伸等比例填充,完全覆盖盒子,比例不同可能会有部分图片内容被隐藏*/ background-size: cover; /*图片完全填充, 比例不同,盒子可能会出现空白区域*/ /*background-size: contain;*/ } </style> </head> <body> <div class="box"></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
七、总结
学习了CSS的盒子模型,内外边距的控制,同级盒子外边距的塌陷,子盒子margin上边距的传递,渐变颜色和背景的控制。