css盒模型和塊級、行內(nèi)元素深入理解

一、CSS盒模型

盒模型概述

盒模型是CSS的核心知識點(diǎn)之一，它指定元素如何顯示以及如何相互交互。頁面上的每個元素都被看成一個矩形框，這個框由元素的內(nèi)容、內(nèi)邊距、邊框和外邊距組成。如下圖所示：

內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周圍。如果在元素上添加背景，那么背景應(yīng)用于元素的內(nèi)容和內(nèi)邊距組成的區(qū)域。因此可以用內(nèi)邊距在內(nèi)容周圍創(chuàng)建一個隔離帶，使內(nèi)容不與背景混合在一起。添加邊框會在內(nèi)邊距區(qū)域外邊增加一條線。這些線可以有不同的樣式和寬度，如實(shí)線、虛線、點(diǎn)畫線。在邊框外邊的是外邊距，外邊距是透明的，一般使用它控制元素之間的間隔。

內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個元素的所有邊，也可以應(yīng)用于單獨(dú)的邊，如：

padding-top:20px; //為元素單獨(dú)設(shè)置上內(nèi)邊距padding:15px; //元素的所有內(nèi)邊距都為15pxpadding:1px 2px 3px 4px; //分別為每個邊設(shè)置內(nèi)邊距，順序?yàn)?上 右 下 左 /*外邊距margin用法同內(nèi)邊距padding*/ border-top:1px solid #ccc; //為元素單獨(dú)設(shè)置上邊框border:2px dashed #000; //為所有邊設(shè)置邊框

標(biāo)準(zhǔn)模式與混雜模式下的盒模型

什么是標(biāo)準(zhǔn)模式和混雜模式

當(dāng)瀏覽器廠商開始創(chuàng)建與標(biāo)準(zhǔn)兼容的瀏覽器時，他們希望確保向后兼容性。為了實(shí)現(xiàn)這一點(diǎn)，他們創(chuàng)建了兩種呈現(xiàn)模式：標(biāo)準(zhǔn)模式和混雜模式。在標(biāo)準(zhǔn)模式下瀏覽器按照規(guī)范呈現(xiàn)頁面；在混雜模式下，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無法工作。

怎樣區(qū)分標(biāo)準(zhǔn)模式和混雜模式

瀏覽器根據(jù)DOCTYPE（文檔聲明）是否存在以及使用那種DTD來選擇要使用的呈現(xiàn)方式。如果XHTML和HTML文檔保航形式完整的DOCTYPE，那么它一般以標(biāo)準(zhǔn)模式呈現(xiàn)。相反，如果文檔的DOCTYPE不存在或者形式不正確則導(dǎo)致HTML和XHTML以混雜模式呈現(xiàn)。

兩種模式下的盒模型

標(biāo)準(zhǔn)模式下盒子的實(shí)際寬度為：

width + padding-left + padding-right + border-left-width + border-right-width

實(shí)際高度為：

heigth + padding-top +padding-bottom + border-top-width + border-bottom-width

混雜模式下盒子的實(shí)際寬度為：css中設(shè)定的width值，高度為設(shè)置的height值。當(dāng)然在沒有設(shè)置overflow的情況下，若盒子內(nèi)容、內(nèi)邊距、或是邊框的值較大，會把盒子撐開，實(shí)際寬度和高度則大于設(shè)定值。

二、塊級元素與行內(nèi)元素

我們在做頁面布局的時候,一般會將html元素分為兩種，即塊級元素和行內(nèi)元素。

塊級元素：塊狀元素排斥其他元素與其位于同一行，可以設(shè)定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內(nèi)元素。常見的塊級元素有div, p ,h2~h7等。

行內(nèi)元素：行內(nèi)元素不可以設(shè)置寬（width）和高（height），但可以與其他行內(nèi)元素位于同一行，行內(nèi)元素內(nèi)一般不可以包含塊級元素。行內(nèi)元素的高度一般由元素內(nèi)部的字體大小決定，寬度由內(nèi)容的長度控制。常見的行內(nèi)元素有a, em ,strong等。

例如：我們可以給div或p應(yīng)用下面樣式，但是a標(biāo)簽卻無法應(yīng)用下面的樣式。

當(dāng)然我們還可以通過樣式display屬性來改變元素的顯示方式。當(dāng)display的值設(shè)為block時，元素將以塊級方式呈現(xiàn)；當(dāng)display值設(shè)為inline時，元素將以行內(nèi)形式呈現(xiàn)。所以我們可以給a標(biāo)簽應(yīng)用以下樣式：