CSS有一種基礎(chǔ)設(shè)計(jì)模式叫盒模型，定義了Web頁面中的元素是如何看做盒子來解析的。每一個(gè)盒子有不同的展示界面，下面就來介紹盒模型，主要有一下幾種盒模型：inline、inline-block、block、table、absolute position、float。
瀏覽器把每個(gè)元素看做一個(gè)盒模型，每個(gè)盒模型是由以下幾個(gè)屬性組合所決定的：display、position、float、width、height、margin、paddinghe border等，不同類型的盒模型會(huì)產(chǎn)生不同的布局

什么是盒模型？
頁面中的每一個(gè)元素都是一個(gè)盒模型，包括HTML和body。如下圖，每一個(gè)盒模型都是由多種屬性組成的

重置盒模型解析模式
在W3C的傳統(tǒng)CSS2.1盒模型中，通過聲明width和height值來控制內(nèi)容區(qū)域的寬度和高度，然后附加上內(nèi)邊距和邊框等，稱為內(nèi)容盒模型
在CSS中盒模型被分為兩種，第一種是W3C的標(biāo)準(zhǔn)模型，另一種是IE的傳統(tǒng)模型，它們相同之處都是對(duì)元素計(jì)算尺寸的模型，具體說就是對(duì)元素的width、height、padding和border以及元素實(shí)際尺寸的計(jì)算關(guān)系，不同之處是兩者的計(jì)算方法不一致
1）W3C的標(biāo)準(zhǔn)盒模型
外盒尺寸計(jì)算（元素空間尺寸）
element空間高度 = 內(nèi)容高度 內(nèi)距 邊框 外距
element空間寬度 = 內(nèi)容寬度 內(nèi)距 邊框 外距
內(nèi)盒尺寸計(jì)算（元素大小）
element高度 = 內(nèi)容高度 內(nèi)距 邊框（height為內(nèi)容高度）
element寬度 = 內(nèi)容寬度 內(nèi)距 邊框（width為內(nèi)容寬度）
2）IE傳統(tǒng)下盒模型（IE6以下，不包含IE6版本或QuirksMode下IE5.5 ）
外盒尺寸計(jì)算（元素空間尺寸）
element空間高度 = 內(nèi)容高度 外距(height包含了元素內(nèi)容寬度、邊框、內(nèi)距)
element空間寬度 = 內(nèi)容寬度 外距（包含了元素內(nèi)容寬度、邊框、內(nèi)距）
內(nèi)盒尺寸計(jì)算（元素大小）
element高度 = 內(nèi)容高度（height包含了元素內(nèi)容寬度、邊距、內(nèi)距）
element寬度 = 內(nèi)容寬度（width包含了元素的內(nèi)容寬度、邊距、內(nèi)距）
做個(gè)小總結(jié)：我個(gè)人的理解就是，IE下的盒模型，直接設(shè)置了box-sizing:border-box;

1.CSS3盒模型屬性
語法及參數(shù)：box-sizing:content-box | border-box | inherit
三個(gè)屬性值說明：
content-box：默認(rèn)值，讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度和高度（width/height）= 元素邊框?qū)挾?#xff08;border） 元素內(nèi)距（padding） 元素內(nèi)容寬度和高度（content width/height），也就是element width/height=border padding content width/height
border-box：此值會(huì)重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統(tǒng)的盒模型（IE6以下版本和6 ~ 7怪異模式）。元素的寬度或高度 = 元素內(nèi)容的寬度或高度。從盒模型介紹可知，這里的內(nèi)容寬度或高度包含了元素的border、padding、內(nèi)容的寬度或高度（此處的內(nèi)容寬度或高度 = 盒子的寬度或高度-邊框-內(nèi)距）
inherit：此值是元素繼承父元素的盒模型模式

box-sizing屬性主要用來控制元素的盒模型的解析模式，其主要目的是控制元素的總寬度。box-sizing:border-box;這種設(shè)置使頁面布局更加方便，只要對(duì)元素就行width設(shè)置，總寬度就固定不變
注：在Firefox瀏覽器中，box-sizing還可以設(shè)置一個(gè)padding-box屬性值，用來指定元素的寬度或高度包括內(nèi)容的寬度或高度和內(nèi)距，但不包括邊框?qū)挾?/p>

瀏覽器兼容性

