摘要：站點前端開發文檔原文選擇器原文繼承屬性原文核心模塊原文盒子模型原文背景圖像原文清除浮動原文定位選擇器并集對選擇器進行分組，被分組的選擇器可以分享相同的聲明。用逗號將需要分組的選擇器開分。

站點：前端開發文檔
原文：CSS選擇器
原文：CSS繼承屬性
原文：CSS3核心模塊
原文：CSS盒子模型
原文：CSS背景圖像
原文：CSS清除浮動
原文：CSS定位

并集：對選擇器進行分組，被分組的選擇器可以分享相同的聲明。用逗號將需要分組的選擇器開分。

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

交集：兩種屬性同屬一個元素

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

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

li strong {}

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

h1 > strong {}

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

h1 + p {}

屬性：對帶有指定屬性的HTML元素設置樣式，權重為10

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

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

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

偽類：

:active：被激活的元素

:focus：有鍵盤輸入焦點的元素

:hover：鼠標懸停

:link：未被訪問的鏈接

:visited：已被訪問的鏈接

:first-child：元素的第一個子元素

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

權重：

div（1）

class/類選擇器（10）

id（100）

結構選擇器（新增偽類（面試題））

:not：排除

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

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

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

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

:nth-last-child：倒數第幾個元素

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

:fisrt-of-type：第一個同級兄弟元素

:last-of-type：最后一個同級兄弟元素

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

:last-child：最后一個子元素

:only-child：僅有一個子元素

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

:empty：空內容

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

屬性選擇器

E[attr=val]：

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

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

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

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

E[attr$=val]：以val結尾

目標偽類選擇器

:target()：用來匹配URL指向的目標元素（存在URL指向該匹配元素時，樣式效果才會生效）

偽元素：

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

:first-letter：匹配首字符

:before/:after：DOM元素前后插入額外的內容

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

display: block;：獨占一行

display: inline-block;：不獨占一行

無繼承性的屬性

display：規定元素應該生成的框的類型

文本屬性：

vertical-align：垂直文本對齊

text-decoration：添加文本裝飾

text-shadow：文本陰影效果

white-space：空白符的處理

unicode-bidi：設置文本的方向

盒子模型的屬性：

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

生成內容屬性：

content

counter-reset

counter-increment

輪廓樣式屬性：

outline-style

outline-width

counter-color

outline

有繼承性的屬性

字體系列屬性

font：組合字體

font-family：字體系列

font-weight：字體粗細

font-size：字體尺寸

font-style：字體風格

font-variant：小寫字母轉換為大寫，字體尺寸更小

font-stretch：對當前font-family進行伸縮變形。所有主流瀏覽器不支持。

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

文本系列屬性

text-indent：文本縮進

text-align：文本水平對齊

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

生成內容屬性：quotes

光標屬性：cursor

頁面樣式屬性

page

page-break-inside

windows

orphans

過渡動畫

transition：過渡動畫

transition-property：過渡屬性 all[attr]

transition-duration：過渡時間

transition-delay：延遲時間

transition-timing-function：運行類型

ease：（逐漸變慢）默認值

linear：勻速

ease-in：加速

ease-out：減速

cubic-bezier：貝塞爾曲線

過渡動畫效果思考步驟：

找到過渡屬性

找到過渡屬性起始值和結束值

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

2D變換

transform：變形屬性

rotate()：旋轉函數

deg：度數

transform-origin：旋轉的基點

skew()：傾斜函數

skewX()

skewY()

scale()：縮放函數 默認值是1

scaleX()

scaleY()

translate()：位移函數

translateX()

translateY()

animation-聲明關鍵幀

關鍵幀——@keyframes

類似于flash

定義動畫在每個階段的樣式，即幀動畫

關鍵幀的時間單位

數字：0%、25%、100%等（設置某個時間段內任意時間點的樣式）

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

格式

@keyframes：動畫名稱

{動畫狀態}

animation-調用動畫

必要屬性

animation-name：動畫名稱（關鍵幀名稱）

animation-duration：動畫執行時間

可選屬性：

animation-timing-function

linear：勻速

ease：緩沖

ease-in：由慢到快

