技術標籤：前端學習css

外邊距

1.margin垂直方向重疊取最大值
2.maring左右為auto可以讓塊元素在父元素水平居中

標準文件流

1.塊元素預設垂直排列，行內元素預設水平排列
2.塊級元素預設寬度100%，行內元素預設寬度是內容的寬
3.行內元素寬和高不起作用
4.行內元素上下margin不起作用
5.display可以修改行內與塊元素
6.inline-block 行內塊元素 水平排列可以設定寬高

		<div>div</div>
		<span>span</span>
		<em>em</em>
		<
 
p>p</p>
		<h1>h1</h1>

em{ 
				border: 2px solid #FFA500;
				width: 100px;
				height: 100px;
				margin: 50px 100px; 
				display: block;
}

浮動

1.元素脫離標準文件流 ，靠父元素左邊
2.父元素和兄弟元素都會認為該元素已經不存在兄弟元素會佔據他的位置，文字會留出其位置
3.如果子元素都脫離標準文件流，父元素就沒有高度了 ,如果寬度容不下就換一行
4.行內元素浮動後會變成塊元素

<div class="container"
 
>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>

			.container{ 
				width: 1200px;
				border: 1px solid red;
				margin: 0 auto;
				height:900px;
				}
			.left{
				width: 296px;
				background-color: #FFFF00;
				height: 900px;
				float: left;
				border:2px solid green;
			}
			.right{
				width: 900px;
				height: 900px;
				background-color: #FFC0CB;
				float: left;
				 
			}
 

清除浮動帶來的影響

1.給父元素手動設定一個高度
2.給父元素設定一個overflow：hidden
3.讓父元素最後一個塊級元素不浮動 設定clean：both

<div class="up">
			<div class="son">son1</div>
			<div class="son son2">son1</div>
			<div class="son">son1</div>
			<p></p>
		
		</div>
		<div class="down">你好標題</div>

.up{ 
			background-color: gold; 
			width: 1000px; 
			margin: 0 auto;
			border:5px solid red; 	
			}
			.down{ 
			background-color: #FFC0CB; 
			width: 1000px; 
			margin: 0 auto;
			margin-top: 50px;
			}
			.up .son{ 
			height: 300px; 
			/* background-color: #FFA500; */
			width: 33.33%;
			float: right;
			}

.up{ 
			background-color: gold; 
			width: 1000px; 
			margin: 0 auto;
			border:5px solid red; 
			/* height: 300px; */
			/* overflow: hidden; */
			
			}
		.down{ 
			background-color: #FFC0CB; 
			width: 1000px; 
			margin: 0 auto;
			margin-top: 50px;
			}
		.up .son{ 
			height: 300px; 
			/* background-color: #FFA500; */
			width: 33.33%;
			float: right;
			}
		.up .son2{ background-color: #fff;}
		/* 讓down與up產生間距 */
		.up p{
			  /* border: 10px solid red;  */
			/* clear:left; */
			/* 左邊不允許出現浮動元素 */
			/* clear:right */
			clear:both;
			/* 左右都不允許出現浮動元素 */
			}