CSS如何解决子元素越界

最新推荐文章于 2022-07-12 04:23:46 发布

yuanmei1986

最新推荐文章于 2022-07-12 04:23:46 发布

阅读量4.5k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/yuanmei1986/article/details/50710087

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

yuanmei1986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS如何解决子元素越界

1.补充：CSS中盒子模型的计算方式 .box {box-sizing: content-box / border-box; }content-box：一个盒子的总宽=margin+border+padding+width，即width只是指盒子中内容的宽度border-box: 一个盒子的总宽=margin+width,即width是内容、padding、border的
复制链接

扫一扫

专栏目录