CSS知識梳理04
阿新 • • 發佈：2018-12-04
margin的特點
1. 上下外邊距會重疊，取最大的顯示！
2. 父元素的第1個子元素的margin-top沒有碰到父元素的border或者padding的時候，會將子元素的margin-top作用在父元素身上
解決：
1. 給父元素加有效的邊框或padding(不能為0)
2. 給父元素加overflow:hidden，觸發父元素的BFC
塊級格式化上下文
block formating context
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>margin外邊距</title> 5 <style> 6 .box{ 7 width:100px; 8 height:100px; 9 background:red; 10 11 /*display:inline-block;*/ 12 } 13 14 .die{ 15 width:300px; 16 height:300px; 17 background:lime; 18 19 /*解決問題2的方式一*/ 20 /*border:1px solid lime;*/ 21 /*padding-top:1px;*/ 22 23 /*方式二（觸發了父元素的BFC）*/ 24 overflow:hidden; 25 } 26 .die .son{ 27 width:100px; 28 height:100px; 29 background:orange; 30 margin-top:30px; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box" style="margin-bottom:20px"></div><div class="box" style="margin-top:20px"></div> 36 <!-- <p>段落標籤的特點：上下會空兩行，上下會有16px的外邊距</p> 37 <p>兩個p標籤之間的距離應該是多少？</p> --> 38 39 <div class="die"> 40 <div class="son"></div> 41 <div class="son" style="margin-top:30px"></div> 42 </div> 43 </body> 44 </html>
overflow 溢位處理
值：
hidden 超出部分隱藏起來
scroll 顯示滾動條
auto 自動，超出就顯示滾動條
<html lang="en"> <head> <meta charset="UTF-8"> <title>溢位處理</title> <style> .box{ width:100px; height:100px; border:1px solid red; /*溢位顯示方式*/ overflow:hidden; overflow:scroll; /*超出才顯示滾動條*/ overflow:auto; } </style> </head> <body> <div class="box">陌陌APP，你值得擁有！昨天洩露了3000萬條資料，15年產生的資料，包括手機號、賬號、密碼，50美元，不到350元！</div> </body> </html>
visibility 隱藏元素
值：
hidden 隱藏元素，但保留物理位置
visible 預設，看得見的！
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>visibility隱藏</title> 5 <style> 6 .two{ 7 /*隱藏元素*/ 8 visibility:hidden; 9 } 10 .one:hover+p{ 11 /*顯示元素*/ 12 visibility:visible; 13 } 14 </style> 15 </head> 16 <body> 17 <p class="one">黃與坑</p> 18 <p class="two">孔凌風</p> 19 <p style="display:none">李王茹</p> 20 21 <p>行黑紅</p> 22 </body> 23 </html>
float 浮動
值：
none 不浮動
left 左浮動
right 右浮動
會脫離文件流，破壞性和包裹性，文字環繞
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>浮動</title> 5 <style> 6 *{margin:0;} 7 .box{ 8 width:100px; 9 height:100px; 10 background:tan; 11 float:right; 12 margin-top:5px; 13 } 14 .top{ 15 background:#333; 16 height:40px; 17 } 18 .container{ 19 width:1230px; 20 height:40px; 21 margin:0 auto; 22 } 23 .left{ 24 float:left; 25 line-height:40px; 26 } 27 .right{ 28 line-height:40px; 29 float:right; 30 } 31 .top a{ 32 color:#ccc; 33 text-decoration:none; 34 font-size:13px; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="top"> 40 <div class="container"> 41 <div class="left"> 42 <a href="">小米商城</a> 43 <a href="">MIUI</a> 44 <a href="">雲服務</a> 45 <a href="">雲服務</a> 46 <a href="">雲服務</a> 47 <a href="">雲服務</a> 48 </div> 49 <div class="right"> 50 <a href="">登入</a> 51 <a href="">註冊</a> 52 </div> 53 </div> 54 </div> 55 <!-- <div class="box"></div> 56 <p style="border:1px solid red">123</p> --> 57 </body> 58 </html>
clear 清除浮動
值：
both 清除兩邊的浮動(常用)
left/right 不常用
清除浮動必須加在塊級元素身上
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>清除浮動</title> 5 <style> 6 .box{ 7 width:100px; 8 height:100px; 9 background:red; 10 11 /*3個盒子一起浮動*/ 12 float:left; 13 } 14 15 .one{ 16 width:100%; 17 height:40px; 18 background:#333; 19 } 20 </style> 21 </head> 22 <body> 23 <!-- 3個都飄了 --> 24 <div class="box"></div> 25 <div class="box" style="background:green"></div> 26 <div class="box" style="float:right;"></div> 27 28 <div style="clear:both"></div> 29 30 <!-- 無視前面3個喝飄的，自己頂上去 --> 31 <div class="one"></div> 32 </body> 33 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>子元素浮動後，父元素的高度塌陷</title> 5 <style> 6 .son{ 7 width:100px; 8 height:100px; 9 background:tan; 10 11 float:left; 12 } 13 14 /*偽物件清除浮動*/ 15 .box::after{ 16 /*content屬性必須的*/ 17 content:''; 18 display:block; 19 clear:both; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box"> 25 <div class="son"></div> 26 <div class="son"></div> 27 <div class="son"></div> 28 29 <!-- <div style="clear:both"></div> --> 30 </div> 31 123 32 33 </body> 34 </html>
position定位
值：
relative 相對定位
參照自己原來的位置進行定位
不會脫離文件流，不會影響其他元素的佈局
absolute 絕對定位
會脫離文件流
參照離自己最近的，定位過的祖宗元素進行定位，如果沒有定位過的祖宗元素，則參照瀏覽器的視窗進行定位
fixed 固定定位
脫離文件流
固定在瀏覽器視窗的某個位置，跟隨滾動條一起滾動
static 預設值(不定位)
配合top/bottom/left/right 屬性，可以控制元素的位置
1 <head> 2 <meta charset="UTF-8"> 3 <title>定位</title> 4 <style> 5 .box{ 6 width:200px; 7 height:40px; 8 background:#333; 9 10 /*相對定位*/ 11 /*position:relative;*/ 12 /*top:40px;*/ 13 14 /*絕對定位：塊級經典的水平和垂直都居中*/ 15 position:absolute; 16 left:50%; top:50%; 17 margin-left:-100px; 18 margin-top:-20px; 19 /*bottom:0; 20 right:0;*/ 21 22 /* 23 行級元素水平垂直都居中： 24 text-align:cetner; 25 line-height:高度一致; 26 */ 27 } 28 .die{ 29 width:500px; 30 height:300px; 31 background:orange; 32 33 /*給父元素設定定位後，子元素就會參照父元素的位置進行定位*/ 34 /*position:relative;*/ 35 36 position:fixed; 37 } 38 </style> 39 </head> 40 <body style="height:1000px"> 41 <div class="die"> 42 <div class="box"></div> 43 小時候，你媽媽打過你沒有？打過，打過3次！3次沒打掉，我就出生了！ 44 </div> 45 <p>小時候，你媽媽打過你沒有？打過，打過3次！3次沒打掉，我就出生了！小時候，你媽媽打過你沒有？打過，打過3次！3次沒打掉，我就出生了！小時候，你媽媽打過你沒有？打過，打過3次！3次沒打掉，我就出生了！</p> 46 </body> 47 </html>
z-index
值：
是數字，數字越大，層級越高
auto 預設值，可以想象為層級是0
注意：必須設定了position定位只有才有用
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>元素的堆疊層級</title> 5 <style> 6 .box{ 7 width:100px; 8 height:100px; 9 background:orange; 10 11 position:absolute; 12 } 13 </style> 14 </head> 15 <body> 16 <!-- 設定z-index堆疊層級 --> 17 <div class="box" style="background:red;margin-left:50px;z-index:-1;"></div> 18 <div class="box"></div> 19 20 <p>找啊找啊找朋友，找到一個女朋友，親個嘴來，麼麼手，晚上生個小朋友</p> 21 </body> 22 </html>