1.补充:CSS中盒子模型的计算方式
.box {
box-sizing: content-box / border-box;
}
content-box:一个盒子的总宽=margin+border+padding+width,即width只是指盒子中内容的宽度
border-box: 一个盒子的总宽=margin+width,即width是内容、padding、border的宽度和
2.补充:如何解决子元素的margin-top/bottom的越界问题
如下图:父容器parent2中第一个子元素child2,若想通过设置margin-top属性来实现在父容器中往下移动20px的效果是不可行的。
反而会让父元素div跟着child2一起向下移动20px。如何解决这类问题呢?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="2015/11/26cription" content="">
<style>
* {
box-sizing: border-box;
}
.parent1, .parent2 {
width: 600px;
height: 200px;
}
.parent1 {
background: #aaf;
}
.parent2 {
background: #afa;
/*border-top: 1px solid #000;*/
/*margin-top: 0;*/
/*padding-top:0px;*/
/*overflow: hidden;*/
}
.child2 {
width: 100px;
height: 50px;
background: #faf;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent1">
</div>
<div class="parent2">
<div class="child2">child2为父容器div的第一个子元素</div>
</div>
</body>
</html>
解决方法:
(1)给父元素加border——有副作用: 一般父元素Div用来做布局使用,添加border会使用内容的height和width变大
(2)给父元素加padding-top:1px——有副作用
(3)给父元素加overflow:hidden——有副作用:一旦子元素内容溢出,将会无法显示溢出的内容
(4)为父元素添加内容生成:该方法无任何副作用
.parent:before {
content: ‘ ’;
display: table;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="2015/11/26cription" content="">
<style>
* {
box-sizing: border-box;
}
.parent1, .parent2 {
width: 600px;
height: 200px;
}
.parent1 {
background: #aaf;
}
.parent2 {
background: #afa;
/*border-top: 1px solid #000;*/
/*margin-top: 0;*/
/*padding-top:0px;*/
/*overflow: hidden;*/
}
.parent2:before {
content: ' ';
display: table;
}
.child2 {
width: 100px;
height: 50px;
background: #faf;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent1">
</div>
<div class="parent2">
<div class="child2">child2为父容器div的第一个子元素</div>
</div>
</body>
</html>
3.补充:子元素全部浮动后父元素高度为0
解决方法:
(1)给父元素加overflow:hidden——有副作用
(2)为父元素添加后置内容生成
.parent:after {
content: ‘ ’;
display: table;
clear: both;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="2015/11/26cription" content="">
<style>
* {
box-sizing: border-box;
}
.parent1 {
width: 600px;
background: #aaf;
/*overflow: hidden;*/
}
.parent1:after {
content: ' ';
display: table;
clear: both;
}
.child1, .child2, .child3 {
width: 150px;
border: 1px solid #000;
float: left;
}
</style>
</head>
<body>
<div class="parent1">
<div class="child1">1111</div>
<div class="child2">2222</div>
<div class="child3">3333</div>
<!--<div style="clear:both;"></div>-->
</div>
<hr>
</body>
</html>