css盒子模型
盒子模型：
先上谷歌瀏覽器控制檯裏的盒子模型圖：css
應該很明顯了，從外而內分別是margin（外邊距）、border（邊框）、內邊距（padding）和內容（heigth&width）。html
盒子模型有css標準模型（即上述模型）和IE盒子模型，二者不一樣之處就在於IE盒子模型的內容區域等於標準模型的內容區域+padding+border。在CSS中能夠經過box-sizing來設置使用哪一種模型，content-box對應標準盒子模型，border-box對應IE盒子模型。瀏覽器
document和body的margin：
整個網頁裏最大的盒子是<doucument>，<body>默認margin爲8個像素。spa
padding：
設置backgroud-color的時候，繪製的是內容區域+padding區域。 code
padding寫法有兩種：htm
- 分開寫：
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px; - 綜合寫：
padding:10px,20px,30px,40px; /*上右下左*/ padding:10px,20px,30px; /*上10px，左右20px，下30px*/ padding:10px,20px; /*上下10px，左右20px*/ padding:10px; /*上右下左全爲10px*
當兩種寫法都有好比：blog
padding:10px;
padding-top:20px;
這時候的盒子模型：圖片
而這麼寫：it
padding-top:10px;
padding:20px;
這時候的盒子模型：class
因此後寫的屬性會覆蓋以前的屬性，因此通常的寫法是先寫綜合屬性，再寫小屬性來微調。
有些元素，會默認帶padding，好比你們用以前都喜歡清除它的padding的<ul>。
border:
border有三個屬性：粗細、線型、顏色。
顏色能夠不寫，默認是黑色，可是其它兩個屬性不寫，框就出不來了。
主要線型在谷歌瀏覽器中爲如下效果：
但若是想實現比較炫酷的效果仍是會用圖片做爲邊框。
border也是個綜合屬性，綜合的寫也是上右下左的順序。
它還能夠按兩個維度拆分紅小屬性：
- 按要素拆：border-width、border－style、border-color；
- 按方向拆：border-top、border-right、border-bottom、border-left；
而且，按要素拆分的小屬性能夠繼續按方向拆分，做爲綜合寫法時順序也爲上右下左：
border-width: 10px 20px; /*上下10px，左右20px*/ border-style: solid double groove ridge; /*上solid，右double,下groove，左ridge*/ border-color: rgb(221, 140, 140) grey rgb(134, 134, 218); /*上紅，左右灰，下藍*/
效果圖：
固然，你也能夠拆分到最底層來控制：
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
如今就綜合邊框來畫個抽象藝術派錦旗：
index.html:
... <div id="triangle"> <p>css盒子畢業之證</p> </div> ...
index.css:
#triangle{
width:0px;
height:0px;
border:15px solid rgb(236, 236, 160);
border-top:none;
border-bottom-color: white;
padding: 20px;
margin: 30px;
}
p{
margin-left: -20px;
margin-top: -20px;
background: rgb(236, 106, 106);
width: 40px;
}
- 1. CSS盒子模型
- 2. CSS-盒子模型
- 3. 【CSS】盒子模型
- 4. css盒子模型
- 5. css盒子模型、
- 6. CSS 盒子模型
- 7. CSS---盒子模型
- 8. CSS——盒子模型
- 9. CSS - 盒子模型
- 10. CSS"盒子模型"
- 更多相關文章...
- • ASP.NET MVC - 模型 - ASP.NET 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 委託模式
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS盒子模型
- 2. CSS-盒子模型
- 3. 【CSS】盒子模型
- 4. css盒子模型
- 5. css盒子模型、
- 6. CSS 盒子模型
- 7. CSS---盒子模型
- 8. CSS——盒子模型
- 9. CSS - 盒子模型
- 10. CSS"盒子模型"