簡介

CSS （cascading style sheet）層疊樣式表

CSS書寫方式

1. 內嵌式：在head標簽中書寫style標簽。
2. 外鏈式：用link標簽引入.ccs文件

<link rel="stylesheet" type="text/css" href=""/>

3. 行內式：直接寫在標簽的style屬性上。
4. 導入式：在style標簽內寫@import url（）。

<style> 
    @import url(".css"); 
</style>

CSS基本語法

選擇器{ 
    鍵:值; 
}

CSS注釋

/*注釋內容*/

CSS常用單位

CSS選擇器 CSS Selector

標簽選擇器（Tag selector）

直接寫標簽名即可

div{ 
    width:100px;
    height:100px; 
}

類選擇器（Class selector）

用點（句號，full stop）來進行選擇，點類名

.class{ 
    background-color:red; 
}

同一類名鍵值沖突，將使用css書寫上后寫的

id選擇器（ID selector）

用井號 # 來進行選擇，井號id

#id{ 
    font-size:14px; 
}

復合選擇器

偽類選擇器

選擇處于特殊狀態下的元素，例如超鏈接a的4個特殊狀態

遵從“綠哈”(LVHA)順序寫，否則會有偽類不生效。
link→visited→hover→active

以下為css3選擇器，ie可能不兼容

元素關系選擇器

序號選擇器

:first-child 
:last-child 
:nth-child(n)/(an+b)/2n+1 odd/2n even
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)

除了type都不可跨越種類

屬性選擇器

CSS3新增偽類

偽元素

用雙冒號書寫

層疊性和選擇器權重計算

層疊性： 多個選擇器可以同時作用于同一個標簽，效果疊加活覆蓋。
層疊性沖突處理： id權重>class權重>標簽權重
復雜選擇器權重計算：id個數，class個數，標簽個數（x，y，z）
!important提升權重

CSS元素分級：

行元素（display帶inline的元素）和塊元素（display為block的元素）

行元素：

不獨占一行（能并排顯示），設置寬高無效（能寫值但不表現），width和height寫多少，瀏覽器盒子模型就有多少，但沒任何效果
常見inline元素：span、a、strong。

塊元素：

獨占一行（不能并排顯示），能設置寬高等所有盒模型屬性，如果不設置width默認100%。
常見block元素：div、p、ul ol li、h1-h6

行內塊元素：

能并排顯示，能設置寬高。如果不設置，寬和高都由子元素撐起。

如果不在標簽內寫文本，直接寫在body上，會被識別成一段叫#text里寫的字符串。同樣是行內元素。

盒模型

盒模型4大元素：由內到外依次為 content 、pading 、border 、margin。
content：內容區 。
padding：內邊距，content與border之間的距離。
border：邊框。
margin：盒子與盒子之間的距離。
[圖片上傳失敗...(image-7397d6-1649463813126)]
W3C標準盒模型如上圖所示，同時也是瀏覽器顯示的盒模型。
?但是注意，盒子(box)與盒模型(box model)不是一個東西。

content

內容區，可以定義width和height，一般情況下寫width和height指的就是content的寬高。

padding

是盒子的內邊距，padding是四個方向的，只能設置數值。
可以分別用小屬性進行設置：padding-top、padding-right、padding-bottom、padding-left 。
四數值寫法：用四個數值以空格隔開進行設置，分別代表上右下左（從上開始順時針四個方向）。
三數值寫法：上 右 下 （左=右）
二數值寫法：上 右 （下=上、左=右）
一數值寫法：上 （右=上、下=上、左=右）
padding部分會強制繼承content部分的background，如果不想繼承只能采用 backgroud-clip:content-box; 取消。

border

border是盒子邊框，可以設置線寬，線形、線色，也是四個方向的。
border-width：線寬，可以設置數值；
border-style：線形，常見四種：solid 實線、dashed 虛 、dotted 點、double 雙；
border-color：線色。
也有四個方向小屬性：border-top 、border-right 、 border-bottom 、border-right ；也可以用多數值寫法，值法規則與padding一樣。
同時四個方向小屬性每個小屬性還能分出四個方向的線寬，線形，線色，
例如 border-top-width 、border-top-style 、 border-top-color。
無邊框：border值設為none。
如何利用邊框制作三角形：把顏色值設為 transparent 透明色。先設置四邊框透明色，content不設內容（寬高設為0），然后單獨設置一邊邊框顏色即可。

