CSS3技术难点总结

最新推荐文章于 2022-08-07 12:01:00 发布

weixin_34279184

最新推荐文章于 2022-08-07 12:01:00 发布

阅读量418

点赞数

文章标签： python xhtml javascript ViewUI

原文链接：https://my.oschina.net/AaronDMC/blog/790383

版权

2019独角兽企业重金招聘Python工程师标准>>>

一：DIV元素加 margin 会把父元素的 margin 也撑高

这个现象叫做外边距合并（Collapsing Margins）或 CSS样式margin叠加的问题。
如果相邻两个元素都有margin，那么间距会取两者较大的作为间距距离；
同理，对于包含的两个元素也一样，特殊的是如果包含的两个元素，父元素没有margin，而子元素有margin，并且父元素没有border和padding的话，那么子元素的margin会溢出到父元素外，要解决这个问题有很多方法，如设置1px的padding，或者设置透明的border等方法来防止margin溢出。

如图：

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>ActiveX登陆实例</title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<style type="text/css">
			*{margin:0px;padding:0px;}
			body{font-size:12px;font-family:"微软雅黑";color:#ddd;background:#eee;height:100%;}

            /* 
                header 元素和h-box 元素为父子节点;
                如果单纯按照以下的代码编写就会出现上图出现的margin会将父元素撑起来;
                达不到我们预想的的效果。
            */
			.header{width:100%;height:98px;background:#111;}
			.header .h-box{width:1500px;height:100px;margin:10px auto;}


			.header .h-box .b-left{float:left;}
			.header .h-box .b-right{float:right;font-size:24px;line-height:80px;}

			.footer{width:100%;height:50px;background:#111;}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="h-box">
				<div class="b-left">
					<a href="http://www.huaxiafinance.com/" _target="_blank"><img src="images/logo.png" title="华夏信财股权投资管理有限公司" /></a>
				</div>
				<div class="b-right">Active-X登陆实例</div>
			</div>
		</div>

		<div class="content"></div>

		<div class="footer">
			<div class="f-box"></div>
		</div>

	</body>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(window).bind("load", function() {
			var footerHeight = 0;
			var footerTop = 0;
			 
			positionFooter();
			 
			function positionFooter() {
				footerHeight = $(".footer").height();
				footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
				//如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
				if(($(document.body).height()+footerHeight) < $(window).height()) {
					$(".footer").css({ position: "absolute",left:"0" }).stop().css({top:footerTop});
				}
			}
			$(window).scroll(positionFooter).resize(positionFooter);
		});
	</script>

</html>

解决方案一：

给父节点添加一个border ( border:1px solid #fff; )，边框色和背景色保持一致，这样就能解决。但是此方案存在一个瑕疵：就是当父元素的 width 为 100% 时就会出现左右滚动的滚动条，造成页面布局发生改变。

解决方案二：

给父节点添加一个 padding ( padding:1px 0px; )，这样也能解决问题。此时就要适当修改一下父子节点的宽度和高度。

转载于:https://my.oschina.net/AaronDMC/blog/790383