摘要：站點(diǎn)前端開發(fā)文檔原文選擇器原文繼承屬性原文核心模塊原文盒子模型原文背景圖像原文清除浮動(dòng)原文定位選擇器并集對(duì)選擇器進(jìn)行分組，被分組的選擇器可以分享相同的聲明。用逗號(hào)將需要分組的選擇器開分。

站點(diǎn)：前端開發(fā)文檔
原文：CSS選擇器
原文：CSS繼承屬性
原文：CSS3核心模塊
原文：CSS盒子模型
原文：CSS背景圖像
原文：CSS清除浮動(dòng)
原文：CSS定位

并集：對(duì)選擇器進(jìn)行分組，被分組的選擇器可以分享相同的聲明。用逗號(hào)將需要分組的選擇器開分。

h1,h2,h3,h4,h5,h6{}

交集：兩種屬性同屬一個(gè)元素

p.name{}、p#id{}、.name1.name2{}

后代（派生）：根據(jù)元素在位置上的關(guān)系定義樣式，使用空格隔開，后代選擇器盡量不要超過(guò)3個(gè)，不必把每個(gè)層級(jí)都列出，只需要寫關(guān)鍵點(diǎn)即可

li strong {}

子代：只能選擇作為某元素的子元素，只選擇子代，往后孫子一代不選擇

h1 > strong {}

兄弟和相鄰兄弟：選擇緊接在另一元素后的，并且二者有相同父元素

h1 + p {}

屬性：對(duì)帶有指定屬性的HTML元素設(shè)置樣式，權(quán)重為10

屬性選擇器：為帶有title屬性的所有元素設(shè)置樣式，[title] {}

屬性和值選擇器：為title="name"的所有元素設(shè)置樣式，[title=name] {}

設(shè)置表單的樣式：input[type="text"] {}

偽類：

:active：被激活的元素

:focus：有鍵盤輸入焦點(diǎn)的元素

:hover：鼠標(biāo)懸停

:link：未被訪問(wèn)的鏈接

:visited：已被訪問(wèn)的鏈接

:first-child：元素的第一個(gè)子元素

:lang：帶有指定lang屬性的元素

權(quán)重：

div（1）

class/類選擇器（10）

id（100）

結(jié)構(gòu)選擇器（新增偽類（面試題））

:not：排除

:nth-child(n)：第幾個(gè)元素 從1開始設(shè)置

:nth-child(2n)：偶數(shù)元素 從0開始設(shè)置

:nth-child(2n+1)：奇數(shù)元素

:nth-of-type(n)：某個(gè)元素下同類型的第幾個(gè)元素

:nth-last-child：倒數(shù)第幾個(gè)元素

:first-child->:nth-child(1)：

:fisrt-of-type：第一個(gè)同級(jí)兄弟元素

:last-of-type：最后一個(gè)同級(jí)兄弟元素

:nth-of-type(n)：第幾個(gè)同級(jí)兄弟元素

:last-child：最后一個(gè)子元素

:only-child：僅有一個(gè)子元素

:only-of-type：只有一個(gè)同類型的子元素

:empty：空內(nèi)容

:checked：被選中 主要用在input表單元素

屬性選擇器

E[attr=val]：

E[attr|=val]：只能等于val 或只能以val-開頭

E[attr*=val]：包含val字符串

E[attr~=val]：屬性值有多個(gè)，其中一個(gè)是val

E[attr^=val]：以val開頭

E[attr$=val]：以val結(jié)尾

目標(biāo)偽類選擇器

:target()：用來(lái)匹配URL指向的目標(biāo)元素（存在URL指向該匹配元素時(shí)，樣式效果才會(huì)生效）

偽元素：

:first-line：匹配首行文本，只能用于塊級(jí)元素

:first-letter：匹配首字符

:before/:after：DOM元素前后插入額外的內(nèi)容

遇到偽元素before/after就要加上content=""

display: block;：獨(dú)占一行

display: inline-block;：不獨(dú)占一行

無(wú)繼承性的屬性

