今天我們來了解一下css的盒子模型與文檔流

盒子模型、盒子準(zhǔn)備、屬性整理、標(biāo)準(zhǔn)流文檔流、浮動、布局、定位等

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面布局，就基本上掌握了大半啦~這時我們就已經(jīng)能夠?qū)W(wǎng)頁中各個元素進行精準(zhǔn)的排版，做出符合我們意愿的網(wǎng)頁啦！

關(guān)于CSS的各種屬性，我們還是可以參考學(xué)習(xí)HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側(cè)邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~

完全就是我們需要什么，只要憑著需求去尋找。~follow me~

1.盒子模型

盒模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式

CSS盒模型是一種樣式HTML元素的方式。每個HTML元素都是帶有邊框，邊距，填充和內(nèi)容的矩形框。

以下代碼顯示了元素中每個部分的布局。最外邊是邊距，然后是元素邊界，之后是填充，內(nèi)容是核心和內(nèi)部最多。

盒子的組成部分，舉個例子說明一下

外邊距margin：作用 – 拉開兩個盒子之間的距離

邊框線border

內(nèi)邊距padding：作用 – 拉開內(nèi)容與邊框線的距離panda

內(nèi)容width和height – 實體化范圍

①border設(shè)置

書寫border屬性代表設(shè)置盒子四個方向邊框線相同，如果想要設(shè)置四個方向邊框線不同，方法：border中橫線連接方向英文（top|left|right|bottom），例如：border-top代表頂部邊框

border-top:1px solid #f30; border-right:10px solid #f60; border-bottom:20px solid #f90; border-left:40px solid #f20;

②內(nèi)邊距padding

書寫padding代表的是盒子四個方向的內(nèi)邊距，單獨設(shè)置不同方向內(nèi)邊距，做法：padding中橫線連接方向英文，例如：padding-top代表頂部內(nèi)邊距

上邊距padding-top;

右邊距 padding-right;

下邊距 padding-bottom;

左邊距padding-left;

padding是一個復(fù)合屬性，由上、右、下、左等邊距組成。

tips：

如果四周的內(nèi)邊距都一樣，可以用padding:10px;

如果想要清除默認的內(nèi)邊距，可以使用padding:0;

如果上下邊距一致，左右邊距一致，則可以用padding:10x 20px;

如果上下不一樣，左右一樣，可以用padding:10px 20px 5px;

如果不符合以上情況，則用這種寫法padding:10px 10px 10px 10px;

③外邊距 margin（用法和padding一樣）

④盒子尺寸

w3c中盒子尺寸計算

標(biāo)準(zhǔn)模式：通常在非IE低瀏覽器中。計算方法：占的空間的寬度=內(nèi)容的寬度＋左右內(nèi)邊距的寬度＋左右邊框的寬度＋左右外邊 距的寬度（margin +padding+ border+ content）

模型包括margin、border、padding、content ，元素的width=content的寬度

在w3c標(biāo)準(zhǔn)中，我們在實體化一個盒子的時候，會給盒子固定的width和height，如果同時我們給這個盒子padding，或者border，那么這個盒子會在我們設(shè)置的固定值的基礎(chǔ)上加padding值和border值，所以呢，盛放內(nèi)容的width和height不變，但是最終效果盒子的尺寸變大了。

盒子占位尺寸計算公式 = margin+border+padding+實體化尺寸

tips：

如果盒子添加了padding和border屬性，因為盒子的這個特性，所以我們在做項目的時候，如果盒子已經(jīng)設(shè)置了width和height，然后又給盒子添加了padding和border屬性，那么需要在寬高基礎(chǔ)之上減去相應(yīng)的padding和border值

IE盒子模型（也叫做怪異模型）

怪異模式：怪異模式是指在IE6及更早的IE版本下盒模型的計算方 法：所占空間總寬度=內(nèi)容＋外邊距（ content＋margin）

元素的width=content+padding+border

上圖顯示：

width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）。

padding：內(nèi)邊距。

border：邊框。

margin：外邊距。

tips：

瀏覽器的兼容性問題

一旦為頁面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設(shè)。

解決 IE8 及更早版本不兼容問題可以在 HTML 頁面聲明即可。

⑤外邊距塌陷/margin合并問題

