柚子快報激活碼778899分享：前端 CSS進階

Worten科技外貿(mào)行綜合2025-05-05500

http://yzkb.51969.com/

1. 盒子模型

分為：邊框、外邊距、內(nèi)邊距、和實際內(nèi)容

1.1 邊框（border）

1.邊框的使用

border可以設(shè)置元素的邊框。邊框有三部分組成：邊框?qū)挾?粗細) 邊框樣式邊框顏色；語法:

border : border-width || border-style || border-color;

none：沒有邊框即忽略所有邊框的寬度（默認值）solid：邊框為單實線(最為常用的)dashed：邊框為虛線dotted：邊框為點線

邊框的寫法

邊框簡寫：

border: 1px solid red;

邊框分開寫法：

border-top:1px solid red;

2. 表格的細線邊框

border-collapse 屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。語法： border-collapse:collapse;

1.collapse 單詞是合并的意思 2.border-collapse: collapse; 表示相鄰邊框合并在一起

3.邊框會影響盒子實際大小

邊框會額外增加盒子的實際大小。因此我們有兩種方案解決：

測量盒子大小的時候,不量邊框。如果測量的時候包含了邊框,則需要 width/height 減去邊框?qū)挾?

1.2 內(nèi)邊距（padding）

1.內(nèi)邊距的使用

padding 屬性用于設(shè)置內(nèi)邊距，即邊框與內(nèi)容之間的距離。語法：

合寫屬性

padding: 5px 上下左右皆為5px

padding:5px 10px 上下為5px，左右為10px

padding:5px 10px 20px 上為5px ,左右為10px 下為20px

padding:5px 10px 20px 25px 上為5px ,右為10px 下為20px 左為25px (順時針)

分寫屬性

padding-left ,padding-right ,padding-top ,padding-bottom

2.內(nèi)邊距會影響盒子實際大小

如果盒子已經(jīng)有了寬度和高度，此時再指定內(nèi)邊框，會撐大盒子。如何盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小。解決方式：如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來的內(nèi)邊距大小即可。

1.3 外邊距（margin）

1.外邊距的使用

margin 屬性用于設(shè)置外邊距，即控制盒子和盒子之間的距離。

2.外邊距的應(yīng)用

外邊距可以讓塊級盒子水平居中的兩個條件：

盒子必須指定了寬度（width）。盒子左右的外邊距都設(shè)置為 auto 。

margin-left: auto; margin-right: auto;

margin: auto;

margin: 0 auto;

注意：以上方法是讓塊級元素水平居中，行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加 text-align:center 即可。

3.外邊距合并

使用 margin 定義塊元素的垂直外邊距時，可能會出現(xiàn)外邊距的合并。主要有兩種情況:

相鄰塊元素垂直外邊距的合并: 當上下相鄰的兩個塊元素（兄弟關(guān)系）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并。解決方案：盡量只給一個盒子添加 margin 值。嵌套塊元素垂直外邊距的塌陷對于兩個嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

注意：浮動的盒子不會有塌陷問題。

解決方案：

可以為父元素定義上邊框?？梢詾楦冈囟x上內(nèi)邊距?？梢詾楦冈靥砑?overflow:hidden。

4.清除內(nèi)外邊距

網(wǎng)頁元素很多都帶有默認的內(nèi)外邊距，而且不同瀏覽器默認的也不一致。因此我們在布局前，首先要清除下網(wǎng)頁元素的內(nèi)外邊距。

* {

padding:0; /* 清除內(nèi)邊距 */

margin:0; /* 清除外邊距 */

}

注意：行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距。但是轉(zhuǎn)換為塊級和行內(nèi)塊元素就可以了

2. 其他樣式

2.1 圓角邊框

在 CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。

border-radius 屬性用于設(shè)置元素的外邊框圓角。

border-radius:length;

參數(shù)值可以為數(shù)值或百分比的形式如果是正方形，想要設(shè)置為一個圓，把數(shù)值修改為高度或者寬度的一半即可，或者直接寫為 50%該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius兼容性 ie9+ 瀏覽器支持, 但是不會影響頁面布局,可以放心使用

2.2 盒子陰影

CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影。

box-shadow: h-shadow v-shadow blur spread color inset;

div {

width: 200px;

height: 200px;

background-color: pink;

margin: 100px auto;

}

div:hover {

box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3) inset;

}

2.3 文字陰影

在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本。

text-shadow: h-shadow v-shadow blur color;

div {

font-size: 50px;

color: orangered;

font-weight: 700;

text-shadow: 10px 10px 10px blue;

}

3. 浮動

3.1 傳統(tǒng)網(wǎng)頁布局的三種方式

CSS 提供了三種傳統(tǒng)布局方式(簡單說,就是盒子如何進行排列順序)：