display：規(guī)定元素應(yīng)該生成的框的類型

文本屬性：

vertical-align：垂直文本對(duì)齊

text-decoration：添加文本裝飾

text-shadow：文本陰影效果

white-space：空白符的處理

unicode-bidi：設(shè)置文本的方向

盒子模型的屬性：

width、height

margin、margin-top/right/bottom/left

border、border-top/right/bottom/left

border-style、border-top/right/bottom/left-style

border-width、border-top/right/bottom/left-width

border-color、border-top/right/bottom/left-color

padding、padding-top/right/bottom/left

背景屬性：

background

background-color

background-image

background-repeat

background-position

background-attachment

定位屬性：

float

clear

position

top/right/bottom/left

min-width/min-height、max-width/max-height

overflow

clip

z-index

生成內(nèi)容屬性：

content

counter-reset

counter-increment

輪廓樣式屬性：

outline-style

outline-width

counter-color

outline

有繼承性的屬性

字體系列屬性

font：組合字體

font-family：字體系列

font-weight：字體粗細(xì)

font-size：字體尺寸

font-style：字體風(fēng)格

font-variant：小寫字母轉(zhuǎn)換為大寫，字體尺寸更小

font-stretch：對(duì)當(dāng)前font-family進(jìn)行伸縮變形。所有主流瀏覽器不支持。

font-size-adjust：為某個(gè)元素規(guī)定一個(gè)aspect值，保持首選字體的x-height

文本系列屬性

text-indent：文本縮進(jìn)

text-align：文本水平對(duì)齊

line-height：行高

word-spacing：字間距

letter-spacing：字符間距

text-transform：控制文本大小寫

direction：文本書寫方向

color：文本顏色

元素可見性：visibility

表格布局屬性

caption-side

border-collapse

border-spacing

empty-cells

table-layout

列表布局屬性

list-style-type

list-style-image

list-style-position

list-style

生成內(nèi)容屬性：quotes

光標(biāo)屬性：cursor

頁(yè)面樣式屬性

page

page-break-inside

windows

orphans

過(guò)渡動(dòng)畫

transition：過(guò)渡動(dòng)畫

transition-property：過(guò)渡屬性 all[attr]

transition-duration：過(guò)渡時(shí)間

transition-delay：延遲時(shí)間

transition-timing-function：運(yùn)行類型

ease：（逐漸變慢）默認(rèn)值

linear：勻速

ease-in：加速

ease-out：減速

cubic-bezier：貝塞爾曲線

過(guò)渡動(dòng)畫效果思考步驟：

找到過(guò)渡屬性

找到過(guò)渡屬性起始值和結(jié)束值

在合適的位置上增加transition屬性

2D變換

transform：變形屬性

rotate()：旋轉(zhuǎn)函數(shù)

deg：度數(shù)

transform-origin：旋轉(zhuǎn)的基點(diǎn)

skew()：傾斜函數(shù)

skewX()

skewY()

scale()：縮放函數(shù) 默認(rèn)值是1

scaleX()

scaleY()

translate()：位移函數(shù)

translateX()

translateY()

animation-聲明關(guān)鍵幀

關(guān)鍵幀——@keyframes

類似于flash

定義動(dòng)畫在每個(gè)階段的樣式，即幀動(dòng)畫

關(guān)鍵幀的時(shí)間單位

數(shù)字：0%、25%、100%等（設(shè)置某個(gè)時(shí)間段內(nèi)任意時(shí)間點(diǎn)的樣式）

字符：from(0%)、to(100%)：

格式

@keyframes：動(dòng)畫名稱

{動(dòng)畫狀態(tài)}

animation-調(diào)用動(dòng)畫

必要屬性

animation-name：動(dòng)畫名稱（關(guān)鍵幀名稱）

animation-duration：動(dòng)畫執(zhí)行時(shí)間

可選屬性：

animation-timing-function

linear：勻速

ease：緩沖

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

ease-bezier(num,num,num,num)：特定的貝塞爾曲線類型，4個(gè)數(shù)值需在[0,1]區(qū)間內(nèi)