border-radius

border-radius屬性，圓角邊框，只能設置數值。單位通常為像素，值代表圓的半徑；單位也可以取百分值，只有百分值才能設置長方盒子為橢圓。當圓角直徑等于方盒子邊長一半，方盒子就會變為圓。
也有四個方向小屬性（從上開始順時針四個方向）：上左，上右，下右，下左：
border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius 、 border-bottom-left-radius
四值寫法：順時針由上到下。
三值寫法：順時針由上到下，左上和右上和右下（左下=右上）
二值寫法：對角線由上到下，左上和右上（右下=左上、左下=右上）

border-image

margin

margin是盒子外邊距，即盒子與盒子之間的距離。margin也有四個方向。
margin重疊（塌陷、大吞小）：豎直方向的magin會發生重疊現象，小的會塌陷到大的margin中。父子元素也有margin塌陷問題。
塊元素水平居中：將左右margin值設為auto即可，例如： margin: 0 auto;
垂直居中需要使用絕對定位技術。盒子居中是相對于父盒子居中，文字居中是相對于父標簽居中，概念不一樣。

box-sizing屬性

默認值content-box，size屬性是用來設置寬高的，當設置：box-sizing:border-box; 后，width和heigh表示整個盒子大小，即根據border來計算width和height。

box-shadow屬性

寫法： box-shadow: X偏移量 Y偏移量；例如：box-shadow: 1px 3px ;
可選值：模糊度、陰影大小、顏色、內陰影inset。例如：
box-shadow:1px 1px 10px 3px black inset;
表示x軸偏移量1像素，y軸偏移量1像素，陰影大小為10，黑色的內陰影。
可添加多個陰影，用逗號隔開。
內陰影可以做內發光。

block屬性和inline屬性的盒子：

margin設定對inline元素的左右生效，對上下無效。padding對左右生效，對上下僅樣式生效，距離無效。

display屬性：

常用值

將元素隱藏還有另一種方法，使用 visibility:hidden; 也可將元素隱藏，但元素不脫離文檔流，不放棄自己的位置。

浮動與定位與BFC

開啟浮動和絕對定位、固定定位都會使元素脫離文檔流，只要脫離文檔流的元素，就不分inline和block，脫離文檔流的內容一律能設置寬高。脫離文檔流后根據z-index屬性堆疊排序。
z-index屬性：值是一個沒有單位的正整數，數字大的可以壓蓋數值小的。
文檔流：html排版流程(flow)

浮動 float

浮動最初的功能：實現文字環繞圖片。最本質的功能：實現盒子并排。
浮動使用要點：要浮動，并排的所有元素都要設置浮動，父盒子要有足夠寬度，否則盒子會掉下去。
浮動的順序貼靠特性：子盒子會按照元素書寫順序進行貼靠，如果沒有足夠空間，則會尋找再前一個兄弟元素，有空間就可以鉆空子。
如何開啟浮動，元素添加：
float:left; 開啟左浮動，元素序號從左邊開始數。
float:right; 開啟右浮動，元素序號從右邊開始數。
使用浮動實現網頁布局注意事項：

1. 需要垂直排列的盒子，不要設置浮動，只有需要并排顯示的盒子才要設置浮動。
2. 一個浮動盒子的內部盒子還可以繼續浮動。
3. 要實現復雜浮動就不要節約盒子。

定位position

position定位，常見值：relative，absolute，fixed，sticky，static（默認）

static 默認值

默認值，靜態的，定位跟隨文檔流排列的。可以認為是不開啟定位。

relative 相對定位

position:relative;
開啟后盒子相對自己原來的位置進行定位，開啟后根據位置屬性（left，right，top，bottom）偏移量進行位置調整，不脫離文檔流，會在老家留坑。

absolute 絕對定位

position:absolute;
開啟后，盒子會根據離自己最近的一個 開啟定位的祖先元素 進行定位，開啟后根據位置屬性（left，right，top，bottom）偏移量調整位置，會脫離文檔流，釋放位置。
利用絕對定位實現盒子垂直居中：

div{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top: -自己高度的一半; 
    margin-left: -自己寬度的一半;
}

絕對定位用途：用來制作“壓蓋”、“遮罩”效果；用來結合css sprites實現精靈圖使用；用來結合js實現動畫（例如輪播圖）

