CSS的盒子模型(一)

盒子的概念

咱們的網頁是由一個一個的標籤元素組成的,這些標籤在CSS的體系中能夠理解成一個一個的盒子,一個標籤就是一個盒子,理解這些盒子的原理有助於咱們更好的實現CSS的佈局和排版。 CSS中普遍使用兩種盒子:塊級盒子內聯盒子,這兩種盒子根據文檔流和元素關係的不一樣會有不一樣的表現。html

塊級盒子和內聯盒子

塊級盒子

在CSS中經過display: block屬性將元素定義成塊級盒子,在HTML的標籤元素中,像div標籤、p段落標籤、h標題標籤等等這些標籤在CSS中默認都是塊級盒子塊級盒子在瀏覽器中會有如下幾個行爲:瀏覽器

1.若是不指定寬度,塊級盒子會佔滿父容器的寬度
2.每一個盒子的內容都會自動換行
3.width和height屬性會有效果
4.邊距(margin/padding)和邊框(border)會將其餘元素從盒子周圍推開markdown

用一個例子來驗證如下塊級盒子的這個行爲, 咱們先來建立一個只有寬高和背景的盒子,而後再添加一些其餘的內容來逐個驗證。佈局

圖片.png

這個盒子對應的CSSspa

.div01{
    width500px;
    height200px;
    display: block;
    background-color: aquamarine;
    margin0 auto;
}
複製代碼

咱們給這個盒子指定了寬和高,這也說明咱們爲塊級盒子設置寬高屬性是有做用的,如今咱們把寬度屬性去掉,其餘屬性不變,來驗證如下上面講到的第一個行爲。3d

圖片.png

能夠看到,盒子的寬度已經鋪滿了瀏覽器。接下來爲了顯示方便咱們依然爲盒子指定寬度,並在盒子內部添加一些文字來觀察一下盒子的行爲。code

圖片.png

咱們會發現,盒子內部的文字自動換行了,爲了進一步驗證這個特性,咱們繼續把盒子由塊級改成內聯(inline),其餘屬性保持不變,而後再觀察盒子的內容是否還會換行。orm

.div01{
    ...
    display: inline;
    ...
}
複製代碼

圖片.png

咱們會發現,盒子的內容不只沒有換行,並且原來設置的寬高屬性都失效了。htm

經過上面的例子驗證了塊級盒子幾個特性中的前三個,接下來繼續用示例來驗證最後一個。咱們在剛剛建立的盒子下面再添加一個盒子,讓這兩個盒子上下緊挨着,爲了便於區分兩個盒子採用不一樣的背景色。圖片

圖片.png
咱們給盒子1添加邊框和margin屬性,來觀察盒子2的位置變化。

border3px lightcoral solid;
margin-bottom10px;
複製代碼

圖片.png

很明顯看到,盒子02的位置發生了位移(注意盒子01的位置是沒有發生變化的),由於border和margin-bottom的存在,使得盒子02向下移動了13px。

內聯盒子

內聯盒子是經過將元素的display屬性定義成inline來實現的,在html標籤體系中,<a>標籤、 <span>、 <em> 以及 <strong> 都是處於內聯狀態的。 內聯狀態的標籤元素在瀏覽器中通常會有如下幾種行爲:

1.盒子不會換行
2.width和height屬性將不會起做用
3.垂直方向的內外邊距以及邊框會被應用可是不會把其餘處於 inline 狀態的盒子推開
4.水平方向的內外邊距以及邊框會被應用且會把其餘處於 inline 狀態的盒子推開

用一個例子來驗證如下第三點和第四點,咱們定義兩個span元素,而後使這兩個元素上下排列,爲了便於區分須要給兩個span設置不一樣的背景色。

<body>
    <span class="inline">內聯盒子01內聯盒子01</span><br>
    <span class="inline02">內聯盒子02內聯盒子02</span>
</body>
複製代碼

圖片.png

而後爲其中一個span添加邊框,最後觀察如下效果:

.inline{
    margin0 auto;
    background-color: aquamarine;
    border8px solid skyblue;
}
.inline02{
    background-color: lightblue;
}
複製代碼

圖片.png
能夠看到,即使咱們給盒子01添加了邊框,在內聯狀態下盒子02相對01的位置和距離依然沒有發生變化,而且第一個盒子的邊框和下邊第二個盒子發生了區域重疊。

接下來咱們稍微修改如下示例,再驗證一下第四點。咱們把上面兩個盒子排列方向改成水平排列,再觀察一下邊框對盒子02的影響。
先看一下沒有添加邊框的時候兩個盒子水平排列時的狀況。

圖片.png

而後繼續對盒子01添加邊框

border8px solid lightcoral;
複製代碼

圖片.png

能夠看到水平狀態下在給盒子01添加了邊框以後,盒子02的位置向右發生了偏移而且兩個盒子也沒有發生重疊現象。

以上就是關於CSS盒子的簡單總結,接下來會繼續總結盒子模型的其餘主要知識點,而後會造成一個短系列彙總。

相關文章
相關標籤/搜索