Web開發(fā) | CSS 介紹 & 使用總結(jié) (二)

CSS介紹

CSS 指層疊樣式表(Cascading Style Sheets), 樣式定義如何顯示 HTML 元素, 樣式通常存儲(chǔ)在樣式表中, 解決內(nèi)容與表現(xiàn)分離的問題, 外部樣式表可以極大提高工作效率, 外部樣式表通常存儲(chǔ)在 CSS 文件中

HTML和CSS的編寫準(zhǔn)則

在編寫HTML和CSS代碼過程中祈纯，要遵守一個(gè)準(zhǔn)則

結(jié)構(gòu)奋单、樣式分離

因此痕慢，不要使用HTML元素的屬性來給元素添加樣式读整，比如body的bgcolor搭盾、img的width\height等

以下是不建議的寫法

<body bgcolor="red">
<img src="圖片地址" alt="" width="200px" height="200px">
</body>

建議寫法:

<!--CSS樣式表-->
@charset "UTF-8";
body {
    background-color: red;
}
img {
    width: 200px;
    height: 200px;
}
<!--導(dǎo)入-->
<link rel="stylesheet" href="CSS/page.css">
<!--使用-->
<body>
<img src="圖片地址" alt="圖片說明">
</body>

CSS樣式表

內(nèi)聯(lián)樣式（inline style）

將樣式直接寫在元素的style屬性上

<div style="color: purple; background-color: red; font-size: 30px">內(nèi)容文字</div>

文檔樣式表（document style sheet）

將樣式寫在head元素的style元素中

<head>
    <style type="text/css">
        div {
            color: red;
            background-color: azure;
        }
    </style>
</head>

外部樣式表（external style sheet）

將樣式寫在單獨(dú)的CSS文件中懊昨，然后在當(dāng)前網(wǎng)頁的head元素中用link元素引用

<head>
    <meta charset="UTF-8">
    <title>04.外部樣式表</title>
    <link rel="stylesheet" href="CSS/div.css">
</head>

在CSS文件中使用@charset指定文件編碼爽蝴，一般都是UTF-8

<!--外部樣式表-->
@charset "UTF-8";

div {
    color: aqua;
    background-color: purple;
    width: 1000px;
    height: 500px;
}

CSS 選擇器

CSS選擇器

按照一定的規(guī)則選出符合條件的元素，為之添加CSS樣式

選擇器的種類繁多从铲，大概可以這么歸類

通用選擇器（universal selector）
元素選擇器（type selectors）
類選擇器（class selectors）
id選擇器（id selectors）
屬性選擇器（attribute selectors）
組合（combinators）
偽類（pseudo-classes）
偽元素（pseudo-elements）

通用選擇器（universal selector）

所有的元素,一般用來給所有元素作一些通用性的設(shè)置
效率比較低瘪校，盡量不要使用

比如內(nèi)邊距、外邊距
參考：http://www.jd.com

* {
        color: cyan;
        background-color: aliceblue;
        text-transform: capitalize;
}

元素選擇器（type selectors）

或者叫做“標(biāo)簽選擇器”

div {
    color: purple;
}

id選擇器（id selectors）

一個(gè)HTML文檔里面的id值是唯一的名段，不能重復(fù)

#span-style {
    color: white;
    background-color: black;
}

類選擇器（class selectors）

一個(gè)元素可以有多個(gè)class值阱扬，每個(gè)class之間用空格隔開

.global_style {
    color: black;
    background-color: white;
    font-family: "PingFang SC";
    font-size: 20px;
    margin: 10px;
}

屬性選擇器（attribute selectors） - [attr]

找到標(biāo)簽中對應(yīng)屬性,則會(huì)進(jìn)行修改

[attr~=val] 屬性值包含單詞one的元素（單詞one與其他單詞之間必須用空格隔開）
[attr|=val] 屬性值恰好等于one 或者 以單詞one開頭且后面緊跟著連字符-的元素
[attr^=val] 屬性值以單詞one開頭的元素 [attr$=val] 屬性值以單詞one結(jié)尾的元素
[attr*=val] 屬性值包含單詞one的元素

[title] {
    color: red;
}
[title = "one"] {
    color: blue;
}
[title ^= "name"]{
     color: yellow;
 }

后代選擇器（descendant combinator）

后代選擇器可以選擇作為某元素后代的元素, div元素里面的span元素（包括直接、間接子元素）
元素之間使用空格間隔

div span {
    color: green;   
}
div p span{
    color: yellow;
}

子選擇器（child combinators）

子元素選擇器,只能選擇作為某元素子元素的元素伸辟。

div>em{
    color: red;
}

相鄰兄弟選擇器（adjacent sibling combinator）

div元素后面緊挨著的p元素（且div麻惶、p元素必須是兄弟關(guān)系）

div+p {
    color: red;
}

全體兄弟選擇器（general sibling combinator）

div元素后面的p元素（且div、p元素必須是兄弟關(guān)系）

div~p{
    color: red;
}

選擇器組 - 交集選擇器

同時(shí)符合2個(gè)條件的元素：div元素信夫、class值有one

div.one {
    color: red;
}

選擇器組 - 并集選擇器

所有的div元素 + 所有class值有one的元素 + 所有title屬性值等于test的元素

div, .one, [title = "test"] {
    color: red;
}

偽類（pseudo-classes）

[圖片上傳失敗...(image-c83a85-1564385964310)]

動(dòng)態(tài)偽類（dynamic pseudo-classes）

使用舉例

a:link 未訪問的鏈接
a:visited 已訪問的鏈接
a:hover 鼠標(biāo)挪動(dòng)到鏈接上
a:active 激活的鏈接（鼠標(biāo)在鏈接上長按住未松開）

使用注意