animation-delay：動(dòng)畫延遲

animation-iteration-count：重復(fù)次數(shù)

animation-direction：動(dòng)畫運(yùn)行的方向 normal|reverse|alternate|alternate-reverse

animation-play-state：動(dòng)畫狀態(tài) running|paused

animation-fill-mode：動(dòng)畫結(jié)束后的狀態(tài) none|forwards|backwards|both

3D變換

transform-style: flat|preserve-3d：3D空間展示

perspective：景深效果

transform: persective(800px)：直接作用在子元素上

transform：新增函數(shù)

translate3d(tx, ty, tz)：translateX() translateY() translateZ()

rotate3d(rx, ry, rz, a)：rotateX() rotateY() rotateZ()

scale3d(sx, sy, sz)：sacleX() sacleY() sacleZ()

圓角 border-radius

border-radius：1-4個(gè)數(shù)字/1-4個(gè)數(shù)字

水平半徑/垂直半徑

四個(gè)數(shù)字方向分別是左上 右上 右下 左下

沒有/則水平半徑和垂直半徑一樣

border-radius: 10px/5px;

border-radius: 60px 40px 30px 30px/30px 20px 10px 5px

例子：圓 橢圓 半圓 扇形

線性漸變 linear-gradient

linear-gradient：（[<起點(diǎn)>||<角度>,]?<點(diǎn)>,<點(diǎn)>...）

只能用在背景上

顏色是沿著一條直線軸變化

參數(shù)

起點(diǎn)：開始漸變方向

角度：開始漸變角度

點(diǎn)：漸變點(diǎn)的顏色和位置

重復(fù)線性漸變

徑向漸變 radial-gradient

radial-gradient

從“一點(diǎn)”向多個(gè)方向顏色漸變

shape形狀：ellipse、circle或設(shè)置水平半徑，垂直半徑

size：漸變的大小，即漸變停止位置：

closet-side：最左邊

farthest-side：最遠(yuǎn)邊

closet-corner：最近角

farthest-corner：最遠(yuǎn)角（默認(rèn)值）

position：關(guān)鍵詞|數(shù)值|百分比

重復(fù)的徑向漸變

背景

background-origin

padding-box：從padding區(qū)域顯示

border-box：從border區(qū)域顯示

content-box：從content區(qū)域顯示

background-clip

padding-box：從padding區(qū)域向外裁剪

border- box：從border區(qū)域向外裁剪

content-box：從content區(qū)域向外裁剪

text：文本裁剪

background-size

100% 100%：百分比

10px 10px：數(shù)值

contain：按原始比例收縮，背景圖顯示完整，但不一定鋪滿整個(gè)容器

cover：按原比例收縮，背景圖可能顯示不完整，但鋪滿整個(gè)容器

background-attachment

背景圖片是滾動(dòng)/固定 fixed(固定的) 默認(rèn)是滾動(dòng)的

盒子陰影

box-shadow：h v blur spread color inset;

h：水平方向偏移

v：垂直方向偏移

blur：模糊半徑

spread：擴(kuò)展半徑

color：顏色

inset：內(nèi)陰影，默認(rèn)是外陰影

文本陰影

text-shadow：x y blur color

x軸偏移 y軸偏移 模糊度 顏色

多層陰影制作文字立體效果，設(shè)置多種顏色，中間以逗號(hào)隔開

文字添加邊框

text-stroke：2px blue

通過(guò)設(shè)定1px的透明邊框，可以讓文字變得平滑

顏色設(shè)成透明能夠創(chuàng)建鏤空字體

濾鏡

-webkit-filter:normal;：正常

-webkit-filter:grayscale(1);：灰度，取值范圍0-1

-webkit-filter:brightness(0);：亮度，取值范圍0-1

-webkit-filter:invert(1);：反色，取值范圍0-1，0為原圖，1為徹底反色

-webkit-filter:sepia(0.5);：疊加褐色，取值范圍0-1

