search

博客列表 >盒模型与背景控制（第四章1031作业）-PHP培训九期线上班

盒模型与背景控制（第四章1031作业）-PHP培训九期线上班

yany
yany原创
2019年12月05日 17:08:02629浏览

1、默写盒模型的全部属性，并准确说出他们的应用场景

盒模型的属性：
宽度：width；用来设置盒子的宽度
高:height；用来设置盒子的高度
背景:background；用来设置盒子的背景
内边距：padding；让内容和边框中间有间隙
边框:border；用来突出盒子的大小，可以设置边框线的粗细或边框类型（如虚线边框或实线边框）
外边框:margin；存在多个盒子时，外边框用来间隔开盒子与盒子间的距离，如果只有一个盒子，外边距将没有意义。
盒子从内到外的布局为：盒子的宽和高撑起的内容框 《 padding盒子的内边距《 border盒子的边框《 margin盒子的外边框
宽、高、内边距和边框会影响盒子大小，外边距影响盒子与盒子之间的距离。

2、’box-sizing’:解决了什么问题，不用它应该如何处理

box-sizing解决了内边框和边框的大小影响盒子大小的问题，设置盒子的宽和高时先设置box-sizing:border-box;可以让盒子的大小自动适应最初设置的盒子宽和高；没有box-sizing,设置了盒子的宽和高（大小）后，如果后来又修改或添加盒子的（内）边框，为了让盒子整个大小不超过盒子设置的大小，需要不断地去调整盒子的大小。

3、盒子外边距的合并是怎么回事，并实例演示

盒子外边距的合并：当相邻的两个盒子在设置相邻面的外边距时，两个盒子的外边距会合并，最终相隔的距离，为设置较大外边框盒子设置的大小，彼此间的距离为合并的关系，非相加的关系。
实例演示：代码
html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>盒子外边距的合并</title>
  6.     <link rel="stylesheet" href="css1031/style1.css"
  7. </head>
  8. <body>
  9. <div class="box1"></div>
  10. <div class="box2"></div>
  12. </body>
  13. </html>

css:

  1. div{
  2.     box-sizing: border-box;
  3. }
  4. .box1{
  5.     width: 200px;
  6.     height:200px;
  7.     background-color: hotpink;
  8. }
  9. .box2{
  10.     width: 300px;
  11.     height:300px;
  12.     background-color: khaki;
  13. }
  14. .box1{margin-bottom: 20px;
  15. }
  16. .box2{margin-top: 30px;
  17. }

4、嵌套盒子之间内边距与外边距的表现有何不同，如何处理

嵌套盒子之间的外边距会由内向外传递，子盒子外边距会传递到父盒子,通过给父盒子添加内边距或边框来解决；
给子盒子添加外边距两个盒子的间隙不变，如果想要实现子盒子与父盒子之间存在间隙，通过给父盒子添加内边距来实现。

5、实例演示：背景颜色的线性渐变

代码：
html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>背景颜色的线性渐变</title>
  6.     <link rel="stylesheet" href="css1031/style2.css">
  7. </head>
  8. <body>
  9. <div class="box"></div>
  10. </body>
  11. </html>

css:

  1. .box{
  2.     box-sizing: border-box;
  3.     width: 300px;
  4.     height:350px;
  5.     border: 1px solid black;
  6. }
  7. .box{
  8.     background-color: hotpink;
  9. }
  10. .box{
  11.     background-clip: padding-box;
  12. }
  13. .box{
  14.     background:linear-gradient(hotpink,white);/*线性渐变：从红到白；方向默认：从上到下*/
  15.     background: linear-gradient(to right,blue, lightblue);
  16.     background: linear-gradient(to right bottom,blue,lightblue);/*从右下角渐变*/
  17.     background: linear-gradient(30deg,blue,lightblue);/*30度角渐变*/
  18.     background:linear-gradient(purple,lightblue,hotpink,white);/*连续渐变*/
  19. }

6、实例演示：背景图片的大小与位置的设定

代码：
HTML：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>背景图片的大小与位置的设定</title>
  6.     <link rel="stylesheet" href="css1031/style3.css">
  7. </head>
  8. <body>
  9. <div class="box"></div>
  11. </body>
  12. </html>

css:

  1. .box{
  2.     background-image: url("flower.jpg");
  3. }
  4. .box{width: 1000px;
  5.     height: 1000px;
  6.     border: 1px solid darkgray;
  7. }
  8. /*.box{
  9.     background-repeat: no-repeat;
  10. }
  11. .box{
  12.     background-position: center center;/*水平垂直居中*/
  13.     background-size: cover;
  14. }*/
  15. /*简写*/
  16. .box{
  17.     background: cyan url("flower.jpg") no-repeat center center;
  18. }
上一条：12月4日作业 php mvc 容器 门面类下一条：php中文网第10期PHP线上直播授课班，正在报名中！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多