ease-out：由快到慢

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

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

animation-delay：動畫延遲

animation-iteration-count：重復次數

animation-direction：動畫運行的方向 normal|reverse|alternate|alternate-reverse

animation-play-state：動畫狀態 running|paused

animation-fill-mode：動畫結束后的狀態 none|forwards|backwards|both

3D變換

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

perspective：景深效果

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

transform：新增函數

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個數字/1-4個數字

水平半徑/垂直半徑

四個數字方向分別是左上 右上 右下 左下

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

border-radius: 10px/5px;

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

例子：圓 橢圓 半圓 扇形

線性漸變 linear-gradient

linear-gradient：（[<起點>||<角度>,]?<點>,<點>...）

只能用在背景上

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

參數

起點：開始漸變方向

角度：開始漸變角度

點：漸變點的顏色和位置

重復線性漸變

徑向漸變 radial-gradient

radial-gradient

從“一點”向多個方向顏色漸變

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

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

closet-side：最左邊

farthest-side：最遠邊

closet-corner：最近角

farthest-corner：最遠角（默認值）

position：關鍵詞|數值|百分比

重復的徑向漸變

背景

background-origin

padding-box：從padding區域顯示

border-box：從border區域顯示

content-box：從content區域顯示

background-clip

padding-box：從padding區域向外裁剪

border- box：從border區域向外裁剪

content-box：從content區域向外裁剪

text：文本裁剪

background-size

100% 100%：百分比

10px 10px：數值

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

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

background-attachment

背景圖片是滾動/固定 fixed(固定的) 默認是滾動的

盒子陰影

box-shadow：h v blur spread color inset;

h：水平方向偏移

v：垂直方向偏移

blur：模糊半徑

spread：擴展半徑

color：顏色

inset：內陰影，默認是外陰影

文本陰影

text-shadow：x y blur color

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

多層陰影制作文字立體效果，設置多種顏色，中間以逗號隔開

文字添加邊框

text-stroke：2px blue

通過設定1px的透明邊框，可以讓文字變得平滑

顏色設成透明能夠創建鏤空字體

濾鏡

-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);：色相（按照色相環旋轉，順時針方向）（紅-橙-黃-黃綠-綠-藍綠-藍-藍紫-紫-紫紅-紅）此處為疊加黃色濾鏡

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

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

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

遮罩

mask-image：

mask-position：

mask-repeat：

border邊框

三角形箭頭：

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

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

三角形：

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

margin邊距

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

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

解決margin的兼容性問題：

float: left;

overflow: hidden;

padding-top: 0/1px;

border-top: 1px solid transparent;

background背景

主要屬性：

background-color：背景顏色，簡寫background

不能繼承，默認是transparent

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

background-image：背景圖片

url：圖片URL地址

node：默認值 背景上未放置圖片

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

一個元素可以引入多張背景圖片；

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

屬性不能繼承

background-repeat：背景重復

默認重復background-image的垂直和水平方向

repeat 默認

repeat-x 只有水平位置重復

repear-y 只有垂直位置重復

no-repeat 不重復

inherit 從父元素繼承

background-position：背景定位

設置背景圖片的起始位置

x、y 水平位置，垂直位置。左上角是0。單位（px，關鍵字，百分數）

關鍵字成對出現left right top bottom center，僅指定一個關鍵字，其他值將會是center

只設定x軸方向，默認y軸為center

inherit 從父元素繼承

background-attachment：背景關聯

設置背景圖片固定或隨頁面的其余部分滾動

scroll 默認

fixed 固定

inherit 從父元素繼承

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

長度值指定圖像大小。不允許負值

百分比指定圖像大小。不允許負值

auto 圖像的真實大小

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

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

background-origin：設置背景圖像的參考原點（位置）

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

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

content-box：從content區域開始顯示背景

background-clip：設置對象的背景圖像向外裁剪的區域

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

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

content-box：從content區域開始向外裁剪背景

text：從前景內容的形狀（比如文字）作為裁剪區向外裁剪，實現使用背景作為填充色之類的遮罩效果。

雪碧圖：background-position: x y

overflow: hidden

overflow溢出隱藏

清除浮動

