css盒子模型的一些问题及解决方法

最新推荐文章于 2022-02-08 16:30:59 发布

不豫

最新推荐文章于 2022-02-08 16:30:59 发布

阅读量852

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44912697/article/details/100784501

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

margin-top塌陷

1.设置边框
2.overflow：hidden;
3.使用伪元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*方法三：.clearfix:before{
			content: "";
			display: table;
		}*/
		.con{
			width: 300px;
			height: 300px;
			background-color: gold;

			/* 方法一：border: 1px solid #000;*/
			/*方法二: overflow: hidden;*//*注：此方法会把想要的溢出效果改没 */

		}

		.box{
			width: 100px;
			height: 100px;
			background-color: black;
			margin-top: 100px;
		}
		
	</style>
</head>
<body>
margin-top塌陷
1.设置边框
2.overflow：hidden;
3.使用伪元素
<div class="con clearfix">
	<div class="box"></div>
</div>
	
</body>
</html>

元素溢出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 100px;
			border: 1px solid #000;
			margin: 50px auto;
			background-color: gold;
			overflow: hidden;
			/*把多余的去除 visible可见  scroll 显示滚动条 auto自动调节*/
		}
	</style>
</head>
<body>
<div class="box">
撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大
</div>
	
</body>
</html>

垂直合并实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			border:1px solid;
			margin: 100px auto;
		}
		/*.box .l1,.l2,.l3,.l4{
			margin-top:20px;
			margin-right: 20px;
			margin-left: 20px;
		}
		.box .l4{
			margin-bottom: 20px;
		}*/
		.box .l1,.l2,.l3,.l4{
			margin: 20px;
		}

	</style>
</head>
<body>
<div class="box">
	<div class="l1">撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大</div>
	<div class="l2">撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大</div>
	<div class="l3">撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大</div>
	<div class="l4">撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大</div>
</div>	
</body>
</html>