:hover必須放在:link和:visited后面才能完全生效
:active必須放在:hover后面才能完全生效
所以建議的編寫順序是 :link窃蹋、:visited卡啰、:hover、:active
記憶：女朋友看到LV包包后警没，ha ha大笑

除了a元素匈辱，:hover、:active也能用在其他元素上

a:link {
    color: red;
} 
a:visited {
    color: blue;
}   
a:hover {
    color: green;
}    
a:active {
    color: yellow;
}

動(dòng)態(tài)偽類 - :focus

:focus指當(dāng)前擁有輸入焦點(diǎn)的元素（能接收鍵盤輸入）
動(dòng)態(tài)偽類編寫順序建議 :link杀迹、:visited梅誓、:focus、:hover佛南、:active

元素狀態(tài)偽類（UI element states pseudo-classes）

:enabled 啟用狀態(tài)
:disabled 禁用狀態(tài)
:checked 被選中狀態(tài)

結(jié)構(gòu)偽類（structural pseudo-classes） - :nth-child( )

:nth-child(1)
是父元素中的第1個(gè)子元素

p:nth-child(1) {
    color: red;
}

:nth-child(2n)

n代表任意正整數(shù)和0
是父元素中的第偶數(shù)個(gè)子元素（第2、4嵌言、6嗅回、8......個(gè)）
跟:nth-child(even)同義

:nth-child(2n + 1)

n代表任意正整數(shù)和0
是父元素中的第奇數(shù)個(gè)子元素（第1、3摧茴、5绵载、7......個(gè)）
跟:nth-child(odd)同義

:nth-child()的完整使用格式是:nth-child(an + b)

是父元素中的第an+b個(gè)子元素
n代表任意正整數(shù)和0
a、b需要給出具體值苛白，可以是正整數(shù)娃豹、負(fù)整數(shù)、0

:nth-last-child()的語法跟:nth-child()類似购裙，不同點(diǎn)是:nth-last-child()從最后一個(gè)子元素開始往前計(jì)數(shù)

:nth-last-child(1)懂版，代表倒數(shù)第一個(gè)子元素
:nth-last-child(-n + 2)躏率，代表最后2個(gè)子元素

結(jié)構(gòu)偽類 - :nth-of-type( )躯畴、:nth-last-of-type( )

:nth-of-type()用法跟:nth-child()類似，不同點(diǎn)是:nth-of-type()計(jì)數(shù)時(shí)只計(jì)算同種類型的元素
:nth-last-of-type()用法跟:nth-of-type()類似
不同點(diǎn)是:nth-last-of-type()從最后一個(gè)這種類型的子元素開始往前計(jì)數(shù)

結(jié)構(gòu)偽類 - :empty

:empty代表里面完全空白的元素

否定偽類（negation pseudo-class）

:not()的格式是:not(x)

x是一個(gè)簡單選擇器
元素選擇器薇芝、通用選擇器蓬抄、屬性選擇器、類選擇器夯到、id選擇器嚷缭、偽類（除否定偽類）
:not(x)表示除x以外的元素

偽元素（pseudo-elements）

常用的偽元素有

:first-line、::first-line
:first-letter耍贾、::first-letter
:before阅爽、::before
:after、::after

為了區(qū)分偽元素和偽類逼争，建議偽元素使用2個(gè)冒號镣隶，比

如::first-line

::first-line可以針對首行文本設(shè)置屬性

只有下列屬性可以應(yīng)用在::first-line偽元素
字體屬性、顏色屬性喂江、背景屬性
word-spacing诺祸、letter-spacing着帽、text-decoration、text-transform移层、line-height

偽元素 - ::first-letter

::first-letter可以針對首字母設(shè)置屬性

偽元素 - ::before和::after

::before和::after用來在一個(gè)元素的內(nèi)容之前或之后插入其他內(nèi)容（可以是文字仍翰、圖片）

attr()

在content中，還可以使用attr(屬性名)來獲得元素的屬性值

CSS屬性

常用CSS屬性

按照CSS屬性的具體用途观话，大致可以分類為

文本：color予借、direction灵迫、letter-spacing、word-spacing狞换、line-height、text-align黄琼、text-indent院领、text-transform丈氓、text-decoration饮怯、white-space
字體：font库倘、font-family杆勇、font-style彪笼、font-size队寇、font-variant凡伊、font-weight
背景：background、background-color、background-image蛹疯、background-repeat、background-attachment列吼、background-position
盒子模型：width、height蹄溉、border、margin、padding
列表：list-style
表格：border-collapse
顯示：display膏蚓、visibility枯芬、overflow、opacity最楷、filter
定位： vertical-align犯建、position、left、top揭芍、right肌毅、bottom笨奠、float、clear

文本

color

color屬性用來設(shè)置文本內(nèi)容的前景色
包括文字、裝飾線、邊框渠脉、外輪廓等的顏色

color: blue;

text-decoration

text-decoration用于設(shè)置文字的裝飾線

none：無任何裝飾線
underline：下劃線
overline：上劃線
line-through：中劃線（刪除線）

/*無下劃線*/
text-decoration: none;
/*下劃線*/
text-decoration: underline;
/*上劃線*/
text-decoration: overline;
/*中間線條*/
text-decoration: line-through;

letter-spacing

分別用于設(shè)置字母間距

letter-spacing: 5px;

word-spacing

單詞之間的間距

word-spacing: 30px;

text-transform

ext-transform用于設(shè)置文字的大小寫轉(zhuǎn)換

capitalize：將每個(gè)單詞的首字符變?yōu)榇髮?/li>
uppercase：將每個(gè)單詞的所有字符變?yōu)榇髮?/li>
lowercase：將每個(gè)單詞的所有字符變?yōu)樾?/li>
none：沒有任何影響

text-transform: uppercase;

text-indent

text-indent用于設(shè)置第一行內(nèi)容的縮進(jìn)