當(dāng)垂直排列的兩個盒子，垂直外邊距緊挨在一起，就會產(chǎn)生合并/塌陷問題，

取值方法：取值為兩者之間的較大值

例如：

由于這個特性，我們在實際項目中遇到這樣的問題， 只需要給1號margin-bottom，或者僅僅給2號margin-top，即可。

嵌套排列的兩個盒子也有外邊距塌陷問題

解決辦法：

給父級添加border屬性，完整的劃分出盒子邊緣；

給父級或子級別添加float：left屬性

給父級添加overflow：hidden屬性

⑥行內(nèi)標(biāo)簽的垂直內(nèi)外邊距

行內(nèi)標(biāo)簽想要改變垂直方向的位置，通過margin和padding都不生效，唯獨通過設(shè)置行高屬性line-height才能生效 – 行高屬性可以改變行內(nèi)標(biāo)簽的中心基線的位置

tips：

margin的上下值對行內(nèi)標(biāo)簽不起作用

把行內(nèi)元素轉(zhuǎn)換為行內(nèi)換就可以了。

⑦盒子水平居中

核心屬性：margin：上下隨意 左右必須為auto；

先決條件

如果想要盒子居中，盒子必須滿足以下條件：

盒子必須有寬度width值

盒子必須是塊級元素

2.盒子準(zhǔn)備-（網(wǎng)頁三步準(zhǔn)備工作）

①清空標(biāo)簽的默認樣式

需要清空所有用的到的想得到的標(biāo)簽的內(nèi)外邊距和列表樣式