普通流（標準流）浮動定位這三種布局方式都是用來擺放盒子的，盒子擺放到合適位置，布局自然就完成了。注意：實際開發(fā)中，一個頁面基本都包含了這三種布局方式。

3.2 標準流（普通流/文檔流）

所謂的標準流: 就是標簽按照規(guī)定好默認方式排列

塊級元素會獨占一行，從上向下順序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行內(nèi)元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em 等以上都是標準流布局，我們前面學(xué)習的就是標準流，標準流是最基本的布局方式。

3.3 浮動

3.3.1. 為什么使用浮動

有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。因為浮動可以改變元素標簽?zāi)J的排列方式.

3.3.2. 浮動最典型的應(yīng)用

可以讓多個塊級元素一行內(nèi)排列顯示。

3.3.3. 網(wǎng)頁布局第一準則

多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

3.3.4 什么是浮動

float 屬性用于創(chuàng)建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

選擇器 { float: 屬性值; }

3.3.5 浮動特性

浮動元素會脫離標準流(脫標：浮動的盒子不再保留原先的位置) 浮動的元素會一行內(nèi)顯示并且元素頂部對齊

注意：浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。

浮動的特性浮動的元素會具有行內(nèi)塊元素的特性浮動元素的大小根據(jù)內(nèi)容來決定浮動的盒子中間是沒有縫隙的

3.3.6 浮動元素經(jīng)常和標準流父級搭配使用

先用標準流父元素排列上下位置, 之后內(nèi)部子元素采取浮動排列左右位置. 符合網(wǎng)頁布局第一準側(cè)。

3.4 浮動布局注意點

浮動和標準流的父盒子搭配。先用標準流的父元素排列上下位置, 之后內(nèi)部子元素采取浮動排列左右位置一個元素浮動了，理論上其余的兄弟元素也要浮動。一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應(yīng)該浮動，以防止引起問題。浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流.

3.5 清除浮動

3.5.1為什么清除浮動

由于父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為 0 時，就會影響下面的標準流盒子。

父級沒高度。子盒子浮動了。影響下面布局了，我們就應(yīng)該清除浮動了。

3.5.2 清除浮動的本質(zhì)

清除浮動的本質(zhì)是清除浮動元素造成的影響：浮動的子標簽無法撐開父盒子的高度。

注意：

如果父盒子本身有高度，則不需要清除浮動清除浮動之后，父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了

3.5.3 清除浮動樣式

選擇器{clear:屬性值;}

我們實際工作中，幾乎只用 clear: both; 清除浮動的策略是: 閉合浮動.

3.5.4 清除浮動的多種方式

額外標簽法 :額外標簽法也稱為隔墻法，是 W3C 推薦的做法。使用方式： ? 額外標簽法會在浮動元素末尾添加一個空的標簽。

例如

，或者其他標簽（如
等）。

優(yōu)點：通俗易懂，書寫方便。缺點：添加許多無意義的標簽，結(jié)構(gòu)化較差。 ?注意：要求這個新的空標簽必須是塊級元素。

父級添加 overflow 屬性：可以給父級添加 overflow 屬性，將其屬性值設(shè)置為 hidden、 auto 或 scroll 。

overflow:hidden | auto | scroll;

優(yōu)點：代碼簡潔缺點：無法顯示溢出的部分注意：是給父元素添加代碼

父級添加after偽元素 :after 方式是額外標簽法的升級版。給父元素添加：

.clearfix:after {

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix { /* IE6、7 專有 */

*zoom: 1;

}

優(yōu)點：沒有增加標簽，結(jié)構(gòu)更簡單缺點：照顧低版本瀏覽器代表網(wǎng)站：百度、淘寶網(wǎng)、網(wǎng)易等

父級添加雙偽元素:給父元素添加

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}

優(yōu)點：代碼更簡潔缺點：照顧低版本瀏覽器代表網(wǎng)站：小米、騰訊等

4. 定位

定位模式是否脫標移動位置是否常用static 靜態(tài)定位否不能使用邊偏移很少relative 相對定位否 (占有位置)相對于自身位置移動基本單獨使用absolute絕對定位是（不占有位置）帶有定位的父級要和定位父級元素搭配使用fixed 固定定位是（不占有位置）瀏覽器可視區(qū)單獨使用，不需要父級sticky 粘性定位否 (占有位置)瀏覽器可視區(qū)當前階段少

4.1 為什么使用定位

1.浮動:可以讓多個塊級盒子一行沒有縫隙排列顯示，經(jīng)常用于橫向排列盒子。 2.定位:則是可以讓盒子自由的在某個盒子內(nèi)移動位置或者固定屏幕中某個位置，并且可以壓住其他盒子。

4.2 定位組成

定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子定位也是用來布局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移定位模式用于指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

4.2.1 邊偏移（方位名詞）

邊偏移就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