fixed 固定定位

position:fixed;
開啟后，盒子會根據視口進行定位，不管頁面如何滾動，它永遠固定在那里（只有設定值才生效）。脫離文檔流。

sticky 粘滯定位

position:sticky;
開啟后，設定top,left等值，當盒子到達視口viewport那個位置后會隨著視口移動。

清除浮動 clear

元素浮動后會脫離文檔流，如果不清除浮動將會對布局產生影響。
clear屬性：規定元素的哪一側不受其他浮動元素影響，只有塊元素能使用。
clear:both/left/right; 分別代表左右兩邊都不受，左邊不受影響、右邊不受影響。

清除浮動方法：

1. 給后面的父盒子設置 clear:both;
2. 在兩個盒子之間添加一個帶 clear:both; 的盒子
3. 使用::after偽元素給盒子添加最后一個子元素，并添加 clear:both;
4. 在浮動元素外套一個父盒子，并且父盒子形成BFC。

BFC

box formatting context ，塊級格式化上下文。
開啟后此盒子會變成頁面上一個獨立容器，容器里面的子元素不會影響外面的元素。里面的子元素也不會影響父元素及父元素以外的元素。
比如里面的子元素不能跑出父元素外面。比如解決margin塌陷（僅限父子塌陷）。比如父盒子不會受到子元素浮動造成的父盒子高度塌陷。比如開啟BFC可以阻止被其他浮動元素覆蓋。

如何開啟（形成、創建）BFC

1. 脫離文檔流：開啟浮動，float值不是none。或者開啟position:absolute。
2. display值設為inline-block、flex或者inline-flex或flow-root。
3. 元素設置 overflow:hidden; （overflow:hidden 表示溢出盒子邊框部分隱藏，padding溢出部分還在）
4. 添加clearfix：

.clearfix::before,.clearfix::after{
    content:''; 
    display:table; 
    clear:both; 
}

可同時解決高度塌陷和父子外邊距重疊。

圣杯布局

結構需要是：先center

<div class="contain">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

要點：給contain的三個元素開啟float，然后footer開啟clear。
contain開左右padding。
然后給center width100% ,開padding使得左右空出一段距離。
然后給left開啟 margin-left:-100%; 利用的是“盒子width、height、margin、padding的百分數是按父盒子的content width百分比來算的”
然后在給left做position:relative,right:自身寬度使得往左移就完成了left的設置。
再給right做margin-right為負自己的長度，這個時候right就相當于放棄了自己的長度，且會往上移。

flex布局 display:flex

• 在flex誕生之前，一開始用的是table布局，后被淘汰，后使用 float 和 position 的搭配實現布局，但這兩個屬性并不是為布局而生的。flex是第一個真正意義上為布局而誕生的一套屬性。
• flexible box ， 意為“靈活的、彈性的盒子”，所以flex布局一般也叫做“彈性布局”。
• 通過 display:flex; 或 display: inline-flex; 開啟彈性布局。

display: flex;
//或
display: inline-flex;

• flex 是設置盒子為塊元素彈性盒（獨占一行）， inline-flex 是設置盒子為行內塊元素彈性盒（寬高由內容撐開）
• 開啟 flex 后所有 直接子元素（flex項）強制變為行內塊元素，所有屬性自動帶上 inline ，就算是 flex 也是。

flex 構成內容

• flex 由 flex容器（flex container） 和 flex項（flex item）構成。

flex容器：開啟了彈性布局的元素。
flex項：flex容器內所有直接子元素自動成為 flex 項。

• 默認橫向是主軸main axis，豎向是交叉軸cross axis（副軸）。
• flex 項默認會自動按主軸方向排列。

flex 容器屬性

flex-direction 屬性

• flex-direction 屬性設定主軸的方向（即flex項的排列方向）

flex-wrap 屬性

• flex-wrap屬性定義如果主軸線排不下所有內容如何換行。

flex-flow 屬性

• flex-direction 和 flex-wrap 的組合簡寫屬性，默認值 row nowrap

align-items 屬性

• 多行或列flex項在副軸上，align-content默認值是stretch，每一個flex項都是在 等分線 上開始的。
• align-items 屬性定義多行或列flex項，有等分線存在的情況下，如何進行副軸上的排列

justify-content 屬性

