网站域名301是什么意思,在一呼百应上做网站行吗,wordpress默认注册框,接项目做的网站塌陷问题 当两个盒子在垂直方向上设置margin值时#xff0c;会出现一个有趣的塌陷现象。
①垂直并列 首先设置两个DIV,并为其制定宽高
1 1 /*HTML部分*/2 body3 div classbox1box1/div4 div classbox2box2…塌陷问题 当两个盒子在垂直方向上设置margin值时会出现一个有趣的塌陷现象。
①垂直并列 首先设置两个DIV,并为其制定宽高
1 1 /*HTML部分*/2 body3 div classbox1box1/div4 div classbox2box2/div5 /body6 /*CSS部分*/7 style 8 *{9 margin: 0;
10 padding: 0;
11 }
12 .box1{
13 width: 200px;
14 height: 200px;
15 background: yellowgreen;
16 }
17 .box2{
18 width: 200px;
19 height: 200px; background: gray;
20 }
21 /style 对box1我们为其设置margin-bottom50px; 对box2我们为其设置margin-top 40px; 1 style2 *{3 margin:0;4 padding:0;5 }6 .box1{7 width:200px;8 height:200px;9 background: yellowgreen;
10 margin-bottom: 50px;
11 }
12 .box2{
13 width:200px;
14 height:200px;
15 background: gray;
16 margin-top: 40px;
17 }
18 /style 我们肯定会很理所当然的认定这两个盒子之间的距离为90px事实上并非如此. 如下图所示 两盒子之间的距离仅是50px也就是说两盒子之间的margin出现了重叠部分故而我们可以得出垂直之间塌陷的原则是以两盒子最大的外边距为准。 ②嵌套关系(父级元素塌陷)
2 1 /*CSS部分*/2 style3 .box1{4 width:400px;5 height:400px;6 background: pink;7 }8 .box2{9 width:200px;
10 height:200px;
11 background: lightblue;
12 }
13 /style
14 /*HTML部分*/
15 body
16 divclassbox1
17 divclassbox2/div
18 /div
19 /body 如图示 当为子盒子添加margin-top10px;时会发生如下情况 子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙即父级盒子往下塌陷了10px。
解决方法
1为父盒子设置border为外层添加border后父子盒子就不是真正意义上的贴合 可以设置成透明border1px solid transparent。
2为父盒子添加overflowhidden
3为父盒子设定padding值
4为父盒子添加positionfixed
5为父盒子添加 displaytable
6利用伪元素给子元素的前面添加一个空元素
.son:before{ content:;overflow:hidden; }