解決margin-top的傳遞問題

（面試題）：

單行文本出現省略號（4個必備條件，缺一不可）

width 寬度（不寫寬度，默認繼承父元素寬度）

overflow: hidden;（溢出隱藏）

white-space: nowrap;

text-overflow: ellipsis;文字隱藏的方式，以省略號的方式隱藏

多行文本出現省略號（必備條件，主要應用在移動端）

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

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

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

overflow: hidden;溢出隱藏

多個元素在一行顯示的方法

display: inline;

display: inline-block;

float: left/right;

display: inline-block;元素的特點

盒子橫向排列

verticle-align屬性會影響inline-block元素，值可能會設為top

需要設置每一列的寬度

如果HTML源碼中元素間有空格，列與列之間會產生空隙

解決方法：

如果元素添加了dispay: inline-block;，父元素增加一個屬性font-size: 0;，同時在元素本身增加font-size屬性進行覆蓋

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

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

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

直接讓塊元素設置為內聯對象（設置屬性 display: inline;），然后觸發塊元素的layout（如：zoom: 1;等）。

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

float元素的特點

在一行顯示

設置屬性值為left時，浮動元素依次從父級盒子的左側向右排列

自動具有塊級元素的屬性，不需要添加display: block;

脫離文檔流

子元素不會繼承浮動屬性

浮動元素下面的元素不能識別浮動元素的高度和位置，占據浮動元素的位置

所有的元素都可以使用浮動屬性

文檔流和脫離文檔流

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

每個非浮動元素塊級元素獨占一行，浮動元素按規則浮在行的一端。當前行容量滿則另起一行浮動。

內聯元素不會獨占一行

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

標準文檔流等級：分為兩個等級，塊級元素和行內元素

脫離文檔流：文檔流內的正常元素識別不到這個元素（脫離文檔流的元素相當于平行漂浮于文檔流之上）

float元素產生的影響

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

父元素設置內邊距屬性padding不會被撐開

父元素設置邊框屬性border不會被撐開

清除浮動的方法

給浮動元素的父級元素添加固定的高度height（不推薦）

給浮動元素的父級元素添加溢出隱藏屬性overflow: hidden;；

給最后一個浮動元素后面添加一個塊級元素，這個塊級元素帶有clear: both;屬性

clear清除浮動元素對文檔流內元素的影響（可以讓文檔流內的元素識別到浮動元素的高度）

left清除float為left的影響

right清除float為right的影響

both清除float所有的影響

inherit從父級元素上繼承該屬性值

clearfix清除浮動（固定代碼）

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

display: block;確保元素是一個塊級元素

clear: both;不允許左右兩邊有浮動對象

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

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

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

font-size: 0; 字體大小

overflow: hidden; 溢出隱藏

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

overflow: hidden;和visibility: hidden;有什么區別？

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

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

display: none; 隱藏

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

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

clear: both;的特點

元素需要是塊級元素

元素不能帶有浮動屬性

元素必須放在最后一個浮動元素的后面

相對定位-position: relative;

沒有脫離文檔流

參照物是元素本身位置

當top和bottom同時有值的情況下，top值生效，支持負值

當left和right同時有值的情況下，left值生效，支持負值

任何元素都可以設置相對定位屬性

相對定位元素位移發生改變，但元素原來的位置還會被占用，其他元素還是正常識別這個元素原來的位置

絕對定位-position: absolute;

脫離文檔流

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

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

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

可以設置層級關系z-index屬性，必須要和定位元素（絕對，相對，固定）同時使用，才會起作用。

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

絕對定位一定要設置相對參照物

固定定位-position: fixed;

脫離文檔流

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

任何元素都可以設置固定定位

可設置top/bottom/left/right四個方位

可通過z-index改變層級

z-index屬性的特點

默認是書寫順序在后的定位元素覆蓋順序在前的定位元素

可以使用z-index屬性修改定位元素的層級關系

所有定位元素的z-index默認值都一樣

z-index值是數字沒有單位，支持負數

一般都是同級元素進行層級的比較

當參照物是相對定位或絕對定位的時候，父級元素之間沒有z-index值，子元素的z-index值進行比較