-webkit-filter:hue-rotate(30deg);：色相（按照色相環(huán)旋轉(zhuǎn)，順時(shí)針?lè)较颍t-橙-黃-黃綠-綠-藍(lán)綠-藍(lán)-藍(lán)紫-紫-紫紅-紅）此處為疊加黃色濾鏡

-webkit-filter:saturate(4);：飽和度，取值范圍0-*，0為無(wú)飽和度，1為原圖，值越高，飽和度越大

-webkit-filter:contrast(2);：對(duì)比度，取值范圍0-*，0為無(wú)對(duì)比度（灰色），1為原圖，值越高對(duì)比度越大

-webkit-filter:opacity(0.8);：透明度，取值范圍0-1，0為全透明，1為原圖

遮罩

mask-image：

mask-position：

mask-repeat：

border邊框

三角形箭頭：

正方形的任意相鄰兩條邊，然后旋轉(zhuǎn)一定的角度，得到我們需要的任意方向的箭頭

border、border-width、border-style、border-color

三角形：

border的3個(gè)屬性：border-width/border-style/border-color，寬度和高度都為0，三角形箭頭方向設(shè)定顏色，其余方向顏色設(shè)為透明transparent

margin邊距

margin邊距重疊： 取大值，不是兩者相加之和。

margin-top的傳遞：大盒嵌套小盒，小盒加margin-top值，傳遞到大盒，導(dǎo)致整體下移。

解決margin的兼容性問(wèn)題：

float: left;

overflow: hidden;

padding-top: 0/1px;

border-top: 1px solid transparent;

background背景

主要屬性：

background-color：背景顏色，簡(jiǎn)寫background

不能繼承，默認(rèn)是transparent

inherit 指定背景顏色，從父元素繼承

background-image：背景圖片

url：圖片URL地址

node：默認(rèn)值 背景上未放置圖片

inherit：指定背景圖片從父元素繼承

一個(gè)元素可以引入多張背景圖片；

指定要使用的一個(gè)或多個(gè)背景圖片，默認(rèn)情況下，background-image放置在元素的左上角，并重復(fù)垂直和水平方向

屬性不能繼承

background-repeat：背景重復(fù)

默認(rèn)重復(fù)background-image的垂直和水平方向

repeat 默認(rèn)

repeat-x 只有水平位置重復(fù)

repear-y 只有垂直位置重復(fù)

no-repeat 不重復(fù)

inherit 從父元素繼承

background-position：背景定位

設(shè)置背景圖片的起始位置

x、y 水平位置，垂直位置。左上角是0。單位（px，關(guān)鍵字，百分?jǐn)?shù)）

關(guān)鍵字成對(duì)出現(xiàn)left right top bottom center，僅指定一個(gè)關(guān)鍵字，其他值將會(huì)是center

只設(shè)定x軸方向，默認(rèn)y軸為center

inherit 從父元素繼承

background-attachment：背景關(guān)聯(lián)

設(shè)置背景圖片固定或隨頁(yè)面的其余部分滾動(dòng)

scroll 默認(rèn)

fixed 固定

inherit 從父元素繼承

background-size：背景圖像的尺寸大小

長(zhǎng)度值指定圖像大小。不允許負(fù)值

百分比指定圖像大小。不允許負(fù)值

auto 圖像的真實(shí)大小

cover 將背景圖像等比例縮放到完全覆蓋容器，有可能超出容器

contain 等比例所放到寬/高與容器的寬/高相等，背景圖像始終被包含在容器內(nèi)

background-origin：設(shè)置背景圖像的參考原點(diǎn)（位置）

padding-box：從padding區(qū)域（含padding）開始顯示背景

border-box：從border區(qū)域（含border）開始顯示背景

content-box：從content區(qū)域開始顯示背景

background-clip：設(shè)置對(duì)象的背景圖像向外裁剪的區(qū)域

padding-box：從padding區(qū)域（不含padding）開始向外裁剪背景

border-box：從border區(qū)域（不含border）開始向外裁剪背景

content-box：從content區(qū)域開始向外裁剪背景