/*縮進(jìn)2個(gè)文字*/
text-indent: 2em;

text-align

text-align可用于設(shè)置元素內(nèi)容在元素中的水平對齊方式

left：左對齊
right：右對齊
center：正中間顯示
justify：兩端對齊

 text-align: center;

字體

font-size

font-size決定文字的大小

常用的設(shè)置

具體數(shù)值+單位
- 比如100px
- 也可以使用em單位：1em代表100%宇整，2em代表200%，0.5em代表50%
百分比
- 基于父元素的font-size計(jì)算连舍，比如50%表示等于父元素font-size的一半
一般給body設(shè)置font-size就代表設(shè)置網(wǎng)頁的默認(rèn)字體大小
- 其他元素可以基于父元素設(shè)置字體大小
- 到時(shí)候只需要改變body的字體大小，其他元素都會(huì)按照比例改變

font-size: 10px;

font-family

ont-family用于設(shè)置文字的字體名稱

可以設(shè)置1個(gè)或者多個(gè)字體名稱（從左到右按順序選擇字體涩哟，直到找到可用的字體為止）
一般情況下器仗，英文字體只適用于英文科雳，中文字體同時(shí)適用于英文和中文
所以吼畏，如果希望中英文分別使用不同的字體约计，應(yīng)該先將英文字體寫在前面止邮，中文字體寫在后面

font-family: "Apple Braille", "DIN Condensed", "微軟雅黑", "蘋方";

@font-face

@font-face可以讓網(wǎng)頁支持網(wǎng)絡(luò)字體(Web Font)并村，不再局限于系統(tǒng)自帶的字體; 字體下載：http://font.chinaz.com/

 body {
     font-family: "Apple Braille";
 }
 @font-face {
    font-family: "Apple Braille";
    src: url("CSS/mini_cut.TTF");
 }

font-weight

font-weight用于設(shè)置文字的粗細(xì)（重量）

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：每一個(gè)數(shù)字表示一個(gè)重量
normal：等于400
bold：等于700

 font-weight: 100;

font-stlye

font-style用于設(shè)置文字的常規(guī)收叶、斜體顯示

normal：常規(guī)顯示
italic：用字體的斜體顯示
oblique：文本傾斜顯示

em魂毁、i丸升、cite书劝、address购对、var毅否、dfn等元素的font-style默認(rèn)就是italic

font-style: oblique;

font-variant

font-variant可以影響小寫字母的顯示形式

normal：常規(guī)顯示
small-caps：將小寫字母替換為縮小過的大寫字母

font-variant: small-caps;

line-height

line-height用于設(shè)置文本的最小行高

 line-height: 40px;

注意區(qū)分height和line-height的區(qū)別

height：元素的整體高度
line-height：元素中每一行文字所占據(jù)的高度
應(yīng)用實(shí)例：假設(shè)div中只有一行文字炫刷，如何讓這行文字在div內(nèi)部垂直居中
讓line-height等同于height

font

font是一個(gè)縮寫屬性
font-style font-variant font-weight font-size/line-height font-family

font-style浑玛、font-variant认臊、font-weight可以隨意調(diào)換順序，也可以省略
/line-height可以省略锄奢，如果不省略失晴，必須跟在font-size后面
font-size、font-family不可以調(diào)換順序拘央，不可以省略

font: italic small-caps 700 20px/40px "微軟雅黑";

背景

background-image 背景圖片

background-image用于設(shè)置元素的背景圖片

會(huì)蓋在background-color的上面
在圖片的透明區(qū)域涂屁，可以看到背景色

background-repeat

background-repeat用于設(shè)置背景圖片是否要平鋪

常見的設(shè)值有

repeat：平鋪
no-repeat：不平鋪
repeat-x：只在水平方向平鋪
repeat-y：只在垂直平方向平鋪

background-size

background-size用于設(shè)置背景圖片的大小

length 設(shè)置背景圖像的高度和寬度。
percentage 以父元素的百分比來設(shè)置背景圖像的寬度和高度灰伟。
cover 把背景圖像擴(kuò)展至足夠大拆又，以使背景圖像完全覆蓋背景區(qū)域。
contain 把圖像圖像擴(kuò)展至最大尺寸栏账，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域帖族。

/*設(shè)置寬,高*/
background-size: 50px 100px;
    
/* 設(shè)置高度,寬度自動(dòng)*/
background-size: auto 100px;
    
/* 設(shè)置寬度,高度自動(dòng)*/
background-size: 100px auto;

background-position

background-position用于設(shè)置背景圖片在水平、垂直方向上的具體位置

水平方向還可以設(shè)值：left挡爵、center竖般、right
垂直方向還可以設(shè)值：top、center茶鹃、bottom

如果只設(shè)置了1個(gè)方向涣雕，另一個(gè)方向默認(rèn)是center

比如background-position: 80px; 等價(jià)于 background-position: 80px center;

background-position: 10px 10px;

background-origin

背景圖片定位位置屬性,專門用于指定從哪個(gè)區(qū)域開始顯示背景圖片默認(rèn)從padding開始顯示背景圖片

位置屬性

padding-box 默認(rèn),顯示在padding內(nèi)
content-box 顯示在content內(nèi)
border-box 從 border 開始展示

image.png

background-clip

背景繪制屬性是專門用來設(shè)置背景繪制區(qū)域的在區(qū)域之外的東西背景都不顯示是

繪制屬性

padding-box 規(guī)定背景從padding開始繪制
border-box(默認(rèn)) 背景從border開始繪制
content-box 背景從content開始繪制

Sprite

什么是CSS Sprite

是一種CSS圖像合成技術(shù)，將各種小圖片合并到一張圖片上闭翩，然后利用CSS的背景定位來顯示對應(yīng)的圖片部分;有人翻譯為：CSS雪碧挣郭、CSS精靈

使用CSS Sprite的好處