• justify-content 屬性定義 flex項在主軸上的對齊排列方式

align-content 屬性

• align-content 屬性定義 flex項在副軸上的對齊方式，默認值是stretch，更改此屬性值后將無視副軸等分線，所以只有一行時無法使用此屬性的center。

flex項 的屬性

• 改變了默認值即為開啟某項屬性

flex-grow 屬性

• 默認值為0，可設定為其他正整數。
• 開啟此屬性的 flex項 會按設定的數值比例占據 space 。只開啟部分，沒開啟的則不占space。
• 例如：如果所有 flex項的 flex-grow 都為1，著他們將會等分剩余space。如果只開啟一個項的 flex-grow，則這個項不論設為多少都獨占所有space。
• 開啟此屬性后將無視flex項在正軸方向上的長度以及 flex-basis

flex-shrink 屬性

• 默認值為1，可設定為其他正整數。
• 開啟此屬性的 flex項 會按設定的數值比例占據超出的 space；默認值為1即如果flex容器空間不足，所有同級flex項默認一起等比縮小。
• 如果設置為0，則不縮小，負值無效。通常就是用來設為0。

flex-basis 屬性

• 默認值為auto，可設定為其他長度，例如像素長度或百分長度。
• 開啟此屬性的 flex項 即定義在分配 space 之前，flex項占據的主軸方向上的長度。
• 當一個元素同時設置了 flex-basis 和主軸方向上的寬或高，flex-basis 優先級更高。

flex 屬性

是 flex-grow，flex-shrink，flex-basis的復合簡寫，默認值 0 1 auto

order 屬性

定義flex項在flex容器中排列的序號，默認值為0，數值越小，排列越靠前。

align-self 屬性

允許開啟了此屬性的 flex項與其他項有不一樣的對齊方式，會覆蓋align-item屬性。
默認值為auto，表示繼承父元素的align-items屬性值，如果沒有父元素，則等同于stretch。

grid 布局

• grid意為網格、方格的意思，所以grid布局一般稱為“網格布局”
• 通過 display: grid; 或 display: inline-grid; 可以開啟網格布局。
• 成為了grid容器的盒子，column、float、clear、vertical-align 屬性無效，且容器內的直接子元素強制成為 grid 項。

grid構成內容

• grid容器（grid container）、grid項（grid item）、grid line 網格線，grid track 網格軌道、grid cell 網格單元、grid area 網格區域。

新的單位

fr單位：fraction的縮寫，意為“片段”，剩余空間的分配數。
gr單位：網格數（沒有被w3c采納）

grid容器屬性

grid-template-rows 和 grid-template-columns

• grid-template-rows 是設定每個rows軌道的大小以及網格線名字。
• grid-template-columns 是設定每個columns軌道的大小以及網格線名字。

grid-template-rows: [first] 100px [line2] 200px [line3];
grid-template-columns: repeat(5,1fr);

屬性值是：

1. 軌道大小track-size：可以使用css長度，百分比，fr單位數值，auto，repeat() 函數等。
2. 網格線名字line-name：網格線名字可以用中括號里寫名字為網格項命名，一條線可以寫多個名字，用空格隔開，如果沒命名，系統會默認加上數字以及 區域-star，區域-end 的命名。

• 如果grid-template-columns只有一個值，那就只有一列，這列的寬度就是這個值，這列就只有一個grid項，其余grid項會根據grid-auto-flow的默認值強制多行排布。
• 如果grid-template-rows只有一個值，那就只設置第一行的軌道大小，其余都是auto。

grid-template-areas 屬性

• 設定網格區域命名，如果不為區域命名，可以用none。
• 每一行的區域命名，用算雙引號引起來。每一行的區域數都要一樣，否則該屬性不生效。
• 可以用點 . 代表未命名的區域。
• 每個區域必須是矩形，不可十字形，Z字型等。

grid-template 屬性

template 是 模板、樣板 的意思。
grid-template 是 grid-template-rows 和 grid-template-columns 和grid-template-areas 的復合簡寫屬性。
不推薦使用，可讀性差，難維護。

grid-gap（后已改為gap）

gap: 10px 20px;

• 該屬性是 grid-row-gap 和 grid-column-gap 的復合簡寫屬性。
• 第一個值是 grid-row-gap 第二個值是 grid-column-gap。
• 如果只寫一個值，這這個值同時代表 grid-row-gap 和 grid-column-gap。

