CSS如何解决子元素越界

来源：互联网发布：网络销售许可证编辑：程序博客网时间：2024/06/05 16:13

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>

0 0