減少網(wǎng)頁的http請求數(shù)量，加快網(wǎng)頁響應(yīng)速度疗韵，減輕服務(wù)器壓力
減小圖片總大小
解決了圖片命名的困擾兑障，只需要針對一張集合的圖片命名
更換風(fēng)格方便，只需要在少數(shù)張圖片上修改圖片的顏色或樣式蕉汪，整個(gè)網(wǎng)頁的風(fēng)格就可以改變

background-attachment

background-attachment可以設(shè)置以下3個(gè)值

scroll：背景圖片跟隨元素一起滾動(dòng)（默認(rèn)值）
local：背景圖片跟隨元素以及元素內(nèi)容一起滾動(dòng)
fixed：背景圖片相對于瀏覽器窗口固定

background-color

背景顏色

background-color: #223355

background

background是一系列背景相關(guān)屬性的簡寫屬性流译，常用格式是

image position/size repeat attachment color

background-size可以省略，如果不省略肤无，/background-size必須緊跟在background-position的后面,其他屬性也都可以省略先蒋，而且順序任意

cursor

cursor可以設(shè)置鼠標(biāo)指針（光標(biāo)）在元素上面時(shí)的顯示樣式

cursor常見的設(shè)值有

auto：瀏覽器根據(jù)上下文決定指針的顯示樣式骇钦，比如根據(jù)文本和非文本切換指針樣式
default：由操作系統(tǒng)決定宛渐，一般就是一個(gè)小箭頭
pointer：一只小手，鼠標(biāo)指針挪動(dòng)到鏈接上面默認(rèn)就是這個(gè)樣式
text：一條豎線，鼠標(biāo)指針挪動(dòng)到文本輸入框上面默認(rèn)就是這個(gè)樣式
none：沒有任何指針顯示在元素上面

cursor除了可以設(shè)置系統(tǒng)自帶的一些值以外窥翩，還可以設(shè)置圖片

image.png

url( )后面的2個(gè)數(shù)字

分別代表圖片在水平业岁、垂直方向上的偏移，不能設(shè)置負(fù)數(shù)
0和0代表圖片左上角和指針是重疊的寇蚊，數(shù)值變大笔时，圖片左上角會(huì)朝著指針左上角方向偏移
如果水平、垂直分別設(shè)置為圖片寬高的一半仗岸，圖片的中心點(diǎn)將和指針重疊

如果圖片找不到允耿，就會(huì)使用pointer作為cursor的值

div:hover {
/*cursor: pointer;*/
cursor: url("images/heart.gif") 10 10, pointer;
}

盒子模型

盒子模型介紹

HTML中的每一個(gè)元素都可以看做是一個(gè)盒子，如右下圖所示扒怖，可以具備這4個(gè)屬性

內(nèi)容（content）
盒子里面裝的東西
內(nèi)邊距（padding）
怕盒子里裝的東西損壞而添加的泡沫或者其它抗震的輔料
邊框（border）
就是盒子的邊框较锡，比如木盒子四周的木板
外邊距（margin）
為了方便取出，盒子之間保留一定的空隙

image.png

上下margin傳遞

margin-top傳遞

如果塊級元素的頂部線和塊級父元素的頂部線重疊盗痒，那么這個(gè)塊級元素的margin-top值會(huì)傳遞給父元素

margin-bottom傳遞

如果塊級元素的底部線和塊級父元素的底部線重疊蚂蕴，并且父元素的高度是auto，那么這個(gè)塊級元素的margin-bottom值會(huì)傳遞給父元素

如何防止出現(xiàn)傳遞問題俯邓？

給父元素設(shè)置padding-top\padding-bottom
給父元素設(shè)置border
給父元素或者子元素設(shè)置display: inline-block
以后理解得更深入骡楼，還會(huì)學(xué)到其他解決方法

建議

margin一般是用來設(shè)置兄弟元素之間的間距
padding一般是用來設(shè)置父子元素之間的間距

上下margin折疊

垂直方向上相鄰的2個(gè)margin（margin-top、margin-bottom）有可能會(huì)合并為1個(gè)margin稽鞭，這種現(xiàn)象叫做collapse（折疊）

水平方向上的margin（margin-left鸟整、margin-right）永遠(yuǎn)不會(huì)collapse

如何防止margin collapse？

只設(shè)置其中一個(gè)元素的margin
條件允許的話朦蕴，使用padding取代margin

border（邊框）

邊框?qū)挾?/p>

border-top-width吃嘿、border-right-width、border-bottom-width梦重、border-left-width
border-width是上面4個(gè)屬性的簡寫屬性

邊框顏色

border-top-color兑燥、border-right-color、border-bottom-color琴拧、border-left-color
border-color是上面4個(gè)屬性的簡寫屬性

邊框樣式

border-top-style降瞳、border-right-style、border-bottom-style蚓胸、border-left-style
border-style是上面4個(gè)屬性的簡寫屬性

image.png

box-shadow 陰影

box-shadow屬性可以設(shè)置一個(gè)或者多個(gè)陰影

image.png

text-shadow 文字陰影

text-shadow用法類似于box-shadow挣饥，用于給文字添加陰影效果
text-shadow同樣適用于::first-line、::first-letter

box-sizing

box-sizing用來設(shè)置盒子模型中寬高的行為

content-box

padding沛膳、border都布置在width扔枫、height外邊

border-box

padding、border都布置在width锹安、height里邊

列表

列表相關(guān)的CSS屬性

列表相關(guān)的常見CSS屬性有4個(gè)：

list-style-type短荐、
list-style-image倚舀、
list-style-position、
list-style

list-style-type：設(shè)置li元素前面標(biāo)記的樣式
- disc（實(shí)心圓）忍宋、circle（空心圓）痕貌、square（實(shí)心方塊）
- decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫羅馬數(shù)字）糠排、upper-roman（大寫羅馬數(shù)字）
- lower-alpha（小寫英文字母）舵稠、upper-alpha（大寫英文字母）
- none（什么也沒有）