body,div,p,span,a,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,input{ margin:0; padding:0; list-style:none; }`

原因：大多數(shù)標(biāo)簽都有自己默認的內(nèi)外邊距，我們是需要項目需要去設(shè)置內(nèi)外邊距的值，所以需要清除默認的內(nèi)外邊距

②設(shè)置全局樣式

設(shè)置body的文字三屬性：

根據(jù)項目設(shè)計圖，設(shè)置項目中主要的字體三屬性font-size,font-family,color

body{ font-size:12px; font-family:'微軟雅黑'; color:#ccc; }

③超鏈接的默認樣式

設(shè)置超鏈接的顏色和下劃線

a{ color:#0000ee;} a:hover{}

綜合css reset

/* ====== reset ====== */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} fieldset,img{border:0}:focus{outline:0;} address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} abbr,acronym{border:0;font-variant:normal;} input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;} code,kbd,samp,tt{font-size:100%;} input,button,textarea,select{*font-size:100%;} body{line-height:1.5;} ol,ul{list-style:none;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;} sup,sub{font-size:100%;vertical-align:baseline;} :link,:visited ,ins{text-decoration:none;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}

3.屬性整理

4.標(biāo)準(zhǔn)流文檔流

標(biāo)準(zhǔn)流： 就是瀏覽器按照默認的樣式來排列標(biāo)簽

其實就是一個非常常見的現(xiàn)象：由于頁面中的所有標(biāo)簽?zāi)J狀態(tài)下都受標(biāo)準(zhǔn)流控制，所以塊級標(biāo)簽獨占一行，行內(nèi)標(biāo)簽可以一行共存多個

這是p

我是h1標(biāo)題

我是行內(nèi)塊span 我是a行內(nèi)a 我是行內(nèi)b

5.浮動

浮動是一種脫離標(biāo)準(zhǔn)流的形式 – 半脫離

float：left|right|none；

left- 左浮動

right- 右浮動

none - 不浮動

瀏覽器認為設(shè)置了浮動的元素不存在，所以會影響到后續(xù)的元素，所以浮動脫離標(biāo)準(zhǔn)流叫做半脫離。

塊級標(biāo)簽在一行共存

注意：浮動之后的標(biāo)簽是完全沒有間距的左對齊和頂對齊；浮動后的標(biāo)簽顯示模式為行內(nèi)塊

由于浮動的元素沒有行內(nèi)元素、塊級元素之分，所以不接受 display 進行行塊轉(zhuǎn)換

①浮動的特點

浮動的元素脫離文檔元素，不占據(jù)空間。不浮動的元素會直接無視掉這個元素。

浮動元素遇到另一個浮動的元素就會停下

文本和行內(nèi)元素會環(huán)繞在float元素周邊的

box3

②清除浮動clear:both;

由于浮動的盒子會影響后面的盒子排列，如果后面的盒子不想要被影響，那么需要對浮動進行清除。

left – 清除左側(cè)浮動的影響

right – 清除右側(cè)浮動的影響

both– 清除兩側(cè)浮動的影響

誰不想被影響，給誰加：clear:both

把清除浮動的元素當(dāng)做一堵墻，用來隔開浮動的元素和浮動的的元素

例如 - box1里面的box2和box3都是浮動的，而且box1沒有高度，這個時候可以給box1增加一個清除浮動的子元素clearfix

③overflow屬性

overflow屬性用來控制元素超出內(nèi)容部分的顯示情況，是顯示還是隱藏

overflow —— 水平和垂直方向（默認值visible）

overflow-x —— 水平方向

overflow-y—— 垂直方向

auto —— 自動出現(xiàn)滾動條

hidden —— 自動隱藏超出部分

scroll —— 總是顯示滾動條

例如

overflow:hidden; /*自動隱藏超出部分*/ overflow-x:auto; /*水平方向必要時顯示滾動條*/ overflow-x:hidden; /*水平方向自動隱藏超出部分*/ overflow-y:scroll; /*垂直方向總是顯示滾動條*/

overflow:hidden

只要盒子有浮動，那么我們就給這個盒子的父級增加overflow:hidden來清除浮動

例如：box1里面的box2和box3都是浮動的，而且box1沒有高度，這個時候可以給box1增加一個overflow:hidden屬性

6.布局

以后工作中頁面結(jié)構(gòu)會很復(fù)雜，所有結(jié)構(gòu)都是由最基本的左右結(jié)構(gòu)變換而來

注意：任何的左右結(jié)構(gòu)都是有3個完成，一個標(biāo)準(zhǔn)流下的父級和兩個浮動流的左右子級

7.定位

position

相對定位relative

絕對定位absolute

固定定位fixed

不定位static

①相對定位

relative - 不脫標(biāo)

參照物 ：相對自己定位

改變位置：通過left、right、top、bottom來更改位置

注意：相對定位是脫離標(biāo)準(zhǔn)流的形式 = 占位脫離，不能改變盒子的顯示模式

例如 - 設(shè)置left，top等偏移量的demo

②絕對定位

absolute–完全脫標(biāo)

默認情況下，參照物是瀏覽器

注意：絕對定位是完全脫離標(biāo)準(zhǔn)流的形式，且不占位置，會將盒子顯示模式變成行內(nèi)塊；當(dāng)偏移量屬性上下沖突的時候，上生效；當(dāng)左右沖突的時候，左生效

總結(jié)：以最近的已經(jīng)定位的父級為參照物，如果不滿足這個條件就以瀏覽器窗口為參照物定位

例如 - box4的參照物是box2

絕對定位特點

完全脫離標(biāo)準(zhǔn)流，不占位置

絕對定位會把盒子變成行內(nèi)塊

絕對定位使用規(guī)則

子絕父相 – 子級絕對定位，父級相對定位 == 子級的定位參照物變成父級

注意：絕對定位的元素會忽略父級設(shè)置的padding值

③z-index

作用：調(diào)整標(biāo)簽的z軸堆疊順序

z-index取值為整數(shù)（負整數(shù)、正整數(shù)和0） – 取值越大堆疊順序越靠上

注意：z-index必須和定位配合使用才能生效

④固定定位

固定定位fixed將盒子固定在瀏覽器上（ie6不兼容，后期可以用js彌補）

fixed完全脫離標(biāo)準(zhǔn)流，不占位置

通過設(shè)置偏移量改變位置

參照物瀏覽器

注意：ie6對固定定位有兼容性，固定定位改變盒子顯示模式為行內(nèi)塊

tips:

當(dāng)對元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

我是固定定位1 我一直在固定在瀏覽器頂部這里一些文本。

我是固定定位2 我一直在固定在瀏覽器底部這里 更多的文本。

static

默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。

tips學(xué)習(xí)小技巧:

學(xué)習(xí)前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什么苦。。。既然學(xué)習(xí)這么痛苦，為什么不快樂一點學(xué)呢？anyway~希望大家可以成為一個優(yōu)秀的前端！資歷有限，錯誤難免，歡迎大力指正。

【W(wǎng)EB前端大作戰(zhàn)】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。