[北京|结业弟子]JS-张新|2018年09月04日的日报-技能树.IT修真院

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

1 674

今天完成的事情：

深度思考

一.外边距重叠

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con1{
width:100px;
height:100px;
border: 1px solid gray;
margin-bottom: 20px;
}
.con2{
width:100px;
height:100px;
border: 1px solid gray;
margin-top: 5px;
}
</style>
</head>
<div class="con1"></div>
<div class="con2"></div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con1{
width:100px;
height:100px;
border: 1px solid gray;
margin-bottom: -20px;
}
.con2{
width:100px;
height:100px;
border: 1px solid gray;
margin-top: -5px;
}
</style>
</head>
<div class="con1"></div>
<div class="con2"></div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con1{
width:100px;
height:100px;
border: 1px solid gray;
margin-bottom: -20px;
}
.con2{
width:100px;
height:100px;
border: 1px solid gray;
margin-top: 50px;
}
</style>
</head>
<div class="con1"></div>
<div class="con2"></div>
</body>
</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%;
}