CSS3技術難點總結

時間 2019-11-06

標籤 css3 css 技術難點總結欄目 CSS 简体版

原文原文鏈接

一：DIV元素加 margin 會把父元素的 margin 也撐高javascript

這個現象叫作外邊距合併（Collapsing Margins）或 CSS樣式margin疊加的問題。
若是相鄰兩個元素都有margin，那麼間距會取二者較大的做爲間距距離；
同理，對於包含的兩個元素也同樣，特殊的是若是包含的兩個元素，父元素沒有margin，而子元素有margin，而且父元素沒有border和padding的話，那麼子元素的margin會溢出到父元素外，要解決這個問題有不少方法，如設置1px的padding，或者設置透明的border等方法來防止margin溢出。css

如圖：html

代碼以下：java

<!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>

解決方案一：jquery

給父節點添加一個border ( border:1px solid #fff; )，邊框色和背景色保持一致，這樣就能解決。可是此方案存在一個瑕疵：就是當父元素的 width 爲 100% 時就會出現左右滾動的滾動條，形成頁面佈局發生改變。佈局

解決方案二：code

給父節點添加一個 padding ( padding:1px 0px; )，這樣也能解決問題。此時就要適當修改一下父子節點的寬度和高度。xml