grid-row-gap 和 grid-column-gap

grid-row-gap: 10px ;

• gap 是空隙的意思，這兩個屬性可以設定網格與網格之間間隙的大小。
• 屬性值為長度，例如10px。
• 只能設定一個值，該grid容器內這個方向所有的gap都是這個值。

grid-auto-flow 屬性

設定如果grid項超出設定的column或row的軌道數，這些超出的grid項如何排布填充放置。
默認值為 row，還有 column、dense（不推薦使用）

grid-auto-rows 和 grid-auto-columns

設置 rows 和 columns 的隱式網格軌道大小。

grid 屬性

是 grid-template 和 grid-auto-flow 和 grid-auto-rows 和 grid-auto-columns 的復合簡寫屬性。

align-items 屬性

設定 grid 項與每個grid區域的垂直方向對齊方式。
屬性值：

1. stretch：默認值，內容寬度占滿整個網格區域空間。
2. start：上端對齊。
3. center：居中對齊。
4. end：下端對齊。

justify-items 屬性

設定 grid項與每個 grid區域的水平方向對齊方式。
屬性值：

1. stretch：默認值，內容寬度占滿整個網格區域空間。
2. start：左端對齊。
3. center：居中對齊。
4. end：右端對齊。

place-items 屬性

align-items 與 justify-items 的復合簡寫屬性，可以分別寫兩個只。
如果只寫一個值則水平方向和垂直方向都一樣。
例如 place-items:center; 即可實現垂直水平都居中。

align-content 和 justify-content

grid 也可以使用 align-content 和 justify-content 。items是內容與容器的對齊方式，content 是容器與父容器的對齊方式。

place-content 屬性

place-content 屬性是 align-content 和 justify-content 的復合簡寫屬性。
align-content 默認值是 stretch，justify-content是 start。

其他知識：grid可用的css函數

1. repeat(); 函數值1為重復的次數，函數值2為要重復的內容，例如 grid-template-row:repeat(7,1fr)
   函數值1可以為整數，也可以是 auto-fill，auto-fit。auto-fill，auto-fit需配合minmax() 使用。
   設定項與容器的大小可以自動計算 auto-fill 與 auto-fit 的值，兩個差別是前者以項為準，后者以容器為準。
2. fit-content(); 將給定大小夾緊為可用大小。
3. minmax(); 定義了一個長度范圍的閉區間，用法 minmax(最小值，最大值)。最小值最大值可以是長度，百分數，fr單位數，或者max-content、min-content、auto。

grid 項屬性

grid-row 和 grid-column

• grid-row 是 grid-row-start 和 grid-row-end 的復合簡寫。
• grid-column 是 grid-column-start 和 grid-column-end 的復合簡寫。
• 屬性值 start/end 用斜杠隔開。

grid-row: first / span 7 ;
grid-column: 1 / 5 ; //不推薦用數字，因為less等預處理會進行運算

grid-row-start 和 grid-row-end、grid-column-start 和 grid-column-end

• grid-row-start 和 grid-row-end 使用上下網格線劃定開始位置和結束位置以確定grid項在grid容器內的位置。

• grid-column-start 和 grid-column-end 使用左右網格線劃定開始位置和結束位置以確定grid項在grid容器內的位置。

• 屬性值可以是：

• 1. 網格線自有的數字編號。
  2. 網格線的名字。
  3. span+數字，意為跨越多少格，通常用start定義開始位置，然后end用span+數字定義跨越多少格。例如 grid-row-start:1; grid-row-end:span 3;
  4. span+線名，意為跨越到名字相匹配的線上。
  5. auto

• 如果 start 和 end 超出設定的 grid-template-rows/colums ，則會創建隱式網格軌道。

• 網格項是可以重疊的，可以通過 z-index 控制堆疊順序。

grid-area 屬性

• 使用網格區域名字劃定 grid 項所在的位置，用法 grid-area: 區域名字;這個區域名字不用加引號
• 或者使用四個方向的線段來劃定：
  grid-area: 上邊開始/左邊開始/下邊結束/右邊結束;

align-self 屬性

設定 grid項 內的內容垂直方向的對齊方式。
屬性值：

1. stretch：默認值，內容寬度占滿整個網格區域空間。
2. start：上端對齊。
3. center：居中對齊。
4. end：下端對齊。