list-style-image：設(shè)置某張圖片為li元素前面的標(biāo)記，會(huì)覆蓋list-style-type的設(shè)置
list-style-position：設(shè)置li元素前面標(biāo)記的位置入宦，可以取outside哺徊、inside2個(gè)值
list-style：是list-style-type、list-style-image乾闰、list-style-position的縮寫屬性
list-style: outside url("images/dot.png");
一般最常用的還是設(shè)置為none唉工，去掉li元素前面的默認(rèn)標(biāo)記 list-style: none;

表格

顯示

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

根據(jù)元素的顯示類型汹忠，HTML元素可以主要分為2大類

塊級元素（block-level elements）
獨(dú)占父元素一行
比如div淋硝、p、pre宽菜、h1~h6谣膳、ul、ol铅乡、li继谚、dl、dt阵幸、dd花履、table、form挚赊、article诡壁、aside、footer荠割、header妹卿、hgroup、main蔑鹦、nav夺克、section、blockquote嚎朽、hr等
行內(nèi)級元素（inline-level elements）
多個(gè)行內(nèi)級元素可以在父元素的同一行中顯示
比如a铺纽、img、span哟忍、strong狡门、code陷寝、iframe、label融撞、input、button粗蔚、canvas尝偎、embed、object鹏控、 video致扯、audio等

替換、非替換元素

根據(jù)元素的內(nèi)容類型当辐，HTML元素可以主要分為2大類

替換元素（replaced elements）
元素本身沒有實(shí)際內(nèi)容抖僵，瀏覽器根據(jù)元素的類型和屬性，來決定元素的具體顯示內(nèi)容
比如img缘揪、input耍群、iframe、video找筝、embed蹈垢、canvas、audio袖裕、object等
非替換元素（non-replaced elements）
和替換元素相反曹抬，元素本身是有實(shí)際內(nèi)容的，瀏覽器會(huì)直接將其內(nèi)容顯示出來急鳄，而不需要根據(jù)元素類型和屬性來判斷到底顯示什么內(nèi)容
比如div谤民、p、pre疾宏、h1~h6张足、ul、ol坎藐、li兢榨、dl、dt顺饮、dd吵聪、table、form兼雄、article吟逝、aside、footer赦肋、header块攒、hgroup励稳、main、nav囱井、section驹尼、blockquote、hr庞呕、a新翎、strong、span住练、code地啰、label等

元素的分類總結(jié)

image.png

CSS屬性 - display

CSS中有個(gè)display屬性，能修改元素的顯示類型讲逛，有4個(gè)常用值

block：讓元素顯示為塊級元素
inline：讓元素顯示為行內(nèi)級元素
none：隱藏元素
inline-block：讓元素同時(shí)具備行內(nèi)級亏吝、塊級元素的特征

inline-block

可以讓元素同時(shí)具備塊級、行內(nèi)級元素的特征
跟其他行內(nèi)級元素在同一行顯示
可以隨意設(shè)置寬高
寬高默認(rèn)由內(nèi)容決定

CSS屬性 - visibility

visibility盏混，能控制元素的可見性蔚鸥，有2個(gè)常用值

visible：顯示元素
hidden：隱藏元素

CSS屬性 - overflow

overflow用于控制內(nèi)容溢出時(shí)的行為

visible：溢出的內(nèi)容照樣可見
hidden：溢出的內(nèi)容直接裁剪
scroll：溢出的內(nèi)容被裁剪，但可以通過滾動(dòng)機(jī)制查看
會(huì)一直顯示滾動(dòng)條區(qū)域许赃，滾動(dòng)條區(qū)域占用的空間屬于width株茶、height
auto：自動(dòng)根據(jù)內(nèi)容是否溢出來決定是否提供滾動(dòng)機(jī)制
還有overflow-x、overflow-y兩個(gè)屬性图焰，可以分別設(shè)置水平垂直方向
（建議還是直接使用overflow启盛，因?yàn)槟壳皁verflow-x、overflow-y還沒有成為標(biāo)準(zhǔn)技羔，瀏覽器可能不支持）

定位

在CSS中僵闯，有3種常用的方法對元素進(jìn)行定位、布局

normal flow：標(biāo)準(zhǔn)流藤滥、常規(guī)流鳖粟、文檔流
absolute positioning：絕對定位
float：浮動(dòng)

position

利用position可以對元素進(jìn)行定位，常用取值有4個(gè)

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

static

默認(rèn)定位,不寫默認(rèn)

relative

相對定位,元素按照normal flow布局

可以通過left拙绊、right向图、top、bottom進(jìn)行定位

定位參照對象是元素自己原來的位置

left标沪、right榄攀、top、bottom用來設(shè)置元素的具體位置金句，對元素的作用如下圖所示

image.png

相對定位的應(yīng)用場景

在不影響其他元素位置的前提下檩赢，對當(dāng)前元素位置進(jìn)行微調(diào)

absolute

絕對定位, 元素脫離normal flow（脫離標(biāo)準(zhǔn)流、脫標(biāo)）

可以通過left违寞、right贞瞒、top偶房、bottom進(jìn)行定位

定位參照對象是最鄰近的定位祖先元素
如果找不到這樣的祖先元素，參照對象是視口

定位元素（positioned element）

position值不為static的元素
也就是position值為relative军浆、absolute棕洋、fixed的元素

fixed

固定定位,元素脫離normal flow（脫離標(biāo)準(zhǔn)流、脫標(biāo)）

可以通過left乒融、right掰盘、top、bottom進(jìn)行定位
定位參照對象是視口（viewport）
當(dāng)畫布滾動(dòng)時(shí)簇抵，固定不動(dòng)