邊偏移屬性示例描述toptop: 80px頂端偏移量，定義元素相對于其父元素上邊線的距離。bottombottom: 80px底部偏移量，定義元素相對于其父元素下邊線的距離。leftleft: 80px左側(cè)偏移量，定義元素相對于其父元素左邊線的距離。rightright: 80px右側(cè)偏移量，定義元素相對于其父元素右邊線的距離

定位的盒子有了邊偏移才有價值。一般情況下，凡是有定位地方必定有邊偏移。

4.2.2 定位模式 (position)

在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：

選擇器 {

position: 屬性值;

}

定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。定位模式?jīng)Q定元素的定位方式，它通過 CSS 的 position 屬性來設(shè)置，其值可以分為四個：

值語義static靜態(tài)定位relative相對定位absolute絕對定位fixed固定定位

4.3 定位模式介紹

4.3.1. 靜態(tài)定位(static)

靜態(tài)定位是元素的默認定位方式，無定位的意思。它相當于 border 里面的none，靜態(tài)定位static，不要定位的時候用。

選擇器 {

position: static;

}

靜態(tài)定位按照標準流特性擺放位置，它沒有邊偏移。靜態(tài)定位在布局時我們幾乎不用的

4.3.2 相對定位(relative) - 重要

相對定位是元素在移動位置的時候，是相對于它自己原來的位置來說的。

選擇器 {

position: relative;

}

相對定位的特點：（務(wù)必記?。?1.它是相對于自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。 2.原來在標準流的位置繼續(xù)占有，后面的盒子仍然以標準流的方式對待它。因此，相對定位并沒有脫標。它最典型的應(yīng)用是給絕對定位當?shù)摹！?/p>

4.3.3 絕對定位(relative) - 重要

1.絕對定位的介紹

絕對定位是元素在移動位置的時候，是相對于它祖先元素來說的。語法：

選擇器 {

position: absolute;

}

完全脫標 —— 完全不占位置；父元素或祖先元素沒有定位：則以瀏覽器為準定位（Document 文檔）。

父元素要有定位：元素將依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

絕對定位的特點總結(jié)：（務(wù)必記?。?/p>

如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為基準定位（Document 文檔）。如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。絕對定位不再占有原先的位置。所以絕對定位是脫離標準流的。（脫標）

2.定位口訣—子絕父相

子級定位是絕對定位的話，父級要用相對定位: ①子級絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方，不會影響其他的兄弟盒子。 ②父盒子需要加定位限制子盒子在父盒子內(nèi)顯示。 ③父盒子布局時，需要占有位置，因此父親只能是相對定位。

總結(jié)：因為父級需要占有位置，因此是相對定位，子盒子不需要占有位置，則是絕對定位當然，子絕父相不是永遠不變的，如果父元素不需要占有位置，子絕父絕也會遇到。

4.3.4 固定定位(fixed) - 重要

固定定位:是元素固定于瀏覽器可視區(qū)的位置。（認死理型）主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。語法:

選擇器 {

position: fixed;

}

固定定位的特點：（務(wù)必記?。?/p>

1.以瀏覽器的可視窗口為參照點移動元素。

跟父元素沒有任何關(guān)系不隨滾動條滾動。

2.固定定位不在占有原先的位置。

固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。（認死理型）

完全脫標—— 完全不占位置；只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性來設(shè)置元素的位置；

跟父元素沒有任何關(guān)系；單獨使用的不隨滾動條滾動。

4.3.5 粘性定位(fixed) - 重要

粘性定位可以被認為是相對定位和固定定位的混合。 Sticky 粘性的語法：

選擇器 {

position: sticky;

top: 10px;

}

粘性定位的特點： 1.以瀏覽器的可視窗口為參照點移動元素（固定定位特點） 2.粘性定位占有原先的位置（相對定位特點） 3.必須添加 top 、left、right、bottom 其中一個才有效跟頁面滾動搭配使用。兼容性較差，IE 不支持。

4.4 堆疊順序 z-index

在使用定位布局時，可能會出現(xiàn)盒子重疊的情況。此時，可以使用 z-index 來控制盒子的前后次序 (z軸)語法：

選擇器 {

z-index: 1;

}

z-index 的特性如下：

1.屬性值：正整數(shù)、負整數(shù)或 0，默認值是 0，數(shù)值越大，盒子越靠上； 2. 如果屬性值相同，則按照書寫順序，后來居上； 3. 數(shù)字后面不能加單位。注意：z-index 只能應(yīng)用于相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態(tài)定位無效。

4.5 定位(position)的拓展

4.5.1 絕對定位的盒子居中

注意：加了絕對定位/固定定位的盒子不能通過設(shè)置 margin: auto 設(shè)置水平居中。但是可以通過以下計算方法實現(xiàn)水平和垂直居中，可以按照下圖的方法：