justify-self 屬性

1. stretch：默認值，內容寬度占滿整個網格區域空間。
2. start：左端對齊。
3. center：居中對齊。
4. end：右端對齊。

place-self 屬性

align-self 與 justify-self 的復合簡寫屬性，可以分別寫兩個值。
如果只寫一個值則水平方向和垂直方向都一樣。
例如 place-self:center; 即可實現垂直水平都居中。

grid 通常用法

先定模板，再把項放進模板。例如：

1. 先定 grid-template-areas，定好模板名字。
2. 然后 grid-template-rows/columns 定好模板軌道寬高。
3. 再把 grid項 用 grid-area 劃分區域名字。

CSS其他屬性

常用文本樣式：

color屬性

設置文本內容前景色，值可以用單詞、十六進制表示法、rgb表示法，rgba表示法

color: #fff; 
color: red; 
color: rgb(0,0,0); 
color: rgba(0,0,0,.5);

font-size屬性

設置文本字號，單位為px，em，rem

font-weight屬性

設置文本字重（粗細），常見四種值（值為字體文件自帶，如果沒有就沒有）：

font-style屬性

設置字體斜體italic、傾斜oblique，默認值normal正常

font-family屬性

用于設置字體，可以一次放幾個，用逗號隔開。
擁有字體文件后，可以用@font-face定義字體，如下：

@font-face { 
    font-family:; 
    src: url(); 
}

font屬性合寫

font-style（和、或）font-weight + font-size/line-height + font-family;

text-decoration屬性

設置文本下劃線、刪除線、頂線，默認值none沒有

text-indent屬性

定義首航文本內容縮進量，單位通常是em（字符寬度）

text-align屬性

元素添加 text-align:center; 可實現元素內的#text文本水平居中

text-shadow屬性

給#text文本添加文字陰影，屬性值同box-shadow

line-height屬性

用于定義行高，單位通常是px，也可以不寫單位。不寫單位表示字號的n倍，也可以寫百分數。
單行高等于盒子高度，即可實現#text文本在盒子內垂直居中。
如果不考慮居中，從設計角度來看，文字行高定義150%-170%是最好的閱讀體驗。

letter-spacing 屬性

字符間距

writing-mode 屬性

文本方向，值vertical-rl：從右向左閱讀；配合text-orientation:mixed; 屬性，可以讓文本保持豎直或傾斜。

list-style屬性

list-style：<' list-style-type '> || <' list-style-position '> || <' list-style-image '>

可設置在文字內還是文字外 outside | inside 。可以放圖片，設置url即可。

overflow屬性

可分別設置overflowX和overflowY，默認值visible，hidden隱藏，scroll、auto滾動條

其他文本知識：

繼承性：

文本相關屬性普遍具有繼承性，給祖先設置，后代會繼承生效。
比如：font-開頭的、text-開頭的、line-開頭的、color、list-開頭的。
在繼承情況下，選擇器權重計算失效，采用“就近原則”。除非選中的是同一個標簽再比權重

單行文本溢出容器用...代替寫法：

.text-ellipsis{ 
    white-space:no-wrap;    //溢出不換行 
    overflow:hidden;         //溢出隱藏
    text-overflow:ellipsis;     //...替代顯示 
}

單行文本溢出不能和flex布局搭配使用，解決方法是形成多層嵌套。

多行文本溢出用...代替寫法

.multiline-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orent: vertical;
    white-space: normal !important;
    word-wrap: break-word;
}

僅webkit內核瀏覽器可用，-webkit-line-clamp是控制在多少行結尾用...代替。
使用多行文本溢出的容器不要設置高度。

其他盒子屬性

outline屬性

outline 為外邊框線，外輪廓，該屬性不影響盒子布局
屬性值為：粗細，邊框樣式，顏色。
還有個 outline-offset 為以盒子中心為點的邊框偏移量，負值就會變成內邊框線。
可以使用修改 outline 屬性修改input獲取焦點時的外發光

column屬性

column 多列排布，
屬性值1列寬，屬性值2多少列。如果只寫屬性值1，則鋪滿盒子寬度。

背景 background

背景顏色

background-color 屬性：
屬性值可用英文，十六進制，rgb（），rgba（），HSL（），HSLA（）。
padding區域是強制繼承 content 區顏色的。

背景圖片

