margin 左邊距 margin-left:數值 | autoauto:即距離這個邊最遠的距離右邊距: margin-right:數值 | auto上邊距: margin-top:數值 這裡不能用auto下邊距: margin-bottom:數值 這裡也不能用auto外邊距 複合寫法1:margin: 0px(上) 0px(右) 0px(下) 0px(左)2:margin: 0px(上) 0px(左右) 0px(下)3:margin: 0px(上下邊距) 0px(左右邊距)4:margin: 0px(上下左右邊距都是0px)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>外邊距</title> <link rel="stylesheet" href="index.css"/> </head><body> <p class="p1">我是p1</p> <p class="p2">我是p2</p></body></html>p{ width: 200px; height: 200px; background: red;}.p1{ margin-left: 100px; margin-top: 100px; margin-bottom: 0px;}.p2{ background: blue; margin-right: auto; margin-left: auto; /* margin-left: 300px; margin-top: -200px; */}
模仿頁面 簡單實現三列<!DOCTYPE html><html lang="en"><head> <meta charser="utf-8"/> <title>微博三列布局</title> <style> .content{ width : 900px; height : 1200px; background-color:yellow; } .p1{ width:200px; height:1200px; background-color:red; } .p2{ width:500px; height:1200px; background-color:green; margin-left:220px; margin-top:-1200px; } .p3{ width:160px; height:1200px; background-color:blue; margin-left:auto; margin-top:-1200px; } </style></head><body> <p class="content"> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> </p></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>內邊距</title> <link rel="stylesheet" href="index.css"/></head><body> <!-- 內邊距 padding --> <!-- 左內距 padding-left:數值 --> <!-- 右內距 padding-right:數值 --> <!-- 上內距 padding-top --> <!-- 下內距 padding-bottom --> <!-- 內邊距 複合寫法 --> <!-- 1:padding: 0px(上) 0px(右) 0px(下) 0px(左) --> <!-- 2:padding: 0px(上) 0px(左右) 0px(下) --> <!-- 3:padding: 0px(上下邊距) 0px(左右邊距) --> <!-- 4:padding: 0px (上下左右邊距都是0px)--> <p>xxxx</p></body></html>
背景樣式:background背景顏色 background-color:顏色值背景圖片 background-image:url("圖片路徑")背景圖片平鋪 backgroud-repeat:repeat-x(沿著x軸平鋪) | repeat-y(沿著Y軸平鋪) | no-repeat(不平鋪)背景圖片定位 background-position: x yx軸: 支援left center right 支持度百分比y軸: 支援top center bottom 支持度百分比背景圖片尺寸 background-size: x y | cover | containbackground:複合寫法background:background-color background-image background-position background-repeat定義多張圖片的複合寫法background:url("timg.jpg") 0px 0px/100px 100px repeat, url("timg.jpg") 30% 30%/100px 100px no-repeat, url("timg.jpg") 60% 60%/100px 100px no-repeat, gold url(timg.jpg) 90% 90%/100px 100px no-repeat;
父子同級結構下,父級與子級都設定了上邊距的情況下,如果父級沒有設定border的情況下,會引起塌陷問題,即父級框會向下移動一段距離(這段距離是子級設定的上邊距的長度)
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>外邊距的坑</title> <style> .p1{ width:250px; height:250px; margin-top:5px; background-color:blue; } .p2{ width:150px; height:150px; margin-top:50px; background-color:red; } </style></head><body> <p class="p1"> <p class="p2"> <p class="p3">q</p> </p> </p></body></html>
當設定了border時,這個塌陷問題將得到完美解決,這個塌陷問題是系統的原因,我們只負責解決解決後的代碼:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>外邊距的坑</title> <style> .p1{ width:250px; height:250px; margin-top:5px; background-color:blue; border:1px gold dashed; } .p2{ width:150px; height:150px; margin-top:50px; background-color:red; } </style></head><body> <p class="p1"> <p class="p2"> <p class="p3">q</p> </p> </p></body></html>
從中可以看到,父級的位置恢複為原來的位置(原來位置:即沒有建立p2的時候,p1所在的位置),塌陷問題得到解決.
設定內邊距問題一個p即可以設定外邊距也可以設定內邊距,當設定內邊距時,該框體會在該方向上擴大相應的距離比如初始情況為:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>外邊距的坑</title> <style> .p1{ width:200px; height:200px; margin-top:5px; background-color:blue; border:1px gold dashed; } .p2{ width:100px; height:100px; margin-top:20px; background-color:red; } </style></head><body> <p class="p1"> <p class="p2"> <p class="p3">q</p> </p> </p></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>外邊距的坑</title> <style> .p1{ width:200px; height:200px; margin-top:5px; padding-top:50px; background-color:blue; border:1px gold dashed; } .p2{ width:100px; height:100px; margin-top:20px; background-color:red; } </style></head><body> <p class="p1"> <p class="p2"> <p class="p3">q</p> </p> </p></body></html>
此時要想設定內邊距同時又不想改變框體的大小,需要提前從外邊框的高度中減去要設定的內邊距的長度,即200-50=150,即外邊框的屬性設定為寬200像素,高150像素程式碼範例
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>外邊距的坑</title> <style> .p1{ width:200px; height:150px; margin-top:5px; padding-top:50px; background-color:blue; border:1px gold dashed; } .p2{ width:100px; height:100px; margin-top:20px; background-color:red; } </style></head><body> <p class="p1"> <p class="p2"> <p class="p3">q</p> </p> </p></body></html>
結果:此時的結果恢複為外邊框為正放形
此時如果將子級的上邊框也設定內邊距,則也需要提前將子級的高減去相應的距離程式碼範例:代碼中高已經減去相應的內邊距;如果子級邊框不設定邊框頂邊的內邊距,設定邊框底邊的內邊距,此時為了確保邊框不因為內邊距為改變,任然需要減去相應的內邊距代碼為設定邊框定邊的內邊距
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>外邊距的坑</title> <style> .p1{ width:200px; height:150px; margin-top:5px; padding-top:50px; background-color:blue; border:1px gold dashed; } .p2{ width:100px; height:80px; margin-top:20px; padding-top:20px; background-color:red; } </style></head><body> <p class="p1"> <p class="p2"> <p class="p3">q</p> </p> </p></body></html>
同級結構下(注意不是父子結構,上面那個坑是父子級結構),外邊距衝突的情況下(即兩個同級的p,一個在上面,一個在下面,你設定了外邊距即magin-bottom,我也設定了外邊距即(magin-top),此時兩個外邊距在一起會起衝突,他們兩個的距離會是兩個邊距中的較大者,而不是兩個邊距的值相加程式碼範例:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>外邊距的坑</title> <style> .p1{ width:100px; height:100px; margin-bottom:20px; background-color:blue; } .p2{ width:100px; height:100px; margin-top:30px; background-color:red; } </style></head><body> <p class="p1"></p> <p class="p2"></p></body></html>
盒模型的構成需要:<!-- 盒模型：構成：容器尺寸+padding+border+margin -->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>六環</title> <style> .p1{ border: 1px dashed black; width: 600px; height: 554px; margin: 0 auto; padding-top: 46px; } .p2{ border: 4px lightblue solid; background: gray; width: 500px; height: 475px; margin: 0 auto; padding-top: 25px; } .p3{ background: pink; width:450px; height: 425px; margin: 0 auto; padding-top: 25px; } .p4{ border: 1px dotted white; width: 400px; height: 380px; margin: 0 auto; padding-top: 20px; } .p5{ border: 1px dashed white; width: 340px; height: 320px; margin: 0 auto; padding: 20px; } .p6{ width:300px; height:300px; margin:auto; background-color: red; } </style></head><body> <p class="p1"> <p class="p2"> <p class="p3"> <p class="p4"> <p class="p5"> <p class="p6"></p> </p> </p> </p> </p> </p></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