2.CSS3內(nèi)容溢出屬性
盒模型，也就是一個(gè)容器，容器就有空間有大小，當(dāng)某些內(nèi)容在盒子中容不下時(shí)，就會(huì)超出盒子，此時(shí)就可以使用overflow（CSS2.1）屬性來指定如何顯示盒中容納不下的內(nèi)容。在CSS3中增加了overflow-x和overflow-y屬性
語法及參數(shù)：
overflow-x:visible | hidden | scroll | auto | no-display | no-content
overflow-y:visible | hidden | scroll | auto | no-display | no-content
和overflow屬性參數(shù)一樣，overflow-x和overflow-y屬性值去不同的值所起的作用不一樣
visible：默認(rèn)值，表示不剪切容器中的任何內(nèi)容、不添加滾動(dòng)條，元素將被剪切為包含對(duì)象的窗口大小，而且是clip屬性設(shè)置將失效
hidden：內(nèi)容溢出容器時(shí)，所有內(nèi)容都將隱藏，而且不顯示滾動(dòng)條
scroll：不管內(nèi)容有沒有溢出容器，overflow-x都會(huì)顯示橫向的滾動(dòng)條，而overflow-y會(huì)顯示縱向的滾動(dòng)條
auto：在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條。也就是說當(dāng)內(nèi)容超過容器的寬度或者高度時(shí)，溢出的內(nèi)容將會(huì)隱藏在容器中，并且會(huì)添加滾動(dòng)條，用戶可以拖動(dòng)滾動(dòng)條查看隱藏在容器中的內(nèi)容
no-display：當(dāng)內(nèi)容溢出容器時(shí)不顯示元素，此時(shí)類似于元素添加了display:none聲明一樣
no-content：當(dāng)內(nèi)容溢出容器時(shí)不顯示內(nèi)容，此時(shí)類似于添加了visibility:hidden聲明一樣

瀏覽器兼容性

3.CSS3自由縮放屬性
為了增強(qiáng)用戶體驗(yàn)，CSS3增加了很多新的屬性，其中resize就是一個(gè)重要的屬性，也是一個(gè)非常實(shí)用的屬性，它允許用戶通過拖動(dòng)的方式來修改元素的尺寸來改變?cè)氐拇笮　?br />語法及參數(shù)：
resize:none | both | horizontal | vertical | inherit
屬性值說明：
none：用戶不能拖動(dòng)元素修改尺寸大小
both：用戶可以拖動(dòng)元素，同時(shí)修改元素的寬度和高度
horizontal：用戶可以拖動(dòng)元素，僅可以修改元素的寬度，但不能修改元素的高度
vertical：用戶可以拖動(dòng)元素，僅可以修改元素的高度，但不能修改元素的寬度
inherit：繼承父元素的resize屬性值

瀏覽器兼容性

4.CSS3外輪廓屬性
外輪廓outline在頁面中呈現(xiàn)的效果和邊框border呈現(xiàn)的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網(wǎng)頁布局空間，不一定是矩形，外輪廓是屬于一種動(dòng)態(tài)樣式，只有元素獲取到焦點(diǎn)或者被激活時(shí)呈現(xiàn)
語法及參數(shù)：
outline:[outline-color] | [outline-style] | [outline-width] | [outline-offset] | inherit
屬性值說明：
outline-color：定義了輪廓線的顏色，默認(rèn)為黑色
outline-style：定義了輪廓線的樣式，默認(rèn)為none
outline-width：定義輪廓線的寬度，屬性值可以為一個(gè)寬度值，默認(rèn)值為medium，表示繪制中等寬度的輪廓線
outline-offset：定義輪廓邊框的便宜位置的數(shù)值，此值可以是負(fù)值。為正值時(shí)，表示輪廓邊框向外偏移多少個(gè)像素；當(dāng)為負(fù)值是，表示輪廓邊框向內(nèi)偏移多少個(gè)像素
inherit：元素繼承父元素的outline效果

瀏覽器兼容性

outline和border的對(duì)比
1）border是盒模型的一部分直接影響其大小，outline不影響文檔流，也不破壞網(wǎng)頁布局
2)border可以單邊設(shè)置，outline始終閉合；沒有outline-top或outline-left之類
3）outline創(chuàng)建的外輪廓線可能是非矩形的，我的理解是當(dāng)元素在文檔邊上的時(shí)候，輪廓被隱藏了；而border不會(huì)被隱藏掉
4）border只能向外擴(kuò)展；而outline內(nèi)外都可以

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的CSS3盒模型温故的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。