CSS盒子模型及用法
阿新 • • 發佈：2018-11-28
模型中內容指什麼？ 1.當標籤不巢狀，例如： <div class=”dv1”>新聞</div> //”新聞”是內容, “新聞”是個文字 <div class=”dv2”>故事</div> //”故事”是內容 “故事”也是個文字 2.當標籤巢狀時，例如： <div class=”dv1”> <div class=”dv2”>新聞</div> //<div class=”dv2”>新聞</div>板塊 是內容 </div>
margin–在父元素和子元素之間應用（重點）
（1）在子元素中設定水平方向的margin值
將子元素的margin-left設定為了100px;效果如下：
<head> <meta charset = "UTF-8"> <style> *{padding : 0; margin : 0; border : 0;} .father{ width : 500px; height : 500px; background:red; } .son{ width : 100px; height : 100px; background : green; margin-left : 100px; } </style> </head> <body> <div class = "father"> <div class = "son">寬度為100px,margin-left為100px</div> </div> </body>
同級元素之間的margin不會考慮到padding,但是在父元素和子元素就不同了，那麼如果父元素中如果有padding，效果會是什麼樣的呢？
<head> <meta charset = "UTF-8"> <style> *{padding : 0; margin : 0; border : 0;} .father{ width : 500px; height : 500px; padding : 100px; background:red; } .son{ width : 100px; height : 100px; background : green; margin-left : 100px; } </style> </head> <body> <div class = "father"> <div class = "son">寬度為100px,margin-left為100px</div> </div> </body>
但是經過測量可以發現子元素的左邊框距離父元素的左邊框之間的距離為200px，因為其中還有100px的左padding值，前面的例子因為我沒有設定padding值，所以沒有觀察出來，因此這就說明了在子元素中設定margin-left，其值實際上是子元素的左邊框距離父元素左padding內側的距離。