text：從前景內(nèi)容的形狀（比如文字）作為裁剪區(qū)向外裁剪，實(shí)現(xiàn)使用背景作為填充色之類的遮罩效果。

雪碧圖：background-position: x y

overflow: hidden

overflow溢出隱藏

清除浮動(dòng)

解決margin-top的傳遞問(wèn)題

（面試題）：

單行文本出現(xiàn)省略號(hào)（4個(gè)必備條件，缺一不可）

width 寬度（不寫寬度，默認(rèn)繼承父元素寬度）

overflow: hidden;（溢出隱藏）

white-space: nowrap;

text-overflow: ellipsis;文字隱藏的方式，以省略號(hào)的方式隱藏

多行文本出現(xiàn)省略號(hào)（必備條件，主要應(yīng)用在移動(dòng)端）

display: -webkit-box; 彈性盒模型

-webkit-box-orient: vertical;規(guī)定元素的排列方式：垂直排列

-webkit-line-clamp: 2;：文字的行數(shù)（自定義）

overflow: hidden;溢出隱藏

多個(gè)元素在一行顯示的方法

display: inline;

display: inline-block;

float: left/right;

display: inline-block;元素的特點(diǎn)

盒子橫向排列

verticle-align屬性會(huì)影響inline-block元素，值可能會(huì)設(shè)為top

需要設(shè)置每一列的寬度

如果HTML源碼中元素間有空格，列與列之間會(huì)產(chǎn)生空隙

解決方法：

如果元素添加了dispay: inline-block;，父元素增加一個(gè)屬性font-size: 0;，同時(shí)在元素本身增加font-size屬性進(jìn)行覆蓋

display:inline-block;在IE6/7下不兼容的解決方法

增加display: inline; zoom: 1;屬性

IE7下塊元素兼容display: inline-block;寫法？

直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象（設(shè)置屬性 display: inline;），然后觸發(fā)塊元素的layout（如：zoom: 1;等）。

兼容各瀏覽器的代碼如下：div {display: inline-block; *display: inline; *zoom: 1;}

float元素的特點(diǎn)

在一行顯示

設(shè)置屬性值為left時(shí)，浮動(dòng)元素依次從父級(jí)盒子的左側(cè)向右排列

自動(dòng)具有塊級(jí)元素的屬性，不需要添加display: block;

脫離文檔流

子元素不會(huì)繼承浮動(dòng)屬性

浮動(dòng)元素下面的元素不能識(shí)別浮動(dòng)元素的高度和位置，占據(jù)浮動(dòng)元素的位置

所有的元素都可以使用浮動(dòng)屬性

文檔流和脫離文檔流

文檔流：元素排版布局過(guò)程中，元素自動(dòng)從左往右，從上往下的流式排列。

每個(gè)非浮動(dòng)元素塊級(jí)元素獨(dú)占一行，浮動(dòng)元素按規(guī)則浮在行的一端。當(dāng)前行容量滿則另起一行浮動(dòng)。

內(nèi)聯(lián)元素不會(huì)獨(dú)占一行

幾乎所有元素（包括塊級(jí)、內(nèi)斂和列表元素）均可生成子行，用于擺放子元素

標(biāo)準(zhǔn)文檔流等級(jí)：分為兩個(gè)等級(jí)，塊級(jí)元素和行內(nèi)元素

脫離文檔流：文檔流內(nèi)的正常元素識(shí)別不到這個(gè)元素（脫離文檔流的元素相當(dāng)于平行漂浮于文檔流之上）

float元素產(chǎn)生的影響

父元素設(shè)置背景顏色background-color不起作用

父元素設(shè)置內(nèi)邊距屬性padding不會(huì)被撐開

父元素設(shè)置邊框?qū)傩?b>border不會(huì)被撐開

清除浮動(dòng)的方法

給浮動(dòng)元素的父級(jí)元素添加固定的高度height（不推薦）

給浮動(dòng)元素的父級(jí)元素添加溢出隱藏屬性overflow: hidden;；

