CSS3
主流瀏覽器的前綴
prefix browser
-webkit chrome和safari
-moz firefox
-ms IE
-o opera
什麼時候加前綴，什麼時候不加？
可以根據css參考手冊或caniuse官網：
http://css.doyoe.com/
https://www.caniuse.com/
css前綴演變史（舉個例子 僅用於說明）
1、--->
只有谷歌實現，我要在自己上面加個標識，
只能我認識，是我私有的屬性
-webkit-border-radius
2、--->
後來火狐和歐鵬我也實現了，我也要加個標識
-moz-border-radius
-o-border-radius
3、--->
ie說我也實現了我也要加個表示
-ms-border-radius
4、最後w3c標準發現大部分瀏覽器都實現了這個屬性的時候
大家都去掉前綴吧
border-radius
預處理器和後處理器
postCss：用js實現的css的抽象的語法樹AST(Abstract Syntax Tree)。相當於一個平臺，可以讓一些插件在上面跑
後處理器和預處理器都是基於postCss，postcss + 插件 （充分實現擴展性，200多個）
預處理器(pre-processor)
如:less/sass cssNext
後處理器(post-processor)
如:autoprefixer該插件可以自動添加前綴
css選擇器
一、關係型選擇器
1、E F(包含選擇器) 選擇所有被E元素包含的F元素。所有子孫元素
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>4</p>
</div>
</div>
/* 拿到所有的p元素 */
div > p{}
2、E > F(子選擇器) 選擇所有作爲E元素的子元素F。僅子元素
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<h1>
<p>4</p>
</h1>
</div>
/* 拿到1，2，3的p元素 */
div > p{}
3、E+F(相鄰選擇器) 滿足條件的第一個兄弟元素節點
<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>
/* 拿到div後第一個p元素 */
div + p{}
4、E~F(兄弟選擇器) 滿足條件的所有兄弟元素結點
<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>
/* 拿到div後所有p元素 */
div ~ p{}
二、屬性選擇器
下面幾個選擇器用到的html
<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>
<div class="aa b c">4</div>
<div class="a-test">5</div>
<div class="a b-test">6</div>
<div class="ba-test">7</div>
<div class="aa b c">8</div>
1、 E[att~=“val”]：選擇具有att屬性且屬性值爲一用空格分隔的字詞列表，其中一個等於val的E元素（包含只有一個值且該值等於val的情況）。
/* 所有class屬性中被單獨隔的元素(第1，3,6個div) */
div[class~="a"]{
background-color: red;
}
2、E[att|=“val”] ：選擇具有att屬性，其值是以val開頭並用連接符"-"分隔的字符串的E元素；如果值僅爲val，也將被選擇。
/* 以a-開頭，或a單獨存在的元素(第1,5個div) */
div[class|="a"]{
background-color: red;
}
3、E[att^=“val”] ：選擇具有att屬性且屬性值爲以val開頭的字符串的E元素。
/* 以a開頭的元素(第1,3,4,5,6,8個div) */
div[class^="a"]{
background-color: red;
}
4、E[att$=“val”]：選擇具有att屬性且屬性值爲以val結尾的字符串的E元素。
/* 以test結尾的元素(第5,6,7個div) */
div[class$="test"]{
background-color: red;
}
5、E[att*=“val”]：選擇具有att屬性且屬性值爲包含val的字符串的E元素。
/* 只要存在該字符都可(第5,6,7個div) */
div[class*="t"]{
background-color: red;
}
三、僞元素選擇器（兩個冒號::）
1、placeholder
<input type="text" placeholder="請輸入用戶名">
/* 改變提示內容的字體顏色（僅能改變字體顏色且僅部分瀏覽器兼容） */
input::placeholder{color:green}
2、selection
<div>今天天氣晴</div>
/* 當選中該標籤時，顯示以下樣式，只能設置背景顏色、陰影、字體顏色 */
<style>
div::selection{
background-color: yellow;
text-shadow:3px 5px green;
color: red;
}
</style>
四、僞類選擇器（一個冒號:）
僞類選擇器被選中的元素的一種狀態
1、E:not(s)：匹配不含有s的E元素
常用於在解決最後一個元素不需要某個特殊樣式。如：假定有個列表，每個列表項都有一條底邊線，但是最後一項不需要底邊線
<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3</div>
<div>4</div>
<style>
/* class屬性不是demo */
div:not([class="demo"]){
background-color: red;
}
/* 沒有class屬性 */
div:not([class]){
background-color: red;
}
/* 除去最後一個的所有元素 */
div:not(:last-of-type){
background-color: red;
}
</style>
2、E:root：匹配E元素在文檔的根元素。在HTML中，根元素永遠是HTML
在html中 :root和html選擇器效果相同
<style>
:root{
background-color: red;
}
html{
background-color: red;
}
</style>
3、E:target：匹配錨點指向的元素，選擇器用於選取當前活動的目標元素。
（被標記爲錨點的元素 即 location.hash = xxx）
<a href="#demo1">第一個</a>
<a href="#demo2">第二個 </a>
<div id="demo1">1</div>
<div id="demo2">2</div>
/* 效果是點擊第一個時第一個div有邊框樣式 */
<style>
div:target{
border:1px solid red;
}
</style>
綜合案例：實現效果，當點red時，背景顏色變成紅色，點擊yellow時背景顏色變成黃色
<div class="btn">
<a href="#red" class="bgred">red</a>
<a href="#yellow" class="bgyellow">yellow</a>
<a href="#green" class="bggreen">green</a>
</div>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<style>
/*通常height:100%不起作用，但在html根節點時加上height:100%，相當於獲取屏幕的高度，並賦值，必須要加上body，給body的高度也賦值後，body中的元素也可以用height:100%獲取屏幕高度*/
:root,body{
margin: 0;
padding: 0;
height: 100%;
}
#red,#yellow,#green{
height: 100%;
width: 100%;
}
#red{
background-color: red;
}
#yellow{
background-color: yellow;
}
#green{
background-color: green;
}
div.btn{
position: absolute;
width: 600px;
top: 300px;
}
div.btn a{
color: #fff;
background-color: #fcc;
font-size: 30px;
margin: 0 10px;
padding: 5px;
border-radius:5px;
}
/* 選擇div中有id屬性的，且沒有被選中的div的display屬性設置爲none */
div[id]:not(:target){
display: none;
}
</style>
3、E:first-child：父元素的第一個子元素
E:last-child：父元素的最後一個子元素
E:only-child：父元素僅有的一個子元素
<p>0</p>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<p>5</p>
<style>
/*first-child只要是標籤的第一個即可 0，1，4的p標籤都會被選出*/
p:first-child{
backlastground-color: red;
}
/*last-child只要是標籤的最後一個即可 3，4，5的p標籤都會被選出*/
p:last-child{
background-color: red;
}
/*only-child 4的p標籤都會被選出*/
p:only-child{
background-color: red;
}
</style>
E:nth-child(n)：匹配父元素的第n個子元素
E:nth-last-child(n)：匹配父元素的倒數第n個子元素
備註： n從0開始 css從1開始，以上5個不常用，因爲要考慮其他元素對自己的干擾
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<style>
/* 相當於p:nth-child(odd) 將奇數個選出來*/
p:nth-child(2n+1){
backlastground-color: red;
}
/* 相當於p:nth-child(even) 將偶數個選出來*/
p:nth-child(2n){
backlastground-color: red;
}
</style>
4、E:first-of-type：父元素下第一個類型爲E的子元素
E:last-of-type：父元素下的所有E子元素中的倒數第一個。
E:only-of-type：父元素的所有子元素中唯一的那個子元素E。
E:nth-of-type(n)：父元素的第n個子元素E。
E:nth-of-last-type(n)：父元素的倒數第n個子元素E。
解釋：與上面5個類似
5、E:empty：匹配沒有任何子元素（包括text節點）的元素E。（除註釋無任何內容，包括空格）
6、E:checked：被選中的元素
<label>
請點擊我<input type="checkbox">
<span></span>
</label>
<style>
input:checked + span{
background-color: green;
}
input:checked + span::after{
content: "wawo...";
color: #fff;
}
</style>
7、E:enabled，E:disabled 是否是禁用狀態的元素
<input type="text">
<input type="text" disabled="disabled">
<style>
input:enabled{
border: 1px solid green;
}
input:disabled{
border: 1px solid #f20;
background-color: #fcc;
}
</style>
8、E:read-only 只讀狀態下的元素
<input type="text" value="不能被修改哦" readonly="readonly">
<style>
input:read-only{
border: 1px solid #f20;
background-color: #fcc;
}
</style>
屬性
一、邊框和背景
1、border
border中用的的html
<div></div>
border中div的基礎樣式
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
</style>
解釋：calc()動態計算長度值，calc運算符前後都需要保留一個空格
（1）border-radius
a、1個值的寫法
<style>
div{
/*1個值 四個邊*/
border-radius: 10px;
}
</style>
b、2個值的寫法
<style>
div{
/*2個值 上下 左右 --》左上角右下角 右上角左下角*/
border-radius: 10px 40px;
}
</style>
c、3個值的寫法
<style>
div{
/*3個值 中間值代表兩個 左上角 右上角左下角 右下角*/
border-radius: 10px 25px 40px;
}
</style>
d、4個值的寫法
<style>
div{
/*4個值 分別爲左上，右上，左下，右下*/
border-radius: 10px 20px 30px 40px;
}
</style>
e、複雜寫法，一定先寫上下，後寫左右 即先top/bottom-left/right
<style>
div{
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-left-radius:30px;
border-bottom-right-radius:40px;
}
</style>
f、終極複雜版 第一個是水平方向 第二個是垂直方向
<style>
div{
border-top-left-radius:10px 20px;
border-top-right-radius:20px 30px;
border-bottom-left-radius:30px 40px;
border-bottom-right-radius:40px 50px;
}
</style>
g、還有一種寫法 /前代表水平方向的/後代表垂直方向上的四個角
<style>
div{
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
}
</style>
border-radius 案例 :
1、正圓
<style>
div{
border-radius: 50%;
/*或計算爲長寬的一半像素值*/
border-radius: 50px;
}
</style>
2、四分之一圓 扇形
<style>
div{
border-top-left-radius:100px 100px;
}
</style>
3、半圓
<style>
div{
width: 200px;
height: 100px;
border: 1px solid black;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
border-top-left-radius:100px 100px;
border-top-right-radius:100px 100px;
}
</style>
4、樹葉型（導航欄）
<style>
div{
width: 200px;
height: 100px;
border: 1px solid black;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
border-top-left-radius:100px 100px;
border-bottom-right-radius:100px 100px;
}
</style>
（2）border-image
a、border-image-source：定義元素邊框背景圖像，可以是圖片路徑或使用漸變創建的“背景圖像”。
<style>
div{
border-image-source:linear-gradient(red,blue);
/* ------- */
border-image-source:url(red.png);
}
</style>
b、border-image-width：定義元素邊框背景圖像厚度。
<style>
div{
/* 設置圖片的寬度是20px， */
border-image-width: 20px;
}
</style>
c、border-image-slice：定義元素邊框背景圖像從什麼位置開始分割。
分割線的大小,填數字 或者百分比都可，不要填100% ，上右下左四條分割線，分成9塊。除中間區域外，放在border的四個邊上
<style>
div{
border-image-slice: 100;
}
</style>
d、 border-image-repeat：定義元素邊框背景圖像的平鋪方式。
默認是stretch 拉伸填充效果，repeat是平鋪填充，round是不能整數平鋪時拉伸圖片，space時不能整數平鋪時以空白間隙在圖片之間
<style>
div{
border-image-repeat: stretch;
}
</style>
e、可以縮寫爲：
<style>
div{
border-image:source slice repeat;
}
</style>
2、background
background中用到的html
<div></div>
background中用到的基礎css
<style>
div{
width: 200px;
height: 200px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
</style>
（1）background-image：可以放漸變顏色或背景圖片地址
<style>
div{
/* 可以放漸變顏色 */
background-image: linear-gradient(#0f0,#f00);
/* 可以放多個背景 */
background-image: url(01.jpg) ,url(02.jpg);
}
</style>
（2）background-origin：這個屬性決定了圖片從哪裏開始定位（background-position），默認是padding開始 顯示背景圖片
border-origin:border-box|padding-box|content-box
<style>
div{
padding: 20px;
border: 20px solid transparent;
background-origin: border-box;
background-position: 20px 20px;
}
</style>
（3）background-clip：這個屬性決定了背景圖片從哪開始截斷，與background-origin相對應，默認是padding-box截斷，即padding以外的區域不顯示背景圖片
background-origin: border-box | padding-box | content-box | text（text屬性下面介紹）
<style>
div{
padding: 20px;
border: 20px solid transparent;
background-image: url(3.jpg);
background-origin: border-box;
background-clip: padding-box;
background-repeat: no-repeat;
background-position: 20px 20px;
}
</style>
（4）background-clip:text 需要與text-fill-color配合
一旦設置文字就變成了背景，再設置text-shadow，陰影會在背景上
<div>我很帥</div>
<style>
div:hover{
background-position: center center;
}
div{
width: 400px;
height: 100px;
position: absolute;
left: calc(50% - 200px);
top: 100px;
font-size: 80px;
font-weight: bold;
background-image: url(4.jpg);
/*
僅部分瀏覽器兼容
*/
-webkit-background-clip: text;
background-clip: text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
transition: all .6s;
}
</style>
（5）background-attachment 屬性設置背景圖像是否固定或者隨着頁面的其餘部分滾動。
background-attachment: fixed | scroll | local 默認值scroll
<style>
div {
overflow: scroll;
/*
默認值scroll 根據容器定位
local:相對於內容區進行定位
fixed:相對於真正的可視區（視口進行定位）
*/
background-attachment: local;
}
</style>
（6）background-size
cover:用一張圖片填充滿整個容器，圖片在不改變比例下拉伸，有超出圖片風險
contain:讓容器包含一張完整的圖片，有留餘的風險
<style>
div {
background-size: contain;
}
</style>
3、box-shadow
（1）6個參數
/*
默認外陰影
水平偏移量，
垂直偏移量，
模糊半徑(基於邊框原來的位置，同時向兩邊模糊)，
外延值(在四個方向同時增加|減少陰影大小，可省略)
顏色
*/
<style>
div {
box-shadow:5px 5px 3px 0px #fcc;
/* 內陰影 */
box-shadow: inset 5px 5px 3px 0px #fcc;
}
</style>
（2）疊加使用，增強效果
body{
background-color: black;
}
div{
width: 100px;
height: 100px;
background-color: transparent;
border: 2px solid white;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
box-shadow:inset 0px 0px 10px #fff,
3px 0px 10px #f0f,
0px -3px 10px #0ff,
-3px 0px 10px #00f,
0px 3px 10px #ff0;
}
</style>
一個炫酷的效果陰影效果
<style>
body{
background-color: #000;
}
div{
width: 300px;
height: 300px;
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
border-radius: 50%;
box-shadow:inset 0px 0px 50px #fff,
inset 10px 0px 80px #f0f,
inset -10px 0px 80px #0ff,
inset 10px 0px 100px #f0f,
inset -10px 0px 100px #0ff,
0px 0px 50px #fff,
-10px 0px 80px #f0f,
10px 0px 80px #0ff;
}
</style>
二、生成圖像
1、linear-gradient：線性漸變創建圖像
漸變方向可以是一個角度，0deg是漸變從下到上，180deg是漸變從上到下
<style>
div {
width: 200px;
height: 200px;
background-image: linear-gradient(180deg,#0f0,#ff0);
}
</style>
漸變方向可以是關鍵字，to left是設置漸變爲從右到左，可以寫一個關鍵字也可兩個，to top right 從左下到右上
<style>
div {
width: 200px;
height: 200px;
background-image: linear-gradient(to top right,#0f0,#ff0);
}
</style>
漸變色後面可以跟像素值或百分比，表示從哪到哪之間是漸變內容
<style>
div {
width: 200px;
height: 200px;
/* 從60px到80px之間是過度顏色 */
background-image: linear-gradient(to right,#0f0 60px,#ff0 80px);
}
</style>
2、radial-gradient
（1）確定圓的類型：橢圓還是圓形
circle：指定圓形的徑向漸變
ellipse：指定橢圓形的徑向漸變。
（2）確定圓|橢圓的圓心：兩個參數，第一個是橫座標，第二個是縱座標，可以是像素，百分比或者關鍵字（center）默認值是50%即center
<style>
div {
width: 200px;
height: 100px;
/*
ellipse at 橢圓圓心
circle at 圓的圓心
*/
background-image: radial-gradient(ellipse at 100px 0px,#0f0 20%,#ff0 100px,#00f 150px);
}
</style>
（3）指定徑向漸變的半徑長度：選填四個關鍵字
closest-side：從圓心到離圓心最近的邊
closest-corner：從圓心到離圓心最近的角
farthest-side：從圓心到離圓心最遠的邊
farthest-corner：從圓心到離圓心最遠的角
<style>
div {
width: 200px;
height: 100px;
/*
farthest-corner 最遠的角
farthest-side 最遠的邊
closest-corner 最近的角
closest-side 最近的邊
*/
background-image: radial-gradient(ellipse closest-corner at 50px 50px,#0f0,#ff0,#00f);
}
</style>
三、文本及文本裝飾
1、text-shadow
（1）4個參數
/*
text-shadow: x,y,blur,color;
水平偏移量
垂直偏移量
模糊半徑(基於邊框原來的位置，同時向兩邊模糊)
顏色
*/
<div>TEXT SHADOW</div>
<style>
div {
width: 500px;
height: 100px;
font-size: 50px;
text-shadow: 3px 3px 3px #000;
}
</style>
浮雕和鏤刻效果
<style>
div {
width: 500px;
height: 100px;
font-size: 50px;
color: #ddd;
/* 浮雕效果*/
text-shadow: 1px 1px #000,
-1px -1px #fff;
/* 鏤刻效果*/
text-shadow: -1px -1px #000,
1px 1px #fff;
}
</style>
2、text-stroke 描邊屬性
<style>
div {
width: 500px;
height: 100px;
font-size: 100px;
color: #000;
font-family: simsun;
font-weight: bold;
-webkit-text-stroke: 1px red;
}
</style>
3、white-space
white-space：normal | pre | nowrap | pre-wrap | pre-line
4、word-break
word-break：normal | keep-all | break-all | break-word
5、text-align
text-align：start | end | left | right | center | justify | match-parent | justify-all
justify：內容兩端對齊，但對於強制打斷的行（被打斷的這一行）及最後一行（包括僅有一行文本的情況，因爲它既是第一行也是最後一行）不做處理。
start：內容對齊開始邊界。
end：內容對齊結束邊界。
match-parent：這個值和inherit表現一致，只是該值繼承的start或end關鍵字是針對父母的direction值並計算的，計算值可以是 left 和 right 。
justify-all：效果等同於justify，不同的是最後一行也會兩端對齊。
6、@font-face 引入字體包
設置嵌入HTML文檔的字體。
@font-face {
font-family: fontName;
src: url(引入地址);
}
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9+ */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('diyfont.woff') format('woff'), /* chrome、firefox */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
四、多列 column
通常用作報紙佈局
<style>
div {
/* 分成多少列 */
column-count:4;
/* 每列之間的間隙 */
column-gap: 10px;
/* 每列之間的分割線 */
column-rule: 1px solid #000;
/* 貫穿 */
column-span: all;
}
</style>
五、box盒模型
box-sizing：content-box（默認）
（1）w3c標準盒模型
width= contentWidth
相當於：box-sizing:content-box
（2）IE6混雜盒模型
width = contentWidth + border * 2 + padding * 2
相當於：box-sizing:border-box
（3）resize：改變dom元素的大小
resize : both|horizontal|vertical
前提：必須設置overflow
六、flex彈性盒子
複合屬性。設置或檢索彈性盒模型對象的子元素如何分配空間。
flex:flex-grow flex-shrink flex-basis
flex:1 1 0% === flex:1
felx:1 1 auto === flex:auto
flex:0 0 auto === flex:none
1、設置display:flex上的元素可以擁有的屬性
所用到的的html
<div class="wraper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
</div>
所用到的基礎css
<style>
.wraper{
width: 600px;
height: 300px;
border: 1px solid black;
display: flex;
}
.content{
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
}
.content:nth-of-type(2){
/* 設置baseline效果時使用 */
margin-top: 20px;
}
</style>
（1）flex-direction：設置主軸的方向。默認爲row（自左向右）
/*
row-reverse:對齊方式與row相反。
column:自下向上
column-reverse:對齊方式與column相反。
*/
flex-direction: row;
（2）flex-wrap：設置是否換行。默認爲nowrap（不換行）
/*
wrap:換行
wrap-reverse:從反過來換行，把底當成開始
*/
flex-wrap: wrap;
（3）justify-content：設置主軸上的對齊方式。默認爲flex-start（將向行起始位置對齊）
/*
flex-end:從結束位置對齊
center:劇中對齊
space-between:向兩邊劇中對齊，兩邊無空隙，中間空隙相同
space-around:向中間劇中對齊,兩邊的空隙相同，大小是中間空隙的一半
*/
justify-content: flex-start;
（4）align-items：設置交叉軸上的單行元素的對齊方式。默認是stretch（相當於auto，大小爲width和height高度）
/* 對於多行元素無作用
stretch:在未設置高度時，默認撐開父級元素的高度，設置高度時失效
flex-start:交叉軸開始對齊
flex-end:交叉軸結束對齊
center:交叉軸居中對齊
baseline:基於文字底線開始對齊
*/
align-items: center;
（5）align-content：設置交叉軸上的多行元素的對齊方式。默認值是stretch
/* 對單行無作用
同justify-content
stretch:剩餘空間被所有行平分，以擴大它們的側軸尺寸。
flex-start:從交叉軸開始位置對齊
flex-end:從交叉軸結束位置對齊
center:居中對齊
space-between:向兩邊(上下邊)劇中對齊，兩邊無空隙，中間空隙相同
*/
align-content: flex-start;
2、子元素上擁有的屬性
所用到的html
<div class="wraper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
所用到的基礎css
<style>
.wraper{
width: 600px;
height: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.content{
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
（1）order：設置子元素出現的順序。默認爲0，數值越小，優先級越低
.content:first-of-type{
order: 1;
}
.content:last-of-type{
order: -1;
}
（2）align-self：設置子元素單獨在交叉軸上的對齊方式。默認是auto
/*
與align-items相比，優先級比align-items高
與align-content相比，優先級比align-content低
auto:計算值爲元素的父元素的'align-items'值，如果其沒有父元素，則計算值爲'stretch'。
flex-start：交叉軸起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end:交叉軸起始位置的邊界緊靠住該行的側軸結束邊界
stretch:如果設置了高度，則按照heigh，如果未設置，則拉伸爲盒子高度
baseline:該值將參與基線對齊
center:劇中對齊
*/
.content:first-of-type{
align-self: flex-start;
}
（3）flex-basis：設置彈性盒伸縮基準值。可以簡單理解爲覆蓋width，設置以後，width失效
/*
flex-basis 和 width:
當設置flex-basis後，如果內容區中的內容超出flex-basis所設置的寬度時，不會截斷，會撐大寬度。而width不會
沒設置width的前提下，設置的flex-basis的值是元素的最小值
在設置width的前提下，設置的flex-basis的值是元素的最小值，也是默認值，width的值是元素寬度的最大值
(flex-basis < 元素的寬度 < width)
如果flex-basis大於width 則flex-basis的值是最大值寬度
*/
flex-basis: 200px;
（4）flex-grow：設置彈性盒的擴展比率。默認值是0。不擴展
當一行還有剩餘空間的時候，就會安裝flex-grow設置的比例進行分配剩餘的空間，調整大小
/*
剩餘的空間，分爲6份，第一個content佔1份，第二個2份，第三個3份
*/
.content:nth-of-type(1){
flex-grow: 1;
}
.content:nth-of-type(1){
flex-grow: 2;
}
.content:nth-of-type(1){
flex-grow: 3;
}
（5）flex-shrink：設置彈性盒的收縮比率。默認值是1。
計算公式：1、計算加權值：每個元素 真實內容區的大小（去掉border）* shrink 值之和
2、計算壓縮值：（真實內容區大小 * shrink值 ）/ 加權值 * 多出來的像素
備註：要注意有border和無border的區別，計算的爲去掉border的寬度
/*
計算方式
1、計算加權值 真實內容區的大小 * shrink值
200px*1 + 200px*1 + 400px*3 =1600px
2、
第一個盒子壓縮值:
200px * 1
—————————— * 200px(多餘的像素) = 25px
1600px
第二個盒子壓縮值:
200px * 1
—————————— * 200px(多餘的像素) = 25px
1600px
第三個盒子壓縮值:
400px * 3
—————————— * 200px(多餘的像素) = 150px
1600px
*/
<style>
.content{
width: 200px;
height: 100px;
flex-shrink: 1;
}
.content:nth-of-type(3){
width: 400px;
flex-shrink: 3;
}
</style>
案例1：flex彈性盒子 劇中效果
<div class="wraper">
<div class="content"></div>
</div>
<style>
.wraper{
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
}
</style>
案例2：可動態增加導航欄
<div class="wraper">
<div class="items">天貓</div>
<div class="items">淘寶</div>
<div class="items">聚划算</div>
<div class="items">聚划算</div>
</div>
<style>
.wraper{
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.items{
height: 30px;
box-sizing: border-box;
border: 1px solid red;
flex: 1 1 auto;
text-align: center;
line-height: 30px;
}
</style>
案例三：中間固定，兩邊自適應 其中一個固定，另外兩個不固定等
<div class="wraper">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
.wraper{
width: 400px;
height: 200px;
border: 1px solid black;
display: flex;
resize: both;
overflow: hidden;
}
.content{
flex: 1 1 auto;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
}
.content:nth-of-type(2){
flex: 0 0 200px;
}
</style>
案例四：聖盃佈局
<div class="wraper">
<div class="header">header</div>
<div class="contain">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
<style>
.wraper{
width: 400px;
height: 400px;
border: 1px solid black;
display: flex;
flex-direction: column;
overflow: hidden;
resize: both;
}
.header,.footer,.right,.left{
flex: 0 0 20%;
border: 1px solid green;
box-sizing: border-box;
}
.contain{
flex: 1 1 auto;
display: flex;
}
.center{
flex: 1 1 auto;
}
</style>
七、過度、動畫和變換
1、transition過渡
用到的html
<div></div>
用到的基礎css
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
div:hover{
width: 200px;
height: 200px;
}
</style>
（1）transition-property：設置對象中的參與過渡的屬性
div{
/* 監聽什麼屬性 width,height,color */
transition-property: all;
}
（2）transition-duration：設置對象過渡的持續時間
div{
/* 過度動畫多長時間執行完 */
transition-duration: 0.2s;
}
（3）transition-timing-function：設置對象中過渡的動畫類型
linear:線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease:平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
step-start:等同於 steps(1, start)
step-end:等同於 steps(1, end)
steps(number,start|end):第一個參數執行多少步，第二個參數是保留開始樣式還是結束樣式。具體用法在下面介紹
cubic-bezier(number,number,number,number):特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內
div{
/* 運動狀態 默認ease 平滑過度，先快 勻速 再慢 可填寫貝塞爾曲線cubic-bezier */
transition-timing-function: linear;
}
（4）transition-delay：設置對象延遲過渡的時間
div{
/* 延遲多少時間執行 */
transition-delay: 1s;
}
（5）綜合寫法
div{
/* 監聽width 執行2s 勻速 延遲1s */
transition: width 2s linear 5s;
}
2、animation動畫
用到的html
<div></div>
用到的基礎css
div{
width: 100px;
height: 100px;
position: absolute;
background-color: red;
}
（1）@keyframes：指定動畫名稱和動畫效果
<style>
@keyframes run{
0%{
left: 0;
top: 0;
}
50%{
left: 100px;
top: 100px;
}
100%{
left: 0;
top: 0;
}
}
@keyframes color-change{
from{
background-color: green;
}
50%{
background-color: yellow;
}
to{
background-color: red;
}
}
</style>
（2）animation-name：設置對象所應用的動畫名稱
div{
/* 設置對象所應用的動畫名稱 */
animation-name: run;
}
（3）animation-duration：設置對象動畫的持續時間。默認0s
div{
/* 設置對象動畫的持續時間 默認0s */
animation-duration: 1s;
}
（4）animation-timing-function：設置對象動畫的過渡類型 與transition的屬性相同。默認是ease
其中的step屬性的含義
/*
animation-timing-function屬性
steps(Integer,start||end)
Integer:整數，函數執行的步數，從當前幀到下一幀 執行多少步
start:保留下一幀幀狀態，直到這段動畫時間結束
end:保留當前幀狀態，直到這段動畫時間結束 常用，一般與forwards(保留最後一幀的狀態)連用
step-end == steps(1,end)
step-start == steps(1,start)
*/
div{
/* 設置對象動畫的過渡類型,可以是貝塞爾曲線 默認是ease */
animation-timing-function: ease;
}
（5）animation-delay：設置對象動畫的延遲時間。默認0s
div{
/* 設置對象動畫的延遲時間 默認0s */
animation-delay: 1s;
}
（6）animation-iteration-count：設置對象動畫的循環次數。默認是1
div{
/*
設置對象動畫的循環次數,默認是1
infinite 無限循環
*/
animation-iteration-count: infinite;
}
（7）animation-direction：設置對象動畫在循環中運動狀態。默認normal
div{
/*
animation-direction:設置對象動畫在循環中運動狀態
normal:正常方向
reverse:反方向運行
alternate:動畫先正常運行再反方向運行，並持續交替運行。鐘擺效果
alternate-reverse:動畫先反運行再正方向運行，並持續交替運行
*/
animation-direction: alternate;
}
（7）animation-play-state：設置對象動畫的狀態。默認是running
div{
/* 設置對象動畫的狀態 開始或停止 默認是running */
animation-play-state: paused;
}
（8）animation-fill-mode：設置對象動畫時間之外的狀態
div{
/* 設置對象動畫時間之外的狀態
none:默認值。不設置對象動畫之外的狀態
forwards:設置對象狀態爲動畫結束時(最後一幀)的狀態
backwards:設置對象狀態爲動畫開始時(第一幀)的狀態
both:設置對象狀態爲動畫結束或開始的狀態
*/
animation-fill-mode: forwards;
}
（9）綜合寫法。可以按照以上順序寫在animation中
div{
/* 寫多個，並行作用
執行run動畫，在兩秒內完成，以線性過渡，在結束第一個時從第一個結束的狀態翻過來執行。無線循環
延遲2s後，執行color-change動畫,在2s內完成，動畫結束時保留第一幀的狀態
*/
animation: run 2s linear infinte alternate,color-change 2s 2s fowards;
}
案例1：超級簡易時鐘效果
<div class="clock">
<div class="min"></div>
</div>
<style>
div.clock{
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid black;
position: relative;
}
div.min{
position: absolute;
width: 100px;
border-top: 1px solid red;
top: 100px;
animation: radius-run 60s steps(60,end) infinite;
transform-origin: 100% center;
}
@keyframes radius-run{
0%{
transform: rotate(90deg);
}
100%{
transform: rotate(450deg);
}
}
</style>
案例2：跑馬效果
<div class="horse"></div>
<style>
div.horse{
width: 200px;
height: 100px;
background-image: url(./horse.png);
background-repeat: no-repeat;
background-position: 0 0;
animation: run 1s steps(12,end) infinite;
}
@keyframes run{
0%{
background-position: 0 0;
}
100%{
background-position: -2400px 0;
}
}
</style>
3、transform變換
（1）旋轉
rotate：指定對象的2D rotation（2D旋轉）
div{
/* rotate(0deg) 旋轉 */
transform: rotate(0deg);
}
rotateX,rotateY,rotateZ：指定對象在x，y，z軸上的旋轉角度
<style>
body{
/* 設置景深 */
perspective: 800px;
/* 設置子元素定位在三維空間內 */
transform-style: preserve-3d;
}
div{
width: 100px;
height: 200px;
background-color: red;
position: absolute;
left: 200px;
top: 300px;
/* 元素旋轉之後，元素的參照軸也跟着旋轉，因此要考慮旋轉順序 */
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform-origin: 0 0;
}
</style>
rotate3d：指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度
div{
/*
rotate3d(x,y,z,angle)
前三個值表示的是旋轉方向x,y,z，第四個值表示的是旋轉角度
*/
transform: rotate3d(1,1,1,0deg);
}
（2）縮放
scale：指定對象的2D scale（2D縮放）兩個參數，第一個是x軸，第二個是y軸。
/*
大於1擴張，小於1收縮
scale:伸縮的是元素所在的變化座標軸的刻度，並不是元素的大小
*/
div{
transform: scale(2,1)
}
/*
寫多個值，是疊加操作，而不是覆蓋。
*/
div{
transform: scale(2,1) translatex(100px) scale(0.5,1);
}
/*
伸縮的軸會根據旋轉軸變換而變換
伸縮的影響會一直保留下來
*/
div{
transform: scale(2,1),rotate(0deg);
}
skewy()：指定對象Y軸的（垂直方向）扭曲
scalex，scaley，scalez：指定對象的x，y，z軸縮放
scale3d：指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
（3）扭曲
skew：指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值爲0
skewx，skewy：指定對象X，Y軸的扭曲
<style>
body{
perspective: 800px;
transform-style: preserve-3d;
}
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 200px;
/*
扭曲填2個角度 默認0deg。
扭曲的是座標軸,但不僅是扭曲，座標軸的刻度也會被拉伸
*/
transform: skew(45deg,0deg);
}
</style>
skew案例：
<style>
body{
perspective: 800px;
transform-style: preserve-3d;
}
@keyframes skewrun{
0%{
transform: skew(0deg,0deg);
}
50%{
transform: skew(45deg,45deg);
}
100%{
transform: skew(-45deg,-45deg);
}
}
div{
width: 200px;
height: 200px;
background-image: url(1.jpg);
position: absolute;
left: 100px;
top: 200px;
animation: skewrun 2s linear infinite alternate;
}
</style>
（3）平移
translate：指定對象的2D translation（2D平移）第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值爲0
translateX，translateY，translateZ：指定對象X，Y，Z軸的平移
translate3d：指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
div{
/*
translate參照的是自身，
在某些不知道自己的寬度需要平移的情況下可以用translate(50%) 即向x軸平移自己寬度50%的距離
*/
transform: translate(100px);
transform: translateX(100px) translateY(100px) translateY(100px);
transform: translate3d(100px,100px,0);
}
（4）perspective景深和perspective-origin景深的位置
<style>
body{
/* 景深:>0
指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產生透視效果
translatez越大，該元素看起來就會越大
我們看到的都是元素在屏幕上的投影
*/
perspective: 800px;
/* 景深的位置 */
perspective-origin: center center;
transform-style: preserve-3d;
}
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
transform:translatez(100px);
}
</style>
案例：
<body>
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>
<script>
document.body.onmousemove = function(e){
this.style.perspectiveOrigin = e.pageX
+ "px " +e.pageY + "px"
}
</script>
</body>
<style>
html,:root{
height: 100%;
margin: 0;
padding: 0;
}
body{
perspective: 800px;
height: 100%;
}
div{
width: 200px;
height: 200px;
background-image: url(1.jpg);
background-size: cover;
position: absolute;
top: 200px;
transform:rotatey(45deg);
}
.content1{
left: 200px;
}
.content2{
left: 400px;
}
.content3{
left: 600px;
}
.content4{
left: 800px;
}
.content5{
left: 1000px;
}
</style>
（5）transform-style：指定某元素的子元素是（看起來）位於三維空間內，還是在該元素所在的平面內被扁平化。
transform-style：flat | preserve-3d
注意：preserve-3d 必須寫在該元素上，無法繼承父元素的該屬性
<div class="wrapper">
<div class="demo"></div>
</div>
<style>
html,:root{
height: 100%;
margin: 0;
padding: 0;
}
body{
perspective: 800px;
perspective-origin: 300px 100px;
height: 100%;
}
.wrapper{
width: 200px;
height: 200px;
position: absolute;
left: 200px;
top: 200px;
background-color: red;
transform: rotateY(0deg);
/* 顯示不出來是因爲瀏覽器渲染能力不夠，需要設置元素在三維空間中 */
transform-style: preserve-3d;
}
.demo{
width: 200px;
height: 200px;
background-image: url(./4.jpg);
background-size: cover;
transform:translatez(100px);
}
</style>
（6）transform-origin：設置對象以某個原點進行轉換。
/*
變換中心 給誰設置，就是誰參照這個 默認值是center center，
可以是百分比，具體像素值
*/
<div class="wrapper"></div>
<style>
*{
margin: 0;
padding: 0;
}
body{
perspective: 800px;
perspective-origin: 300px 100px;
transform-style: preserve-3d;
}
.wrapper{
width: 200px;
height: 200px;
position: absolute;
left: 200px;
top: 200px;
background-image: url(./4.jpg);
background-size: cover;
transform: rotateY(0deg);
/* 3個值變換的空間中心 */
transform-origin: 100px 100px 100px;
}
</style>
（7）backface-visibility：元素背面是否可見
backface-visibility:visible | hidden
案例1：3d旋轉照片牆
<body>
<div class="wrapper">
<img src="./1.jpg" >
<img src="./2.jpg" >
<img src="./3.jpg" >
<img src="./4.jpg" >
<img src="./5.jpg" >
<img src="./6.jpg" >
<img src="./7.jpg" >
<img src="./8.jpg" >
</div>
<script>
document.body.onmousemove = function(e){
this.style.perspectiveOrigin = e.pageX + "px " + e.pageY +"px"
}
</script>
</body>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
perspective: 2000px;
transform-style: preserve-3d;
height: 100%;
}
.wrapper{
width: 300px;
height: 300px;
position: absolute;
left: calc(50%);
top: calc(50%);
transform: translatex(-50%) translateY(-50%);
transform-style: preserve-3d;
animation: round 10s linear infinite;
}
@keyframes round{
0%{
transform: translatex(-50%) translateY(-50%) rotateY(0deg);
}
100%{
transform: translatex(-50%) translateY(-50%) rotateY(360deg);
}
}
img{
width: 300px;
position: absolute;
}
img:nth-of-type(1){
transform: rotateY(45deg) translateZ(500px);
}
img:nth-of-type(2){
transform: rotateY(90deg) translateZ(500px);
}
img:nth-of-type(3){
transform: rotateY(135deg) translateZ(500px);
}
img:nth-of-type(4){
transform: rotateY(180deg) translateZ(500px);
}
img:nth-of-type(5){
transform: rotateY(225deg) translateZ(500px);
}
img:nth-of-type(6){
transform: rotateY(270deg) translateZ(500px);
}
img:nth-of-type(7){
transform: rotateY(315deg) translateZ(500px);
}
img:nth-of-type(8){
transform: rotateY(360deg) translateZ(500px);
}
</style>
案例2：3d 魔方
<body>
<div class="box">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<script>
document.body.onmousemove = function(e){
this.style.perspectiveOrigin = e.pageX + "px " + e.pageY +"px"
}
</script>
</body>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
perspective: 2000px;
transform-style: preserve-3d;
perspective-origin: 800px 700px;
height: 100%;
}
.box{
width: 300px;
height: 300px;
position: absolute;
left: calc(50%);
top: calc(50%);
transform: translatex(-50%) translateY(-50%);
transform-style: preserve-3d;
animation: round 10s linear infinite;
}
@keyframes round{
0%{
transform: translatex(-50%) translateY(-50%) rotateY(0deg);
}
100%{
transform: translatex(-50%) translateY(-50%) rotateY(360deg);
}
}
.content{
width: 300px;
height: 300px;
position: absolute;
}
.content:nth-of-type(1){
transform:translateZ(150px);
background-color: red;
}
.content:nth-of-type(2){
transform:translateZ(-150px);
background-color: green;
}
.content:nth-of-type(3){
transform: rotateY(90deg) translateZ(150px);
background-color: yellow;
}
.content:nth-of-type(4){
transform: rotateY(-90deg) translateZ(150px);
background-color: salmon;
}
.content:nth-of-type(5){
transform: rotatex(90deg) translateZ(150px);
background-color: blue;
}
.content:nth-of-type(6){
transform: rotatex(-90deg) translateZ(150px);
background-color: orange;
}
</style>
（8）matrix矩陣
矩陣就是transform給我們選中的計算規則
/*
| 1 0 e | | x | | x + e |
| 0 1 f | * | y | = | y + f |
| 0 0 1 | | 1 | | 1 |
matrix(1,0,0,1,e,f) === translate(x,y)
| a 0 0 | | x | | ax |
| 0 b 0 | * | y | = | dy |
| 0 0 1 | | 1 | | 1 |
matrix(a,0,0,d,0,0) === scale(x,y)
*/
矩陣都是反向計算出來的
案例 倒影
<body>
<img src="./4.jpg" alt="">
<img src="./4.jpg" alt="">
</body>
<style>
/*
| 1 0 0 | | x | | x |
| 0 -1 0 | * | y | = | -y |
| 0 0 1 | | 1 | | 1 |
*/
img{
width: 300px;
height: 225px;
position: absolute;
}
img:nth-of-type(1){
top: 0px;
}
img:nth-of-type(2){
top: 225px;
width: 300px;
transform: matrix(1,0,0,-1,0,0);
}
</style>
八、CSS的性能優化
1、html渲染過程：構建DOM樹，構建CSSOM樹，根據DOM樹和CSSOM樹構建render樹，有了render樹就開始佈局Layout、最後繪製paint。
HTML整個解析過程看起來很簡單，但是我們要知道解析過程中css、js和dom的加載順序。我們都知道HTML是自上往下解析的，在解析過程中:
1、如果遇到link和style，那就就會去下載這些外部的css資源，但是css跟DOM的構建是並行的，就是說不會阻塞DOM樹的構建。
2、如果遇到script，那麼頁面就會把控制權交給JavaScript，直到腳本加載完畢或者是執行完畢。
3、頁面的渲染是依靠render樹，也就是說如果css沒有加載完成，頁面也不會渲染顯示。
4、JavaScript執行過程中有可能需要改變樣式，所以css加載也會阻塞JavaScript的加載。
5、JavaScript執行過程中如果操作DOM，但是DOM樹又是在JavaScript之後才能構建，就會報錯，找不到節點。
這就是HTML的渲染過程，因爲DOM和css並行構建，我們會把css用外部引入，可以更快的構建DOM，因爲JavaScript會阻塞DOM和css構建，且操作DOM一定要在DOM構建完成，我們選擇把script放在最下面。如果我們過多的在render渲染完成後改變render，那麼重排和重繪就會一直被動重發執行，這也會造成渲染速度變慢。
2、重構和重繪
reflow(重構):
1、改變窗口大小
2、改變文字大小
3、內容的改變，輸入框輸入文字
4、激活僞類，:hover
5、操作class屬性
6、腳本操作dom
7、計算offsetWidth和offsetHeight
8、設置style屬性
repaint(重繪):
如果只改變某個元素的背景色、文字顏色、邊框顏色，不影響
它周圍或內部佈局的屬性
repaint速度快於reflow
3、will-change
/*
瀏覽器刷新頁面的頻率1s 60次，平均16.7ms刷新一次
gpu可以在一幀裏渲染好頁面，那麼當你改動頁面的元素或者實現動畫的時候，將會非常流暢
處理gpu加速問題 給transform設一個監聽，讓瀏覽器預備一個層，
最好在該樣式發生變化的前一刻給設置上監聽，變化完成後最好刪除監聽
因爲在監聽過程中 瀏覽器會一直預備一個層 來給transform備用
如:在點擊前，設置will-change或者通過js判斷來設置
*/
div{
width: 100px;
height: 100px;
}
div:hover{
will-change: transform;
}
div:active{
transform: scale(2,2);
}
4、空間混色法：品字形或者柱狀行
1個像素 ==> 三個像點(紅綠藍) ==> 空間混色法
點距：從一個同色的點 到 另一個同色的點的距離
css像素px是邏輯像素 每個設備的物理像素不同，點距約等於像素
dpi：一英寸所能容納的像點數 1 in = 2.54 cm
ppi：一英寸所能容納的點距
dpr(設備像素比) = 物理像素/css像素
一般筆記本屏幕 200dpi ≈ 0.1mm 或者 0.15mm 非常好的屏幕
參照像素 以96dpi的屏幕 一臂之遙，顯示出來的具體大小
標杆 1/96 * 英寸
100dpi 200dpi 300dpi
標杆 1/96 * 英寸
100px * 100px 100px*2 *100px*2 100px*3 * 100px*3
柱狀柵格空間混色法示例
<body>
<div class="wrapper">
div.demo*1000
</div>
</body>
<style>
.wrapper{
display: flex;
}
.demo{
width: 1px;
height: 100px;
}
.demo:nth-of-type(2n){
background-color: #f00;
}
.demo:nth-of-type(2n+1){
background-color:#0f0;
}
.box{
width: 100px;
height: 100px;
background-color:#ff0
}
</style>
九、響應式網頁開發
分辨率:像素點的密集程度
如何在不同的設備上展示的效果相同？
1、meta viewport：適配各種不同分辨率的設備 ， 將頁面大小 根據分辨率不同進行相應的調節
<!--
1css px != 屏幕分辨率
一般默認視口寬度980px
width:視口寬度
device:設備的寬度
initial-scale:初始化的縮放 --》 windows上ie瀏覽器 橫豎屏的寬度 = 豎屏時候的寬度
width=device-width:iphone或者ipad 上橫豎屏的寬度 = 豎屏時候的寬度
user-scalable=no:不允許用戶縮放頁面
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2、響應式網頁開發方法
1. 流體網格:可伸縮的網格,大小寬高,都是可伸縮
(1)可用flex或者百分比來控制大小
(2)floa在佈局上面 元素大小不固定可伸縮
2. 彈性圖片:圖片寬高不固定（可設置min-width: 100%）
3. 媒體查詢:讓網頁在不同的終端上面展示效果相同（用戶體驗相同讓用戶用着更爽） 在不同的設備（大小不同 分辨率不同）上面均展示合適的頁面
4. 主要斷點： 設備寬度的臨界點
大小的區別 ---> 寬度不同 ---> 根據不同寬度展示不同的樣式
響應式網頁開發主要是在css樣式上面進行操作
3、媒體查詢
（1）媒體類型
all:適用於所有設備
print:用於打印機和打印預覽
screen：電腦屏幕，平板電腦，智能手機等
speech:應用於屏幕閱讀器等發聲設備
（2）引入方式
<!--外部引入
媒體特性必須加() -->
1.link中引入
<link rel="stylesheet" media="screen and (max-width:375px)" href="index.css">
2.style中引入
<style>
@import 'index.css' screen and (max-width:375px);
</style>
3.行間樣式
<style>
@media screen and (min-width:375px) and (max-width:375px) {
body{
background-color: yello;
}
}
</style>
媒體查詢不佔權重，一般將媒體查詢放在最後
（3）運算符
a、and 運算符：合併
b、,運算符：或者
<style>
@media screen and (min-width:375px) and (max-width:375px),print and (min-width:375px) {
body{
background-color: yello;
}
}
</style>
c、not運算符：非
<style>
@media not screen and (min-width:375px) {
body{
background-color: yello;
}
}
</style>
（4）單位值
rem：相對於父級元素的字體長度(font-size)
em：相對於當前元素文本的字體長度。默認是瀏覽器默認字體長度。
px：相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
vw：相對於視口的寬度。視口被均分爲100單位的vw
vh：相對於視口的高度。視口被均分爲100單位的vh
vmax： 相對於視口的寬度或高度中較大的那個。其中最大的那個被均分爲100單位的vmax
vmin：相對於視口的寬度或高度中較小的那個。其中最小的那個被均分爲100單位的vmin
漸進增強:向上兼容 想開發一個專用版本，再兼容最新的設備
優雅降級:向下兼容 先開發通用版本 再兼容老版本