z-index

z-index屬性用來設(shè)置定位元素的層疊順序（僅對定位元素有效）
取值可以是正整數(shù)庆杜、負(fù)整數(shù)射众、0

float：浮動(dòng)

絕對定位碟摆、浮動(dòng)都會(huì)讓元素脫離標(biāo)準(zhǔn)流，以達(dá)到靈活布局的效果

可以通過float屬性讓元素產(chǎn)生浮動(dòng)效果叨橱，float的常用取值

none：不浮動(dòng)典蜕，默認(rèn)值
left：向左浮動(dòng)
right：向右浮動(dòng)

clear

clear的常用取值

left：要求元素的頂部低于之前生成的所有左浮動(dòng)元素的底部
right：要求元素的頂部低于之前生成的所有右浮動(dòng)元素的底部
both：要求元素的頂部低于之前生成的所有浮動(dòng)元素的底部
none：默認(rèn)值，無特殊要求
一般就只用在非浮動(dòng)元素上罗洗，可以讓非浮動(dòng)元素與浮動(dòng)元素不層疊

解決坍塌問題

.container::after {
    content: "";
    clear: both;
    display: block;    
}

定位方案對比

image.png

過渡(transition)

過渡可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下愉舔，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

過渡三要素

必須有屬性發(fā)生改變
必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過渡效果
必須告訴系統(tǒng)過渡持續(xù)時(shí)長

transition屬性

transition-property 設(shè)置要過渡的屬性
transition-duration 過渡時(shí)間
transition-delay 延遲時(shí)間
transition-timing-function 規(guī)定動(dòng)畫的速度
- linear 規(guī)定以相同速度開始至結(jié)束的過渡效果
- ease 規(guī)定慢速開始伙菜，然后變快轩缤，然后慢速結(jié)束的過渡效果
- ease-in 規(guī)定以慢速開始的過渡效果
- ease-out 規(guī)定以慢速結(jié)束的過渡效果
- ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果
transition 簡寫
- transition: property duration timing-function delay;

// 一個(gè)簡單的過渡效果
.contrainer {
    width: 600px;
    height: 300px;
    border: 1px solid black;
}
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transition: all 1s ease-in-out 1s;
}
.contrainer:hover .box{
    margin-left: 200px;
}

2D 轉(zhuǎn)換

通過 CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動(dòng)贩绕、縮放火的、轉(zhuǎn)動(dòng)、拉長或拉伸淑倾。

常用屬性

平移
- transform: translate(水平方向,垂直方向);
- 具體的像素
縮放
- transform: scale(水平方向,垂直方向);
- 默認(rèn)比例 1.0 如果比1.0大代表放大如果比1.0 小代表縮小
旋轉(zhuǎn)
- transform: rotate(45deg);
- 單位角度deg ; 默認(rèn)是順時(shí)針 ; 如果想逆時(shí)針旋轉(zhuǎn)直接傳入負(fù)值
旋轉(zhuǎn)軸向
- transform: rotateZ(10deg) Z軸旋轉(zhuǎn)
- transform: rotateY(10deg) Y軸旋轉(zhuǎn)
- transform: rotateX(10deg) X軸旋轉(zhuǎn)
- perspective 透視效果 ,近大遠(yuǎn)小, 要想讓子元素有透視效果必須把perspective添加到父元素身上,值越大透視效果越明顯
形變中心點(diǎn)
- 用于設(shè)置旋轉(zhuǎn)中心點(diǎn)
- transform-origin: 水平方向垂直方向;
- transform-origin: 0px 0px;
- transform-origin: 200px 0px;
- transform-origin: 50% 50%;
- transform-origin: left top;

綜合
- transform: translate(100px,0) scale(1.5) rotate(45deg);
skew 傾斜轉(zhuǎn)換
matrix

image.png

.box li:nth-child(1) {
    // 平移
   transform: translate(100px, 0);
}
.box li:nth-child(2) {
    // 縮放
    transform: scale(1.5, 1.5);
}
.box li:nth-child(3) {
    // 旋轉(zhuǎn)
    transform: rotate(45deg);
}
.box li:nth-child(4) {
    // 綜合
    transform: translate(-100px, 0) scale(1.2) rotate(-45deg);
}

3D 轉(zhuǎn)換

3D 通過 rotateX(),rotateY(),rotateZ()等屬性實(shí)現(xiàn)3D效果,默認(rèn)情況系統(tǒng)都是2D的,想看到某個(gè)元素的3d效果,只需要給他的父元素添加一個(gè)transform-style屬性,然后設(shè)置為preserve-3d屬性即可

3D 常用屬性

transform-style: preserve-3d; 需要設(shè)置在父元素中,保證其子元素3D 展示

.box {
    transform-style: preserve-3d;
    animation: y_3d 5s linear infinite;
}
    
.sub {  
    transform: rotateY(90deg);
}