給最后一個(gè)浮動(dòng)元素后面添加一個(gè)塊級(jí)元素，這個(gè)塊級(jí)元素帶有clear: both;屬性

clear清除浮動(dòng)元素對(duì)文檔流內(nèi)元素的影響（可以讓文檔流內(nèi)的元素識(shí)別到浮動(dòng)元素的高度）

left清除float為left的影響

right清除float為right的影響

both清除float所有的影響

inherit從父級(jí)元素上繼承該屬性值

clearfix清除浮動(dòng)（固定代碼）

利用偽元素:after清除浮動(dòng)必備條件，缺一不可

display: block;確保元素是一個(gè)塊級(jí)元素

clear: both;不允許左右兩邊有浮動(dòng)對(duì)象

content: "";偽元素:brfore/:after自帶的屬性，如果不寫，偽元素不起作用

寫全的樣式屬性；不是必備條件

height: 0; 防止在低版本瀏覽器中默認(rèn)height: 1px;的情況，用height: 0;去覆蓋

font-size: 0; 字體大小

overflow: hidden; 溢出隱藏

visibility: hidden; 讓所有可見性的元素隱藏

overflow: hidden;和visibility: hidden;有什么區(qū)別？

（面試題）：如何讓一個(gè)元素消失？

opacity: 0;[0-1] 透明度

display: none; 隱藏

widht/height/line-height + overflow：寬/高/行高 + 溢出隱藏

visibility: hidden;讓所有可見性的元素隱藏

clear: both;的特點(diǎn)

元素需要是塊級(jí)元素

元素不能帶有浮動(dòng)屬性

元素必須放在最后一個(gè)浮動(dòng)元素的后面

相對(duì)定位-position: relative;

沒有脫離文檔流

參照物是元素本身位置

當(dāng)top和bottom同時(shí)有值的情況下，top值生效，支持負(fù)值

當(dāng)left和right同時(shí)有值的情況下，left值生效，支持負(fù)值

任何元素都可以設(shè)置相對(duì)定位屬性

相對(duì)定位元素位移發(fā)生改變，但元素原來(lái)的位置還會(huì)被占用，其他元素還是正常識(shí)別這個(gè)元素原來(lái)的位置

絕對(duì)定位-position: absolute;

脫離文檔流

可以設(shè)置參照物，參照物必須是其父級(jí)元素（直系父級(jí)），如果沒有直接父級(jí)會(huì)一直往上查找直到找到最外層的根元素為止；

有寬度和高度的情況下，top和bottom同時(shí)有值，top生效；left和right同時(shí)有值，left生效。

沒有寬度和高度的情況下，top和bottom同時(shí)設(shè)置值的情況下，會(huì)將這個(gè)盒子拉大，上下值都起作用，左右同理。

可以設(shè)置層級(jí)關(guān)系z-index屬性，必須要和定位元素（絕對(duì)，相對(duì)，固定）同時(shí)使用，才會(huì)起作用。

一個(gè)元素定位在另一個(gè)元素上或者兩個(gè)元素疊加的情況，都可以使用定位（絕對(duì)定位）

絕對(duì)定位一定要設(shè)置相對(duì)參照物

固定定位-position: fixed;

脫離文檔流

參照物是瀏覽器的可視窗口

任何元素都可以設(shè)置固定定位

可設(shè)置top/bottom/left/right四個(gè)方位

可通過(guò)z-index改變層級(jí)

z-index屬性的特點(diǎn)

默認(rèn)是書寫順序在后的定位元素覆蓋順序在前的定位元素

可以使用z-index屬性修改定位元素的層級(jí)關(guān)系

所有定位元素的z-index默認(rèn)值都一樣

z-index值是數(shù)字沒有單位，支持負(fù)數(shù)

一般都是同級(jí)元素進(jìn)行層級(jí)的比較

當(dāng)參照物是相對(duì)定位或絕對(duì)定位的時(shí)候，父級(jí)元素之間沒有z-index值，子元素的z-index值進(jìn)行比較