盒模型佈局

時間 2019-11-12

標籤模型佈局简体版

原文原文鏈接

盒模型佈局

一、盒模型佈局基本介紹

佈局方位：margin-left、margin-right、margin-top、margin-bottomcss
影響自身佈局：margin-left、margin-tophtml
影響兄弟佈局：margin-right、margin-bottom佈局
正向 / 反向：正值 / 負值spa

二、margin佈局坑位

不少語義標籤具備默認marginhtm
父子標籤margin-top重疊取大者blog
兄弟標籤margin-bottom、margin-top重疊取大者it

=====================================================================================================================================io

筆記:class

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>盒模型佈局</title>
	<style>
		/*作頁面必備reset操做*/
		html, body {
			margin: 0
		}
		.box, .wrap {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.wrap {
			background: orange;
		}
		/*影響自身佈局*/
		/*.box {
			margin-top: 30px;
			margin-left: 100px;
		}*/
		/*影響兄弟佈局*/
		/*margin-bottom影響上下兄弟,儘可能別對margin-right進行設置*/
		/*margin-right影響左右兄弟,儘可能別對margin-bottom進行設置*/
		.box {
			/*margin-bottom: 30px;*/
			margin-right: 100px;
		}

		/*display:顯示方式*/
		/*塊:block*/
		/*內聯:inline*/
		/*內聯塊:inline-block*/
		.box, .wrap {
			display: inline-block;
			/*vertical-align: top;*/
		}

		
		/*兄弟坑*/
		/*盒模型佈局坑只出如今和margin-top相關的地方*/
		.s1, .s2 {
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		/*重疊取大值*/
		.s1 {
			margin-bottom: 30px;
		}
		.s2 {
			margin-top: 40px;
		}
		
		/*父子坑*/
		.sup {
			width: 200px;
			height: 200px;
			background-color: cyan;
		}
		.sub {
			width: 100px;
			height: 100px;
			background-color: orange;
		}
		/*父子top重疊,取大值*/
		.sup {
			margin-top: 50px;
		}
		.sub {
			margin-left: 50px;
		}
		/*解決盒模型經典佈局坑*/
		/*1.將父級固定*/
		.sup {
			/*border-top: 1px solid black;*/
			/*border-top: 1px solid transparent;*/
			/*保證顯示區域 200*200 */
			/*height: 199px;*/
		}
		.sub {
			/*margin-top: 50px;*/
		}
		/*2.經過padding*/
		.sup {
			padding-top: 50px;
			height: 150px;
		}

		
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="wrap"></div>

	<!-- 坑 -->
	<section class="s1">1</section>
	<section class="s2">2</section>

	<div class="sup">
		<div class="sub"></div>
	</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。