background-image 屬性：
屬性值是路徑url方式，可插入多張，用逗號隔開。
外聯樣式表找路徑從css文件出發，內聯樣式表從html出發。

圖片比盒子小會自動重復平鋪，用 background-repeat 屬性可設置平鋪方式。
值no-repeat不平鋪；repeat-x X軸平鋪；repeat-y Y軸平鋪；repeat 默認值，x、y都平鋪。

背景尺寸

background-size屬性：
值為寬度和高度，單位可以是數值，也可以是百分比，也可以auto，例如

div{
    background-size: 100px 100% ;       //寬度100px，高度100%
}

值為cover表示將背景圖片智能改變尺寸撐滿盒子。
值為contain表示將背景圖片尺寸智能改變以容納到盒子。

{background-size: cover ;}

常用，強制一圖等比撐滿無空隙，從左上角開始計算，溢出部分隱藏。

{ background-size: contain ; }

圖片撐開，直至撐滿最短邊，空隙用重復填充，可用no-repeat。

背景裁切

background-clip屬性：

僅裁切，但不改變圖片起源坐標，要設置起源用 background-origin 屬性改變，值與上面一樣，也是border-box、padding-box、context-box。

背景固定

background-attachment 屬性：
要開啟小盒子滾動和窗口滾動才可察覺。不常用。

背景圖片定位

background-position 屬性：
值可以為偏移量left、top、right、bottom 以及 center ；

實現背景居中滿鋪盒子，可用：

background-position: center center ;
background-size: cover ;

配合i、u、b標簽開啟position和background position可實現css sprite（css精靈圖）

background 復合屬性

值可以填寫顏色 圖片url 重復repeat 位置position 尺寸寬高；

背景覆蓋性 ：
background > background-image > background-color

?從以上層級來看，漸變色不是 background-color 能用的，background能用，但不方便理解，套漸變盡量用background。

注意 從這里開始步入CSS3屬性知識

注： 像漸變等這種CSS3新特性，舊瀏覽器需要添加私有性前綴，例如：
-webkit-、-moz-、-ms-、-o-

漸變

線性漸變值：linear-gradient( ); 函數

函數值：
第一個：方向，可 to x 或者 角度 45deg 。例如：

{ background: linear-gradient( to right ); }
或者
{ background: linear-gradient( 45deg ); }

第二個：開始色，第n個：結束、過渡色。例如：

{ background: linear-gradient( to right , red , blue , yellow); }

在顏色中間可用空格隔開寫每個顏色的開始位置，例如：

{ background: linear-gradient( to right , red  , blue 30% , yellow 70% ，green ); }

徑向漸變（輻射漸變）：radial-gradient( ); 函數

函數值：第一個值為徑向形狀，也可以是兩個顏色值。
尺寸：

形狀：
circle 圓 ， ellipse 橢圓

高級CSS3

變形：transform 屬性

附加屬性：transform-origin 屬性：改變變形原點位置。
transform屬性只能設置一次，一次寫多個值，多寫后面的會把前面的覆蓋。

斜切變形

屬性值為 skew( ) 函數時，會進行斜切變形，參數為角度，例如：

{transform: skew( 10deg ,20deg );}

縮放變形

屬性值為 scale( ) 、scaleX( ) 、scaleY( )函數時，會進行放大縮小變形。參數為數字，大于1放大，小于1縮放。可傳入多個值，例如：

{transform: scale( .1 ，3);}

旋轉變形

屬性值為 rotate( ) 函數時。（默認z軸，也有 rotateX 和 rotateY ）參數為角度，單位為deg，角度為正數時，順時針方向，負數逆時針，例如。

{transform: rotate(45deg) ;}

位移變形

屬性值為 translate( ) 函數時，進行旋轉變形，還有translateX( )，和translateY( ) ，參數為位移距離，與relative相似，transform-origin改變不了，位移變形同樣可以應用與盒子垂直居中。

3D變形

rotateX 和 rotateY 函數。

3D旋轉后可進行3D空間移動。例如：

{
    transform: rotateX(50) translateX(100px) translateY(100px) ;
}

transform-style 屬性

父元素進行3D轉換時，子元素是否保留已經進行的3D轉換。

perspective屬性

用來給父盒子定義透視強度，值為距離舞臺的距離。

CSS3 動態

過渡 transition屬性