@keyframes y_3d {
    from{
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

動(dòng)畫

通過 CSS3馏鹤，我們能夠創(chuàng)建動(dòng)畫，這可以在許多網(wǎng)頁中取代動(dòng)畫圖片娇哆、Flash 動(dòng)畫以及 JavaScript湃累。

動(dòng)畫三要素

告訴系統(tǒng)要執(zhí)行那個(gè)動(dòng)畫
實(shí)現(xiàn)這個(gè)動(dòng)畫
告訴系統(tǒng)動(dòng)畫執(zhí)行時(shí)長

動(dòng)畫常用屬性

animation-name 動(dòng)畫名字
animation-duration 動(dòng)畫執(zhí)行時(shí)長
animation-delay 動(dòng)畫延遲
animation-timing-function 動(dòng)畫效果
animation-direction 動(dòng)畫是否往返
animation-iteration-count 動(dòng)畫執(zhí)行次數(shù)
animation-play-state 動(dòng)畫狀態(tài),暫停或者執(zhí)行
animation-fill-mode
- forwards 當(dāng)動(dòng)畫完成后碍讨，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）治力。
- backwards 在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前勃黍，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）琴许。
- both 向前和向后填充模式都被應(yīng)用。
動(dòng)畫屬性連寫
- animation: name duration timing-function delay iteration-count direction;
- animation: 動(dòng)畫的名稱動(dòng)畫執(zhí)行時(shí)長動(dòng)畫運(yùn)動(dòng)曲線動(dòng)畫延遲動(dòng)畫執(zhí)行次數(shù) 動(dòng)畫是否往返播放

image.png

@keyframes 動(dòng)畫實(shí)現(xiàn)

方式一,一個(gè)點(diǎn)到另外一個(gè)點(diǎn)

@keyframes move {
    from {
        left: 0;
    }
    to{
        left: 300px;
    }
}

方式二,多點(diǎn)動(dòng)畫,可以設(shè)置多個(gè)路徑

@keyframes move {
    0%{
        top: 0;
        left: 0;
    }
    25%{
        top: 0;
        left: 300px;
    }
    50%{
        top: 300px;
        left: 300px;
    }
    75%{
        top: 300px;
        left: 0;
    }
    100%{
        top: 0;
        left: 0;
    }
}

CSS繼承

什么是繼承?

CSS中有些屬性是可繼承的溉躲，何為屬性的繼承榜田？

一個(gè)元素如果沒有設(shè)置某屬性的值益兄，就會(huì)跟隨父元素的值
當(dāng)然，一個(gè)元素如果有設(shè)置某屬性的值箭券，就使用自己設(shè)置的值

比如color净捅、font-size等屬性都是可以繼承的
不能繼承的屬性，一般可以使用inherit值強(qiáng)制繼承

CSS屬性的優(yōu)先級

按照經(jīng)驗(yàn)辩块，為了方便比較CSS屬性的優(yōu)先級蛔六，可以給CSS屬性所處的環(huán)境定義一個(gè)權(quán)值（權(quán)重）

!important：10000
內(nèi)聯(lián)樣式：1000
id選擇器：100
類選擇器、屬性選擇器废亭、偽類：10
元素選擇器国章、偽元素：1
通配符：0

選擇器的針對性越強(qiáng)，優(yōu)先級越高

Flex布局

介紹:

彈性布局（flexible box）模塊（目前是w3c候選的推薦）旨在提供一個(gè)更加有效的方式來布置豆村，對齊和分布在容器之間的各項(xiàng)內(nèi)容液兽，即使它們的大小是未知或者動(dòng)態(tài)變化的。

彈性布局的主要思想是讓容器有能力來改變項(xiàng)目的寬度和高度掌动，以填滿可用空間（主要是為了容納所有類型的顯示設(shè)備和屏幕尺寸）的能力四啰。

軸：Flex容器的主軸主要用來配置Flex項(xiàng)目，默認(rèn)是水平方向
側(cè)軸：與主軸垂直的軸稱作側(cè)軸粗恢，默認(rèn)是垂直方向的
方向：默認(rèn)主軸從左向右柑晒，側(cè)軸默認(rèn)從上到下
主軸和側(cè)軸并不是固定不變的，通過flex-direction可以互換眷射。

image.png

屬性介紹

1.display: flex | inline-flex;

display: flex | inline-flex; (適用于父類容器元素上)
flex：將對象作為彈性伸縮盒顯示匙赞。
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示

2.flex

flex子項(xiàng)目在主軸的縮放比例，不指定flex屬性妖碉，則不參與伸縮分配
min-width 最小值 min-width: 280px 最小寬度不能小于 280
max-width: 1280px 最大寬度不能大于 1280

3.flex-direction

flex-direction調(diào)整主軸方向（默認(rèn)為水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列

4.justify-content

justify-content調(diào)整主軸對齊（水平對齊）
子盒子如何在父盒子里面水平對齊

值	描述	白話文
flex-start	默認(rèn)值涌庭。項(xiàng)目位于容器的開頭。	讓子元素從父容器的開頭開始排序但是盒子順序不變
flex-end	項(xiàng)目位于容器的結(jié)尾嗅绸。	讓子元素從父容器的后面開始排序但是盒子順序不變
center	項(xiàng)目位于容器的中心脾猛。	讓子元素在父容器中間顯示
space-between	項(xiàng)目位于各行之間留有空白的容器內(nèi)。	左右的盒子貼近父盒子鱼鸠，中間的平均分布空白間距
space-around	項(xiàng)目位于各行之前猛拴、之間、之后都留有空白的容器內(nèi)蚀狰。	相當(dāng)于給每個(gè)盒子添加了左右margin外邊距

5.align-items調(diào)整側(cè)軸對齊（垂直對齊）

子盒子如何在父盒子里面垂直對齊（單行）

值	描述	白話文
stretch	默認(rèn)值愉昆。項(xiàng)目被拉伸以適應(yīng)容器。	讓子元素的高度拉伸適用父容器（子元素不給高度的前提下)
center	項(xiàng)目位于容器的中心麻蹋。	垂直居中
flex-start	項(xiàng)目位于容器的開頭跛溉。	垂直對齊開始位置上對齊
flex-end	項(xiàng)目位于容器的結(jié)尾。	垂直對齊結(jié)束位置底對齊

6.flex-wrap控制是否換行

當(dāng)我們子盒子內(nèi)容寬度多于父盒子的時(shí)候如何處理

值	描述
nowrap	默認(rèn)值态辛。規(guī)定靈活的項(xiàng)目不拆行或不拆列镰吵。不換行，則收縮（壓縮）顯示強(qiáng)制一行內(nèi)顯示
wrap	規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列趁尼。
wrap-reverse	規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列堪侯，但是以相反的順序嚎尤。

7.flex-flow是flex-direction、flex-wrap的簡寫形式

flex-flow: flex-direction  flex-wrap;

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   這兩句話等價(jià)于下面的這句話*/
flex-flow: column wrap;  /* 兩者的綜合 */

8.align-content堆棧（由flex-wrap產(chǎn)生的獨(dú)立行）多行垂直對齊方式齊

align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進(jìn)行排列伍宦。
必須對父元素設(shè)置自由盒屬性display:flex;芽死，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個(gè)屬性的設(shè)置才會(huì)起作用次洼。

值	描述	測試
stretch	默認(rèn)值关贵。項(xiàng)目被拉伸以適應(yīng)容器。
center	項(xiàng)目位于容器的中心卖毁。
flex-start	項(xiàng)目位于容器的開頭揖曾。
flex-end	項(xiàng)目位于容器的結(jié)尾。
space-between	項(xiàng)目位于各行之間留有空白的容器內(nèi)势篡。
space-around	項(xiàng)目位于各行之前翩肌、之間模暗、之后都留有空白的容器內(nèi)禁悠。

9.order控制子項(xiàng)目的排列順序，正序方式排序兑宇，從小到大

用css 來控制盒子的前后順序碍侦。用order 就可以
用整數(shù)值來定義排列順序，數(shù)值小的排在前面隶糕〈刹可以為負(fù)值。默認(rèn)值是 0

最后編輯于：2019.09.23 15:23:24

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末枚驻，一起剝皮案震驚了整個(gè)濱河市濒旦，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌再登，老刑警劉巖尔邓，帶你破解...
沈念sama閱讀 218,386評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異锉矢，居然都是意外死亡梯嗽，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,142評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門沽损，熙熙樓的掌柜王于貴愁眉苦臉地迎上來灯节，“玉大人，你說我怎么就攤上這事⊙捉” “怎么了卡骂？”我有些...
開封第一講書人閱讀 164,704評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長形入。經(jīng)常有香客問我偿警，道長，這世上最難降的妖魔是什么唯笙？我笑而不...
開封第一講書人閱讀 58,702評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任螟蒸，我火速辦了婚禮，結(jié)果婚禮上崩掘，老公的妹妹穿的比我還像新娘七嫌。我一直安慰自己，他們只是感情好苞慢，可當(dāng)我...
茶點(diǎn)故事閱讀 67,716評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布诵原。她就那樣靜靜地躺著，像睡著了一般挽放。火紅的嫁衣襯著肌膚如雪绍赛。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,573評論 1贊 305
城市分裂傳說
那天辑畦，我揣著相機(jī)與錄音吗蚌，去河邊找鬼。笑死纯出，一個(gè)胖子當(dāng)著我的面吹牛蚯妇，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播暂筝，決...
沈念sama閱讀 40,314評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼箩言，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了焕襟？” 一聲冷哼從身側(cè)響起陨收，我...
開封第一講書人閱讀 39,230評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎鸵赖，沒想到半個(gè)月后务漩，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,680評論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡卫漫，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,873評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年菲饼，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片列赎。...
茶點(diǎn)故事閱讀 39,991評論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡宏悦，死狀恐怖镐确，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情饼煞，我是刑警寧澤源葫，帶...
沈念sama閱讀 35,706評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站砖瞧，受9級特大地震影響息堂，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜块促，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,329評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一荣堰、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧竭翠，春花似錦振坚、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,910評論 0贊 22
一樁弒父案渡八，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至传货，卻和暖如春屎鳍，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背问裕。一陣腳步聲響...
開封第一講書人閱讀 33,038評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工逮壁，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人僻澎。一個(gè)月前我還...
沈念sama閱讀 48,158評論 3贊 370
代替公主和親
正文我出身青樓貌踏，卻偏偏與公主長得像十饥，于是被迫代替她去往敵國和親窟勃。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,941評論 2贊 355

Web開發(fā) | CSS 介紹 & 使用總結(jié) (二)

CSS介紹

HTML和CSS的編寫準(zhǔn)則

CSS樣式表

內(nèi)聯(lián)樣式（inline style）

文檔樣式表（document style sheet）

外部樣式表（external style sheet）

CSS 選擇器

通用選擇器（universal selector）

元素選擇器（type selectors）

id選擇器（id selectors）

類選擇器（class selectors）

屬性選擇器（attribute selectors） - [attr]

后代選擇器（descendant combinator）

子選擇器（child combinators）

相鄰兄弟選擇器（adjacent sibling combinator）

全體兄弟選擇器（general sibling combinator）

選擇器組 - 交集選擇器

選擇器組 - 并集選擇器

偽類（pseudo-classes）

動(dòng)態(tài)偽類（dynamic pseudo-classes）

動(dòng)態(tài)偽類 - :focus

元素狀態(tài)偽類（UI element states pseudo-classes）

結(jié)構(gòu)偽類 （structural pseudo-classes） - :nth-child( )

否定偽類（negation pseudo-class）

偽元素（pseudo-elements）

CSS屬性

常用CSS屬性

文本

color

text-decoration

letter-spacing

word-spacing

text-transform

text-indent

text-align

字體

font-size

font-family

@font-face

font-weight

font-stlye

font-variant

line-height

font

背景

background-image 背景圖片

background-repeat

background-size

background-position

background-origin

background-clip

Sprite

background-attachment

background-color

background

cursor

盒子模型

盒子模型介紹

上下margin傳遞

上下margin折疊

border（邊框）

box-shadow 陰影

text-shadow 文字陰影

box-sizing

列表

表格

顯示

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

替換、非替換元素

元素的分類總結(jié)

CSS屬性 - display

CSS屬性 - visibility

CSS屬性 - overflow

定位

position

static

relative

absolute

fixed

結(jié)構(gòu)偽類（structural pseudo-classes） - :nth-child( )