发表于: 2018-09-04 21:48:09

1 675


今天完成的事情:

深度思考

一.外边距重叠

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。


折叠结果遵循下列计算规则:


1.两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为正数时,它们会自动合成一个单独的外边距,取它们中间比较大的,此时的margin值为20,只要第二div的margin-top小于20,margin值就为20。


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .con1{
  8. width:100px;
  9. height:100px;
  10. border: 1px solid gray;
  11. margin-bottom: 20px;
  12. }
  13. .con2{
  14. width:100px;
  15. height:100px;
  16. border: 1px solid gray;
  17. margin-top: 5px;
  18. }
  19. </style>
  20. </head>
  21. <div class="con1"></div>
  22. <div class="con2"></div>
  23. </body>
  24. </html>




2.两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为负数时,它们会自动合成一个单独的外边距,取它们中间绝对值比较大的,此时的margin值为-20,只要第二div的margin-top绝对值小于20,margin值就为-20。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .con1{
  8. width:100px;
  9. height:100px;
  10. border: 1px solid gray;
  11. margin-bottom: -20px;
  12. }
  13. .con2{
  14. width:100px;
  15. height:100px;
  16. border: 1px solid gray;
  17. margin-top: -5px;
  18. }
  19. </style>
  20. </head>
  21. <div class="con1"></div>
  22. <div class="con2"></div>
  23. </body>
  24. </html>




3.两个外边距一正一负时,折叠结果是两者的相加的和。也就是说当第一个div的margin-bottom与第二个div的margin-top为一正数一负数时,它们会自动合成一个单独的外边距,取它们两者的相加的和,此时的margin值为30。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .con1{
  8. width:100px;
  9. height:100px;
  10. border: 1px solid gray;
  11. margin-bottom: -20px;
  12. }
  13. .con2{
  14. width:100px;
  15. height:100px;
  16. border: 1px solid gray;
  17. margin-top: 50px;
  18. }
  19. </style>
  20. </head>
  21. <div class="con1"></div>
  22. <div class="con2"></div>
  23. </body>
  24. </html>

二.div+css的布局较table布局有什么优点?

a>       div+css布局的好处:

1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。

2.布局精准,网站版面布局修改简单。

3.加快了页面的加载速度(最重要的)。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签,提高另外搜索引擎对网页的搜索效率。

b>    table布局的好处(table布局也不是一点用的没有,这点是毋庸置疑的)

1.容易上手。

2.可以形成复杂的变化,简单快速。

3.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。

三.完成了任务8/9等待任务审核后写总结.

四.任务10完成了一部分

<body>
<header>
<span>客服热线: 010-594-78634</span>
<div class="head">
<a href="#">登录</a
><a href="#">注册</a>
</div>
</header>
<main>
<div class="box1">
<div>
<button>首页</button>
<button>在线定制</button>
<button>标准箱</button>
<button>品质保障</button>
</div>
</div>
<div class="container">
<div class="row">
<div class="box2">
<div class="box3">
<div class="step1">
<img src="step1.jpg" alt="">
<p>1.定制纸箱</p>
</div>
<div class="step2">
<img src="step2.jpg" alt="">
<p>2.选择数量</p>
</div>
<div class="step3">
<img src="step3.jpg" alt="">
<p>3.上传附件</p>
</div>
<div class="step4">
<img src="step4.jpg" alt="">
<p>4.确认下单</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="box4">
<img src="line.jpg" alt="">
<span>请您按照以下步骤来定制您的纸箱</span>
</div>
</div>
</main>

</body>

body{
margin:0;
}
header{
background-color:blue;
display:flex;
justify-content: space-between;
align-items: center;
color:white;
height:4vw;
}
.head>a{
color:white;
text-decoration: none;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:10px;
}
header span{
margin-left:5%;
}
.head{
margin-right:5%;
}
.head>a:hover{
background:#fff;
color:black;
}
.box1{
background:#f9f9f9;
height:6vw;
display:flex;
align-items: center;
}
.box1>div{
position: absolute;
right:5%;
}
.box1>div>button{
padding:10px;
background:white;
box-shadow:1px 1px 1px #e6e6e6;
border:1px solid transparent;
border-radius: 4px;
}
.box1>div>button:hover{
background-color:blue;
color:white;
}
.step1>p{
text-align: center;
}
.step2>p{
text-align: center;
}
.step3>p{
text-align: center;
}
.step4>p{
text-align: center;
}
.box3{
display:flex;
justify-content: center;
align-items: center;
}
.step1>img{
margin-top:2px;
}
.step2{
}
.step3>img{
margin-top:-2px;
}
.step4>img{
margin-top:2px;
}
.step1{
margin-top:30px;
}
.step2{
margin-top:30px;
}
.step3{
margin-top:30px;
}
.step4{
margin-top:30px;
}
.box4{
display:flex;
margin-top:30px;
margin-left:5%;
}


明天计划的事情:

1.完成任务10

2.(JS前期准备)查看W3C中的JS语法,重点理解变量,函数,对象,作用域,数组,IF ELSE,For 循环的含义遇到的问题
收获:整个任务8/9耽误很长时间,主要是对栅格布局理解的不够透彻,还有插入幻灯片出现了比较多的问题,弄懂之后感觉收获很多。


返回列表 返回列表
评论

    分享到