當樣式發生改變的時候，自動添加補幀動畫。
必要值：實現過渡的屬性和過渡持續時間，例如：

{transition: width 2s ; }

可以定義多個過渡，用逗號隔開。

四要素（四個小屬性）

transition-property

屬性值可寫all，即所有屬性都參與過度

transition-timing-fuction屬性

過渡動畫速率（緩動參數）

動畫 animation

定義關鍵幀與時長后自動播放的動畫，必要值：動畫名和動畫時間，例如：

{animation: anima 10s ; }

六要素（六個小屬性）

animation-name:

如何定義動畫以及給動畫命名，格式：

@keyframes 動畫名字{
    開始狀態{ }
    過渡狀態{ }
    結束狀態{ }
}

也可以直接定義2幀（開始幀和結束幀），例如：

@keyframes animaName{
    from{ }
    to{ }
}
或者
@keyframes animaName{
    0%{ }
    100%{ }
}

也可以定義多幀動畫，用百分數定義不同階段的關鍵幀，例如：

@keyframes animaName{
    0%{ }
    10%{ }
    35%{ }
    90%{ }
    100%{ }
}

animation-fill-mode

當值為none時
none為默認值，在動畫執行前和動畫執行后，對元素的樣式不會產生影響。
從上圖可以看到，值為none時，動畫執行前和執行后的狀態和無動畫的狀態是一致的，動畫執行前和執行后對元素沒有產生任何樣式影響。動畫執行后跳到無動畫狀態。

當值為forwards時
forwards當使用這個值時，告訴瀏覽器：動畫結束后，元素的樣式將設置為動畫的最后一幀的樣式。
從上圖可以看出，值為forwards時，動畫執行前的狀態和無動畫狀態一致，但是動畫執行后狀態卻不一樣，查看動畫效果，你會發現他的狀態和動畫最后一幀的狀態相同。

當值為backwards時
從CSS樣式可以看到，動畫我們有設置延遲1s,為了便于觀察動畫執行前的狀態。
backwards當使用這個值時，告訴瀏覽器：動畫開始前，元素的樣式將設置為動畫的第一幀的樣式。
從上圖可以看出，值為backwards時，動畫執行前的狀態和無動畫狀態 不一致，可以看出，它的狀態和動畫第一幀相同，但是動畫執行后狀態卻和無動畫時的狀態相同。

當值為both時
both當使用這個值時，告訴瀏覽器：同時使用forwards和backwards兩個屬性值的效果。
從上圖可以看出，動畫執行前是動畫第一幀的效果，動畫執行后是動畫最后一幀的效果。

濾鏡屬性

• filter屬性可以接濾鏡函數
• filter: blur(); 模糊，參數為像素單位的數值，數值越大越模糊
• 還有 contrast,grayscale,hue-rotatr,drop-shadow

calc() 函數

calc() 函數可以再聲明屬性值時執行一些計算，函數執行后返回計算后的值。，例如

width: calc(100%-77px);

可以進行加減乘除運算，且運算符號的兩邊必須加上空格

媒體查詢 media query

@media screen and (min-width:1200px){}
//中括號里面的內容只對1200寬以上的窗口起作用

為什么需要媒體查詢

一套樣式不可能適應各種大小的屏幕，媒體查詢可設定條件使得內容只在滿足條件的情況下呈現內容。

常見媒體類型

如果使用默認值，可以同時省略 all 和 and ，必須同時，例如：

@media {}

媒體查詢中的邏輯

and 串聯，not 取反，,或拆成并聯，例如：

@media all and (min-width:900px) and (max-width:1920px){}
@media screen and (min-width:500px) , speech and (min-width:1000px){}

媒體屬性

• 例如：min-width / max-width / width orientation:landscape/portrait
• 多數情況下使用帶有 “min-”和“max-”前綴的，用于表達最小是多少最大是多少，避免了css的 < 和 > 符號沖突。
• 策略：從小大大用min，從大到小用max

移動端其他知識

nomrmalize.css

更好用的重置css默認樣式方法，官網地址：
http://necolas.github.io/normalize.css/

點擊一些標簽高亮背景取消

-webkit-tap-highlight-color: transparent;

給按鈕和輸入框自定義樣式

需要關掉apppearance。
-webkit-appearance: none;

禁用長安頁面時的彈出菜單

img,a { -webkit-touch-callout: none; }