4.5.2 定位特殊特性

絕對定位和固定定位（脫標）也和浮動類似

行內(nèi)元素添加絕對或固定定位，可以直接設(shè)置高度和寬度行內(nèi)元素添加絕對或固定定位，如果不給寬度和高度，默認大小是內(nèi)容大小。

display 是顯示模式，可以改變顯示模式有以下方式:

添加display:inline-block 轉(zhuǎn)換為行內(nèi)塊可以利用浮動float轉(zhuǎn)換為行內(nèi)塊（脫標）利用絕對定位或固定定位也和浮動類似，默認轉(zhuǎn)換為行內(nèi)塊元素。

所有一個行內(nèi)的盒子，如果添加了浮動、絕對或固定定位，不要轉(zhuǎn)換，就可以對盒子進行設(shè)置寬度和高度。

4.5.3 脫標的盒子不會觸發(fā)外邊距塌陷

浮動元素、**絕對定位(固定定位）**元素的都不會觸發(fā)外邊距合并的問題。（我們以前是用padding border overflow解決的）

也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合并的問題了。

4.5.4 絕對定位（固定定位）會完全壓住盒子

浮動的元素不同，只會壓住它標準流的盒子，但是不會壓住標準流盒子中的文字（圖片）。但是絕對定位（固定定位）會壓住標準流的內(nèi)容浮動之所以不會壓住文字，是因為浮動的最初目的是為了做文字環(huán)繞的，文字圍繞浮動元素。

5. 網(wǎng)頁布局的總結(jié)

通過盒子模型，html就是一個盒子通過CSS浮動、定位可以讓每個盒子排列成為網(wǎng)頁。一個完整的網(wǎng)頁，是標準流、浮動、定位一起完成布局的，每個都有自己的專門用法。

5.1. 標準流

可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流布局。

5.2. 浮動

可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局

5.3. 定位

定位最大的特點是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示。如果元素自由在某個盒子內(nèi)移動就用定位布局。

7. 元素的顯示與隱藏

目的：讓一個元素在頁面中消失或者顯示出來場景：類似網(wǎng)站廣告，當我們點擊關(guān)閉就不見了，但是我們重新刷新頁面，會重新出現(xiàn)！

屬性區(qū)別用途display 顯示（重點）隱藏對象，不保留位置配合后面js做特效，比如下拉菜單，原先沒有，鼠標經(jīng)過，顯示下拉菜單，應(yīng)用極為廣泛visibility 可見性（了解）隱藏對象，保留位置使用較少overflow 溢出（重點）只是隱藏超出大小的部分1. 可以清除浮動 2. 保證盒子里面的內(nèi)容不會超出該盒子范圍

7.1 display 顯示（重點）

display 設(shè)置或檢索對象是否及如何顯示

display: none 隱藏對象

display：block 除了轉(zhuǎn)換為塊級元素之外，同時還有顯示元素的意思。

特點：

display 隱藏元素后，不再占有原來的位置。搭配 JS 可以做很多的網(wǎng)頁特效。實際開發(fā)場景：

配合后面js做特效，比如下拉菜單，原先沒有，鼠標經(jīng)過，顯示下拉菜單，應(yīng)用極為廣泛

7.2 visibility 可見性（了解）

visibility 屬性用于指定一個元素應(yīng)可見還是隱藏。

visibility：visible ; 　元素可視

visibility：hidden; 　元素隱藏

特點：

visibility 隱藏元素后，繼續(xù)占有原來的位置。（停職留薪）如果隱藏元素想要原來位置，就用 visibility：hidden如果隱藏元素不想要原來位置，就用 display：none (用處更多重點）

7.3 overflow 溢出（重點）

overflow 屬性指定了如果內(nèi)容溢出一個元素的框（超過其指定高度及寬度）時，會發(fā)生什么。

屬性值描述visible不剪切內(nèi)容也不添加滾動條hidden不顯示超過對象尺寸的內(nèi)容，超出的部分隱藏掉scroll不管超出內(nèi)容否，總是顯示滾動條auto超出自動顯示滾動條，不超出不顯示滾動條

一般情況下，我們都不想讓溢出的內(nèi)容顯示出來，因為溢出的部分會影響布局。但是如果有定位的盒子，請慎用overflow:hidden 因為它會隱藏多余的部分。

實際開發(fā)場景：

清除浮動隱藏超出內(nèi)容，隱藏掉, 不允許內(nèi)容超過父盒子。

11. CSS屬性書寫順序（重點）

布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關(guān)系到模式）自身屬性：width / height / margin / padding / border / background文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {

display: block;

position: relative;

float: left;

width: 100px;

height: 100px;

margin: 0 10px;

padding: 20px 0;

font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;

color: #333;

background: rgba(0,0,0,.5);

border-radius: 10px;