css2.1--笔记6（margin叠加、清除浮动）

最新推荐文章于 2024-07-17 10:09:06 发布

ABU_MOlI_ITUI

最新推荐文章于 2024-07-17 10:09:06 发布

阅读量191

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/108124303

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

解决margin叠加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#up,#down{
				width:200px;
				height: 200px;
				background: #FFC0CB;
				margin: 50px;
			}
			#wrop{
				width:100px;
				 height: 100px;
				 background: #6495ED;
				 margin:50px;  
				 overflow: hidden;
				 /*<!--border: 1px solid;-->*/
			}
			#inner{
				width:50px;
				 height: 50px;
				  background: paleturquoise;
				   margin:50px;
			}
		</style>
	</head>
	<body>
		<div id="up">up</div>
		<!--<div style="height: 1px"></div>
		<span></span>
		<br />-->
		<!--当然也可用加边框border或者overflow：hidden用来去除margin叠加-->
		<!--border: 1px solid;-->
		
		<div id="wrop" >
			<div id="inner"></div>
		</div>
		<div id="down">down</div>
	</body>
</html>

清除浮动

扩展小知识：

如何将一个文件夹下的html文件，转移到另一个文件夹下。

方法一：ctrl+c复制，ctrl+v粘贴

方法二：

扩展：

haslayout：

layout是Windows IE的一个私有概念，他决定了元素如何对其内容定位和尺寸计算，以及与其他元素的关系和相互作用。当一个元素“拥有布局”时，它会负责本身及其元素的尺寸和定位。而如果一个元素，“没有拥有布局”，那么他的尺寸和位置由最近的拥有布局的祖先元素控制。

必须说明的是，IE8及以上浏览器使用了全新的显示引擎，已经不在使用haslayout属性

因此haslayout属性只针对IE6\IE7

haslayout为什么会出现？

理论上，每个元素都应该控制自己的尺寸和定位，即每个元素都应该“拥有布局”，当然这只是理想状态。而对于早期的IE显示引擎来说，如果所有元素都“拥有布局”的话，会导致很大的性能问题。因此IE开发团队决定使用布局概念来减少浏览器的性能开销，即只将布局应用于实际需要的那些元素，所以出现了“拥有布局”，和“没有拥有布局”俩种情况

默认拥有布局元素

html、body、table、tr、td、img、hr、input、select、textarea、button、iframe、embed、object、applet、marquee

怎么触发haslayout

float：left或right

display：inline-block

position：absolute

width：除auto外任何值

height：除auto外任何值

zoom：除normal外任何值

writing-mode：tb-rl

在IE7中，以下属性也可以触发元素的haslayout

min-height：任意值

min-width：任意值

max-height：除none外任意值

max-width：除none外任意值

overflow：除visible外任意值，仅用于块级元素

overflow-x：除visible外任意值，仅用于块级元素

overflow-y：除visible外任意值，仅用于块级元素

position：fixed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--清除浮动
			让浮动的子元素库撑开父级的高度
			01.直接给父元素加高度---缺点：扩展性不好
			02.通过开启BFC-----缺点：IE6、7及以下，没有BFC的，他只有haslayout这里的解决办法，使他拥有布局
			                        也就是说：overflow：hidden。之外，还要写zoom：1，缩放1
				浮动盒子的特点，定位盒子的特点：宽高都是由内容撑开的
			03.br标签清浮动----缺点：兼容性不高，ie6不支持，违反了结构，行为，样式相分离的原则
			04.空标签清除浮动----缺点：违反了结构，行为，样式相分离的原则，在IE6下有最小高度问题19px，解决：height：0，font-size：0，但是还是会有2px空隙
			05伪元素清除浮动---缺点：ie 6、7不支持伪元素，解决办法：开启haslayout：zoom=1
		-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				border: 1px solid;
				/*想要撑开父级元素的高度，清除浮动，可以直接给父元素添加高度*/
				/*overflow: hidden;*/
				/*height: 300px;*/
				/*position: absolute;*/
				/*float: left;*/
			}
			#inner{
				float: left;
				width: 200px;
				height: 200px;
				background: pink;
			}
			.ss{
				*zoom: 1;
			}
			.ss:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="wrap" class="ss">
			<div id="inner"></div>
		<!--<br clear="all" />-->
		<!--<div style="clear: both;"></div>-->
		</div>
		
	</body>
</html>

ABU_MOlI_ITUI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css2.1--笔记6（margin叠加、清除浮动）

解决margin叠加<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #up,#down{ width:200px; height: 200px; backg
复制链接

扫一扫