html css`盒子模型
阿新 • • 發佈：2018-05-03
bottom right 上下 AC ext char 後代選擇器 模型 -c
選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
後代選擇器 #box p{ width: 200px; height: 50px; background-color: bisque; }子選擇器 #box1>p{ width: 100px; height: 20px; background-color: red; }
交集選擇器 p,#div4{ width: 200px; background-color: red; } </style> </head><body> <!-- 後代選擇器 --> <div id="box"> <div id="div1"> <p>1111111111</p> </div> <div> <p>222222222</p> </div> <p>0000000000</p><p>0000000001</p> </div> <!-- 子選擇器 --> <div id="box1"> <div> <p>1111111111</p> </div> <div> <p>2222222</p> </div> <p>000000000</p> </div> <!-- 交集選擇器 --> <p>21111</p> <div id="div4"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: red; } .c1{ width: 200px; height: 210px; background-color: yellow; } </style> </head> <body> <!--標簽選擇器 --> <div> 1111111111 </div> <div> 2222222222 </div> <!--類選擇器 --> <p class="c1">1111</p> <p class="c2">2222</p> <p class="c1">3333</p> </body> </html>
盒子模型
內填充距離
當設置padding-left 或padding-right後，會增加元素的寬度，如果要使寬度不變，應該在
原有基礎上減去對應的值
設置padding-top 或padding-bottom後，也是如此
外邊距
當設置某一個盒子的margin-bottom和另一個盒子的margin-top時，上下距離不是相加，而是取其中的較大值
margin-right 和margin-left時，左右的邊距是二者相加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 先把默認的內外邊距清空 */ *{ margin: 0; padding: 0; } .div1{ border: 1px solid red; width: 280px; height: 270px; border-top: 10px solid green; border-right: 10px solid yellow; border-bottom: 10px solid red; border-left: 10px solid blue; /* 盒子模型向任何一個方向內填充都會撐大寬度，所以需要減少相應的填充寬度 */ padding-left: 20px; padding-top: 30px; } .div2{ border: 10px solid black; width: 300px; height: 300px; margin-left: 30px ; } </style> </head> <body> <div class="div1"> 我是黑子模型 </div> <div class="div2"> 我是盒子2 </div> </body> </html>
html css`盒子模型