整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
識 CSS — Cascading Style Sheets
CSS的世界是神奇的。隨著瀏覽器WEB標準的日趨統一，CSS在WEB世界中的扮演的角色也越來越重要。
我們從HTML開始，因為CSS的用途就是為了給HTML標記添樣式，所以我們要先知道怎么去寫HTML標簽
什么是CSS
HTML標記內容是為了給網頁賦予純粹的語義。換而言之就是為了讓用戶可以去理解里邊的含義。每一個標簽都是對所包含的內容的一種詮釋，描述。所以請記住HTML 就是文本+標記的一個文檔結構（請不要參雜CSS）。當我們給內容都打上標記，就可以使用CSS給標記添加樣式了。添加樣式的過程根據標簽名、標簽屬性、標簽等等的一些關系來給相對應的標簽添加樣式，so！ 先有 結構后有樣式。
簡單的來說CSS相當于一個神奇的化妝師，它可以去操作文檔的整體表現形式，針對布局、文字、顏色、背景、動畫效果等等實現精確的控制，讓文檔的表現更加的美觀好看，它的組成是由一系列有含義的單詞和數值所構成。
CSS樣式可以直接存儲于HTML網頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規則。外部使用時，樣式單規則被放置在一個帶有文件擴展名.css的外部樣式單文檔中。簡單的了解這個概念之后我們來學習一些基礎知識。
添加樣式的三種方式
有三種方法可以把CSS樣式添加到網頁中，分別是行內樣式、嵌入樣式、鏈接樣式
<!-- 行內樣式 -->
<p style="font-size:12px;font-weight:bold;color:red;background:yellow">Hello world</p>
<!-- 嵌入樣式 -->
<head>
<style>
p{font-size:12px;color:red;background:yellow}
</style>
</head><!-- 鏈接樣式 --> <link href="style.css" rel="stylesheet" type="text/css"> <!-- 要注意的是@import指令必須出現在樣式表其它樣式之前，否則不會被加載 --> <style> @import url(style.css); /* 注意看這里有一個分號 */ </style>
注：網頁的解析是從上到下，從左至右。當瀏覽器遇到開標簽<style>時，就會有解析HTML代碼切換成為解析CSS樣式代碼。再次遇到 </style>時，瀏覽器會再次切換成為解析HTML代碼
CSS規則
構成CSS規則有很多，主要就是選擇器。這里我們只需要掌握常用的選擇器，碰到特殊的再去查詢。
命名慣例
選擇符 {屬性：值；}
p { color : red; }
選擇器的分類
上下文選擇器
子選擇器 >
緊鄰同胞 +
一般同胞 ~
一般上下文選擇器
特殊上下文選擇器
id和class選擇器
#id{屬性：值；}
.class{屬性：值；}
tag.class{屬性：值；}
屬性選擇器
tag[屬性名]
tag[屬性名=”屬性值”]
什么時候使用id、class、屬性選擇器？
id 的用途是在頁面標記中唯一地標識一個特定的元素。
類是可以應用給任意多個頁面中的任意多個 HTML 元素的公共標識符 。簡單來說具有相同的特征的元素
基于屬性名和屬性的其它特征選擇元素，區別對待相同標簽，通過不同的標記找到適合的元素。
CSS選擇器圖解
我們可以通過圖形來理解一下
一般選擇器
1 2 3 4 5 6 7 8 9 10 11 12 | <style>
/* 選擇以p為祖先的 所有 span元素 */
p span{color: red;}
</style>
<body>
<h1><b>一般選擇器</b></h1>
<p>
<span>this is span</span>
<a><span>this is a</span></a>
<span>this is anthor span</span>
</p>
</body> |
2、特殊選擇器
子選擇器 >
1 2 3 4 5 6 7 8 9 10 11 12 | <style>
/* 標簽1 > 標簽2 也就是說1必須是2的父元素 */
p > span{color: red;}
</style>
<body>
<h1><b>一般選擇器</b></h1>
<p>
<span>this is span</span>
<a><span>this is a</span></a>
<span>this is anthor span</span>
</p>
</body> |
緊鄰同胞
1 2 3 4 5 6 7 8 9 10 | <style>
/* 標簽1 + 標簽2 標簽2必須緊跟在標簽1后邊 */
h1 + p{color: red;}
</style>
<body>
<h1>緊鄰同胞</h1>
<p>1</p>
<p>2</p>
<p>3</p>
</body> |
一般同胞
1 2 3 4 5 6 7 8 9 10 | <style>
/* 標簽1 ~ 標簽2 標簽2必須跟( 不一定緊跟 )在標簽1后邊 */
h1 ~ p{color: red;}
</style>
<body>
<h1>緊鄰同胞</h1>
<p>1</p>
<p>2</p>
<p>3</p>
</body> |
id、class選擇器 相當于警察叔叔直接查你的身份證（唯一性）、和查你的學生證（你有很多張從小學到大學做為一個特征，你是一個學生）
ps:
只不過有一個標簽帶類選擇器 更加精確的定位特定的標簽元素 (同理id選擇器也具有同樣的功能)
多類選擇 eg: <p class=”a b”></p> 可以這樣子去寫 .a.b{color: red}
偽類
偽類會基于特定的HTML元素的狀態應用樣式。我們在chrome、firfox開發者工具中任意右鍵點擊一個元素會看到一個菜單。接下來我們介紹一下偽類。Are you ready ?
鏈接偽類
在瀏覽器中樣式的時候它們可以幫助我們快速的進行變換。首先介紹一下鏈接偽類，因為任何一個鏈接始終都會處于下邊四個狀態之一
link 鏈接等著用戶點擊
visited 用戶點擊過這個鏈接
hover 鼠標懸停在鏈接上
active 鏈接正在被點擊
12345678910 | <!-- example 使用a標簽舉例 --><style> a:link {color: blue;} a:visited {color: green;} a:hover {color: red;} a:active {font-weight: bold;font-size: 20px;}</style><body> <a href="#">click me</a></body> |
偽類的寫法（：）一個冒號代表偽類，請務必區分和偽元素（：：）的寫法，稍后看這個?？吹缴厦娴睦?，可以看到a標簽也就是鏈接在初始的狀態的時候是blue ，當鼠標懸停在上方狀態為 red，當鼠標點擊鏈接其中的字體變大并且加粗了（為了效果而已），最后呈現的狀態visited 。
不過在這里地方可能會碰到一個很奇怪的問題link當你第一次設置的時候是有效果的第二次在看這個頁面的時候樣式不對了，請你清除一下瀏覽器的緩存，并更換一下href
實際中不會寫這么多只需要定義你所需要的， 比如用戶懸停的時候給一個鮮艷的顏色，為了告訴用戶快tm點我（畢竟是一個妖艷賤貨?乛?乛?）。如果這個鏈接目錄很長，那么就應該使用visited狀態給一個淺的顏色，對于用戶的提示作用有很大的幫助，當然也要看地方。
其它偽類、結構偽類
focus
獲取焦點，表單中使用
target（不常用）
當用戶點擊一個指向頁面中其它元素（target）的鏈接時，可以通過此偽類選擇
first-child、last-child
代表同胞組的第一個、最后一個
nth-child(n)
n代表一個數值，或者是odd奇數，even偶數
可以增強一切列表的可讀性，展現不同的效果
<!-- e:target --> <a href="#info">更多信息</a> <div id="info"> <h2>More information</h2> </div>
偽元素
顧名思義，偽元素是在你的文檔上時有時無的元素。介紹幾個常用的，并且區分一下偽類與偽元素的區別，一些小技巧。
請記得和偽類（：）的寫法區分，偽元素的寫法（：：），雖然瀏覽器對于一個：也是支持的但是為了避免大家混亂，請遵守規則。
::first-letter
選擇首字符
::first-line
選擇文本段落第一行
::before
在特定元素前邊添加內容
::after
在特定元素后邊添加內容(用來清除浮動)
<!-- 看到效果了記得告訴我?乛?乛? -->
<style type="text/css">
p::first-letter{font-size: 200%;color: red;}
</style>
<body>
<p>如果你喜歡我，你可以來找我呀！</p>
</body> |
1 2 3 4 5 6 7 8 9 10 | <!-- first-line會隨著屏幕大小改變 -->
<style type="text/css">
p::first-line{color: red;font-variant:small-caps;/* 以小型大寫字母展示 */}
</style>
<body>
<p>
I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal."
I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood
</p>
</body> |
<!-- before、after -->
<style type="text/css">
p::before{content: '小可愛們，'}
p::after{content: '小祺'}
</style>
<body>
<p>晚上好我是</p>
</body>ps：偽元素的能做的東西還很多以后我們在去了解。接下來我們來區分一下偽類與偽元素。
區分偽類與偽元素
偽類與偽元素是同學們最容易混淆的兩個知識點。最直觀的請大家通過寫法初步區分。1和2的區別
example
<!--
1. 通過偽類選擇第一個標簽并且添加紅色
2. 同樣我們可以使用一個類名給第一個標簽添加紅色
-->
<style>
.first{color: red;}
/*p span:first-child{color: red;}*/
</style>
<body>
<p>
<span class="first">HTML</span>
<span>Javascript</span>
</p>
</body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!--
1. 通過偽元素選擇第一個字符并且添加紅色
2. 同樣我們可以使用一個類名給第一個字符添加紅色
-->
<style>
.first{color: red;}
/*p::first-letter{color: red;}*/
</style>
<body>
<p>
<span class="first">C</span>ss偽元素
</p>
</body> |
到此我相信大家對CSS 的人是已經有了一定的了解了。
好了，今日就分享到這了，css還沒有講完，明日在分享！
言
CSS大家肯定都是會的但是每個人所撐握地情況都不一樣，特別是已經工作幾年的前輩(這里指的是我司)很多CSS玩法都不知道，可能他們已經習慣了用組件， 但是面試的時候又不可避免問，所以我整理了下CSS比較晦澀難懂的點總結寫了這篇文章，在最后也會有些面試中常問的CSS相關面試題，看完全文面試就不用慌了 。
對了，在這里說一下，我目前是在職web前端開發，如果你現在正在學習前端，了解前端，渴望成為一名合格的web前端開發工程師，在入門學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，都可以隨時關注并私信我：前端，我都會根據大家的問題給出針對性的建議，缺乏基礎入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎精講視頻教程， 還有我做web前端技術這段時間整理的一些學習手冊，面試題，開發工具，PDF文檔書籍教程，都可以直接分享給大家。
目錄
在線卑微，如果覺得這篇文章對你有幫助的話歡迎大家點個贊
css大三特性是css最重要的部分，可以說如果了解了這三大特性就對css撐握了一半，對于屬性只不過是記不記得住的事，而這個是重在理解。
在講這三個特性之前我們需要來全面了解下選擇器。
下面我將選擇進行劃分為三大部分，對于基本選擇器我就不說了，主要講下偽類選擇器，組合選擇器及它們各自的使用場景。
基本選擇器
算了還是講下屬性選擇器吧 ，這個選擇器我在項目開發中還是用到過的
直接看例子：
/* 匹配包含title屬性的a標簽=> <a title> */
a[title] {color: purple;}
/* 存在href屬性并且屬性值為"http://beige.world"的<a>標簽*/
/* <a href="http://beige.world"> */
a[href="http://beige.world"] {color: green;}
/* 存在href屬性并且屬性值包含"baidu"的<a>標簽*/
/*
<a href="https://baidu.com/we">
<a href="https://fanyi.baidu.com/we">
<a href="https://pan.baidu.com/we">
*/
a[href*="baidu"] {font-size: 20px;}
/* 存在id屬性并且屬性值結尾是"-wrapper"的<div>標簽 */
/*
<div id="btn-wrapper">
<div id="menu-wrapper">
<div id="pic-wrapper">
*/
div[id$="-wrapper"] {display: flex;}
/* 存在class屬性并且屬性值包含以空格分隔的"logo"的<div>元素 */
/*
<div id="aaa logo">
<div id="bbb logo">
*/
div[class~="logo"] { padding: 2px; }結構偽類
先講這兩比較作用類似的：nth-child(n) | nth-of-type(n)
結構
<ul>
<li>1</li>
<li>
<p>a1</p>
<div>b1</div>
<p>a2</p>
<div>b2</div>
</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> CSS
// 第一個li=> <li>1</li>
ul li:first-child { background-color: lightseagreen;}
// 最后一個li=> <li>5</li>
ul li:last-child { background-color: lightcoral;}
// 第三個li=> <li>3</li>
ul li:nth-child(3) { background-color: aqua; }
// 第二個li下的第一個div(不是div標簽的都不算)=> <div>b1</div>
ul li:nth-child(2) > div:nth-of-type(1) {background-color: red} 它倆的區別
下面講講nth-child()括號中的公式，這個算是這個選擇器的亮點了。
注意?：本質上就是選中第幾個子元素
對于這里面的公式平常也用不到太復雜的，我說下我的技巧：nth-child(3n + 3); 這里的n可以看做幾個為一組，3可以看做選這組的第幾個。
例： nth-child(5n + 3) ：5個為一組，選一組中的第三個。 對于"-"號就表示選擇的是前面的。
組合選擇器本質上就是通過連接符來對兩個選擇器進行組合
上面這兩我就不說了，相信大家都用爛了。主要說說下面這兩個。
結構
<div class="box1">
<div>One</div>
<div>Two!</div>
<div>Three</div>
<p>pppp</p>
</div>
<div class="box2">
<div>One2</div>
<p>pppp1</p>
<div>Two2!</div>
<p>pppp2</p>
</div> 選擇器解析
<style>
/*
(+標識)符介于兩個選擇器之間，當第二個選擇器匹配的元素緊跟著第一個元素后面并且它們都是同一個父親
.box1 div:first-of-type(A元素)
div(B元素)
匹配緊跟著A的B
*/
.box1 div:first-of-type+div { color: red; }
.box1 div:first-of-type+p { color: red;} 篩選不到的
/*
(~標識)符介于兩個選擇器之間，匹配第一個選擇器元素后面所有匹配第二個選擇器的同層級元素
.box2 div(A元素)
p(B元素)
匹配所有A后面的B
*/
.box2 div~p { color: seagreen; }
</style>好了，在講完這些選擇器之后我們來看看它們的使用場景。
組合選擇器可以用于：hover偽類操縱自己包含的子元素及以外的元素。舉個例子
<div id='a'>元素1
<div id='b'>元素2</div>
</div>
<div id='c'>元素3
<div id='b'>元素2</div>
</div>
<div>同級元素1</div>
<div>同級元素2</div>
<div>同級元素3</div>
</body>#a:hover > #b{....}
#a:hover ~ div{....} // 鼠標停留在a元素的時候讓所有同層級元素有某某樣式
// 防止選擇器層級替換了下面的樣式
#a:hover + #c{....} // 鼠標停留在a元素的時候讓同層級中的c元素有某某樣式
#a:hover + #c > #b{....} // 鼠標停留在a元素的時候讓同層級中的c元素下的b元素有某某樣式上面這兩選擇器在做一些特效頁的時候應該是會用到的。
效果
結構
<body>
<div class="img-box enter-box"> <!-- 懸浮在這個盒子的時候動態添加enter-box類名 -->
<img src="http://resource.beige.world/imgs/beige.jpg" alt="">
<div class="cover">
<h3>標題名稱</h3>
<p class="con">Bei Ge</p>
<p class="brier">這里放內容簡介，內容簡介,這里放內容簡介，內容簡介,這里放內容簡介，內容簡介</p>
<div class="handle"><span>.</span><span>.</span><span>.</span></div>
</div>
</div>
<!-- 其他盒子 -->
<div class="img-box">2</div>
<div class="img-box">3</div>
<div class="img-box">4</div>
<div class="img-box">5</div>
</body> 樣式
布局樣式
<style>
.img-box {
position: relative;
top: 100px;
left: 200px;
z-index: 1;
display: inline-block;
overflow: hidden;
background: #70adc4;
cursor: pointer;
transition: transform .5s, box-shadow .3s;
}
.img-box img {
width: 200px;
height: 200px;
opacity: 1;
float: left;
}
.img-box .cover {
width: 200px;
height: 200px;
padding: 15px;
position: absolute;
box-sizing: border-box;
color: hotpink;
}
.img-box .cover h3 {
margin-top: 10%;
font-size: 24px;
font-weight: bold;
text-shadow: 0 0 2px #ccc;
opacity: 0;
transition: opacity .5s;
}
.img-box .cover .con {
margin: 20px 0;
font-style: italic;
font-weight: bold;
transform: translateX(-150%);
}
.img-box .cover .brier {
font-size: 12px;
transform: translateX(150%);
}
.img-box .cover .handle {
position: absolute;
right: 10px;
bottom: -50px;
font-size: 25px;
transition: bottom 1s;
/* 對于position的過渡動畫, 不能用position, 直接用位置屬性: left right top bottom */
}
</style>定義了一個animation動畫
@keyframes textAnimation {
/* 0% {
transform: translateX(150%);
} */
100% {
transform: translateX(0);
}
}懸浮在盒子設置樣式
.img-box:hover {
transform: scale(1.1);
box-shadow: 2px 2px 13px 3px #ccc;
}
.img-box:hover img {
opacity: .5;
}
.img-box:hover .cover h3 {
opacity: 1;
}
.img-box:hover p {
animation: textAnimation .6s ease-out forwards;
/* forwards讓動畫停留在最后一幀 */
}
.img-box:hover .cover .handle {
bottom: 5px;
}
.enter-box:hover ~ .img-box {
background-color: transparent;
color: wheat;
}
.enter-box:hover + .img-box {
color: red;
}上面這個例子有些還沒有講，但是相信大家之前也都學過，后文中也會說。主要會說些細節方面的東西
這里需要注意在使用偽類Hover的注意點，在使用他影響子級元素的時候盡量將選擇器寫全。例：
先看下效果
上面的效果相信大家都能寫出來，所以我要講的肯定不是怎么去實現這個效果，我要說下使用Hover時的一些細節。
結構比較簡單
flex類名用于布局實現重置和水平居中，box: 綠色盒子；center: 紫色盒子 inner: 橙黃色盒子
<div class="box flex">
<div class="center flex">
<div class="inner"></div>
</div>
</div>我們用了一個:hover讓鼠標虛浮的時候讓盒子變紅
.box:hover div {
background-color: red;
}這里有一個問題不知道大家想過沒有，為什么我這段代碼只讓center盒子變紅了，inner為什么沒有變紅呢？？？
展開查看
因為CSS選擇器的優先級！我們在實現的時候一般都會像下面這樣寫吧，這個時候使用偽類選擇器改變元素樣式的時候就要注意選擇器優先級的問題了。
.box .center {
width: 150px;
height: 150px;
background-color: blueviolet;
}
.box .center .inner {
width: 100px;
height: 100px;
background-color: coral;
}這段代碼的優先級比.box .center高，所以他也就只能覆蓋它了。
.box:hover div {
background-color: red;
}相信我們很多人如果在寫鼠標懸浮大盒子讓最里面的inner盒子變色的時候，都會這么寫吧：
.box:hover .inner {
background-color: red;
}有用嗎？沒用！
注意?: 優先級還是沒有.box .center .inner高。
所謂層疊性是指多種CSS樣式的疊加。是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉
原則：
CSS層疊性最后的執行口訣： 長江后浪推前浪，前浪死在沙灘上。繼承性
子標簽會繼承父標簽的某些樣式，如文本顏色和字號。 想要設置一個可繼承的屬性，只需將它應用于父元素即可。簡單的理解就是： 子承父業
CSS繼承性口訣： 龍生龍，鳳生鳳，老鼠生的孩子會打洞
我們恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。比如有很多后代元素都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。
注意點：在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
可繼承的屬性
控制繼承
注意點: 對于天生自帶的繼承屬性我們可以控制它是否需要繼承
四個屬性
效果圖
演示
<ul style="color: green;">
<li class="default">Default <a href="#">link</a> color</li>
<li class="inherit">Inherit the <a style="color: inherit;" href="#">link</a> color</li>
<li class="initial">Reset the <a style="color: initial;" href="#">link</a> color</li>
<li class="unset">Unset the <a style="color: unset;" href="#">link</a> color</li>
</ul>如果我們需要控制元素所有屬性的繼承使用all屬性
.inherit a {
all: initial;
/* 將所有的屬性都恢復成默認值(天生繼承也不再繼承) */
/* 行內設置過的除外：你的層級干不過人家 */
}這個不難，但是忽略很容易繞暈。其實，我們修改樣式，一定要看該標簽有沒有被選中。
（1） 如果選中了，那么以上面的公式來計權重。誰大聽誰的。 （2） 如果沒有選中，那么權重是0，因為繼承的權重為0.
控制繼承在我們封裝自己的組件的時候是會用到的，我們在封裝組件需要沿用樣式，有些默認情況下不可繼承父元素的屬性：box-sizing，這個其實用的就很多。
優先級
要想了解優先級，肯定得了解選擇器；但是選擇器非常多的，前面列舉的是日常開發用的比較多，其他的你可能一輩子都用不到，這里貼出C1~C4的選擇器，感興趣的同學可以看看。
定義CSS樣式時，經常出現兩個或更多選擇器應用在同一元素上，此時，
關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）
值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。
常用的選擇器記法：
權重疊加
我們經常用組合選擇器，是有多個基礎選擇器組合而成，那么此時，就會出現權重疊加。
就是一個簡單的加法計算
注意?: 數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5=0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。
important適用優先級
#id .box div {
color: red !important;
}
#id div.box div {
color: green !important; // 使用這個選擇器中的顏色
}下面來幾道題，全對才算通過了噢
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3 {
color:green;
}
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>什么顏色??
yellow 上面兩選擇器的層級都是一樣的, 后者覆蓋前者
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
試問這行字體是什么顏色的？
</p>
</div>
</body>blue
<body>
<style>
div.parent {
width: 300px;
height: 300px;
border: 10px solid #000;
font-size: 46px;
text-shadow: 3px 13px 4px green;
box-sizing: border-box
}
div.child {
width: 200px;
height: 200px;
background-color: brown;
border: 5px solid #000;
width: inherit;
box-sizing: inherit;
font-size: 80px;
}
</style>
</head>
<div class="parent">
<div id="child" class="child">123</div>
</div>
<!--
child: 字體多大? 有沒有文字陰影? 真實內容的寬高是多少?
-->
</body>字體：80，有文字陰影，真實內容的寬：290px 高190px
講下這最后一題
文字陰影有：因為從父元素中繼承到了,字體: 80px;
真實內容寬290px, 高190px
flex布局相信大家也都用爛了，用來讓盒子垂直和水平居中好用的一批
父項常用屬性
flex-direction
在 flex 布局中，是分為主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
主軸和側軸是會變化的，就看 flex-direction 設置誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的
flex-wrap設置是否換行
justify-content 設置主軸上的子元素排列方式
效果圖
這里講下space-around和space-evenly
space-evenly：項目兩側之間的間距與項目與容器兩側的間距相等，相當于除去項目寬度和容器和項目的兩側間距，剩下的平均分配了剩余寬度作為項目左右margin。
**設置側軸上的子元素排列方式：align-items(單行)/align-content(多行) **
上圖寫能設置多行只能用于子項出現 換行 的情況（多行），在單行下是沒有效果的。
效果跟上面是一樣的只不過是方向換了，上面是元素在主軸上排列，這個是在側軸上，至于側軸是不是Y軸就看你的flex-direciton怎么設置的了
子項常見屬性
flex-grow
默認0，用于決定項目在有剩余空間的情況下是否放大，默認不放大；注意，即便設置了固定寬度，也會放大。
假設第一個項目默認為0，第二個項目為flex-grow:2，最后一個項目為1，則第二個項目在放大時所占空間是最后項目的兩倍。
可以這么理解:
假設三個盒子分別都設置了上面的屬性: 那就將剩余空間分成6份, 各占自己的份數
假設前兩個沒有設置, 就最后一個設置了flex: 3===flex: 1, 那就將剩余空間都給它flex-shrink
默認1，用于決定項目在空間不足時是否縮小，默認項目都是1，即空間不足時大家一起等比縮??；注意，即便設置了固定寬度，也會縮小。但如果某個項目flex-shrink設置為0，則即便空間不夠，自身也不縮小。
上圖中第二個項目flex-shrink為0，所以自身不會縮小。
flex-basis
默認auto，用于設置項目寬度，默認auto時，項目會保持默認寬度，或者以width為自身的寬度，但如果設置了flex-basis，權重會width屬性高，因此會覆蓋widtn屬性。
上圖中先設置了flex-basis屬性，后設置了width屬性，但寬度依舊以flex-basis屬性為準。
注意?: 如果當容器中有多個盒子并且還寬度100%, flex-basis會被影響, 如下圖
解決辦法就是在我們設置flex-basis寬度時, 最好給他設置flex-shrink為0不縮放
transform
2D的屬性相信大家都會用了, 本文主要深究transform的3D屬性
透視(perspective)
在講3D之間先來了解一下透視(視距)，只有了解了透視我們才能理解3D的物體投影在2D平面上
注意: 透視需要寫在被視察元素的父盒子上面
拿圖說話
來個例子
給實例的父元素設置: perspective: 200px;上面我們在div的父盒子上設置了perspective，也就是說從3D成像的角度來講我們人眼距離屏幕div是200的視距，translate3D設置Z軸讓div往前挪了100，視距變小距離我們人眼距離也就越小，所以看到的div也就變大了。 （可以想像成在500米遠看見的人， 和5米看見的人。）
translate3d(x, y, z)
3D的特點
三維坐標系
3D 呈現 transform-style
transform-style：控制子元素是否開啟三維立體環境，代碼寫給父級，但是影響的是子盒子
效果圖
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 讓子元素保持3d立體空間環境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}rotate3d(x, y, z)
3D 旋轉指可以讓元素在三維平面內沿著 x 軸、y 軸、z 軸 或者自定義軸進行旋轉
例子：
<ul>
<li>
<div class="box">
<div class="front">公眾號:</div>
<div class="bottom">前端留學生</div>
</div>
</li>
</ul>ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
/* 一會我們需要給box 旋轉 也需要透視 干脆給li加 里面的子盒子都有透視效果 */
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.front {
background-color: pink;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 這個x軸一定是負值 */
/* 我們如果有移動 或者其他樣式，必須先寫我們的移動 */
transform: translateY(17.5px) rotateX(-90deg);
}動畫(animation)是 CSS3 中最具顛覆性的特征之一，可通過設置多個節點來精確的控制一個或者一組動畫，從而實現復雜的動畫效果, 先定義動畫再調用定義好的動畫
動畫序列
0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
@keyframes move{
0% {
transform: translate(0px)
}
form {
transform: translate(0px)
}
100% {
transform: translate(500px, 0)
}
to {
transform: translate(500px, 0)
}
}動畫常見屬性
動畫簡寫方式
/* animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態 */
animation: name duration timing-function delay iteration-count direction fill-mode除了名字，持續時間，何時開始有嚴格順序要求其它隨意
CSS實現掃描二維碼
效果
BFC(Block formatting context)直譯為"塊級格式化上下文"。
在講BFC之前得先說下display的屬性值，只有它符合成為條件才資格觸發BFC機制
那些屬性值會具有BFC的條件
不是所有的元素模式都能產生BFC，w3c 規范： display 屬性為 block, list-item, table 的元素，會產生BFC.
大家有沒有發現這個三個都是用來布局最為合理的元素，因為他們就是用來可視化布局。注意其他的，display屬性，比如 line 等等，他們創建的是 IFC ，我們下面研究。
這個BFC 有著具體的布局特性：
有寬度和高度，有 外邊距margin 有內邊距padding 有邊框 border。就好比，你有了練習武術的體格了。 有潛力，有資質。
什么情況下可以讓元素產生BFC
以上盒子具有BFC條件了，就是說有資質了，但是怎樣觸發才會產生BFC，從而創造這個封閉的環境呢？
就好比，你光有資質還不行，你需要一定額外效果才能觸發的武學潛力，要么你掉到懸崖下面，撿到了一本九陰真經，要么你學習葵花寶典，欲練此功必先....
同樣，要給這些元素添加如下屬性就可以觸發BFC。
它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
白話文： 孩子在家里愿意怎么折騰都行，但是出了家門口，你就的乖乖的，不能影響外面的任何人。(1) 清除元素內部浮動
只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式
主要用到
計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
(2) 解決外邊距合并(塌陷)問題
主要用到
盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發生重疊
屬于同一個sBFC的兩個相鄰盒子的margin會發生重疊，那么我們創建不屬于同一個BFC，就不會發生margin重疊了。
(3) 制作右側自適應的盒子問題
主要用到
普通流體元素BFC后，為了和浮動元素不產生任何交集，順著浮動邊緣形成自己的封閉上下文
BFC 總結
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合并等等，因此，有了這個特性，我們布局的時候就不會出現意外情況了。
IFC（inline Formatting Context）叫做“行級格式化上下”相對BFC比較簡單且問的也不是很多，這里大概做個了解
布局規則如下：
哪些屬性開啟了性能加速
何為硬件加速：就是將瀏覽器的渲染過程交給GPU(Graphics Processing Unit)處理，而不是使用自帶的比較慢的渲染器。這樣就可以使得animation與transition更加順暢
我們可以在瀏覽器中用CSS開啟硬件加速，使GPU發揮功能，從而提升性能
所謂GPU，就是圖形處理器的縮寫，相當于PC中的顯卡。手機中的GPU也是為了對圖形、圖像處理而存在的，所謂強制渲染，就是hwa（hardware acceleration硬件加載）的一種，其存在的意義就是為了分擔cpu的負擔，其原理是通過GPU對軟件圖形的處理來減輕CPU的負擔。從而使應用軟件能夠以更快的速度被處理，以達到提速的目的。
硬件加速的原理
瀏覽器接收到頁面文檔后，會將文檔中的標記語言解析為DOM樹。DOM樹和CSS結合后形成瀏覽器構建頁面的渲染樹。渲染樹中包含大量的渲染元素，每個渲染元素會被分到一個圖層中，每個圖層又會被加載到GPU形成渲染紋理，而圖層在GPU中transform是不會觸發repaint的，最終這些使用transform的圖層都會由獨立的合成器進程進行處理, CSS transform會創建了一個新的復合圖層，可以被GPU直接用來執行transform操作。
瀏覽器什么時候會創建一個獨立的復合圖層呢？事實上一般是在以下幾種情況下：
因為transform屬性不會觸發瀏覽器的repaint（重繪），而絕對定位absolute中的left和top則會一直觸發repaint（重繪）。
為什么transform沒有觸發repaint呢？
簡而言之，transform動畫由GPU控制，支持硬件加載，并不需要軟件方面的渲染。并不是所有的CSS屬性都能觸發GPU的硬件加載，事實上只有少數的屬性可以，比如transform、opacity、filter
CSS animation、transform以及transition不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執行，那我們怎樣才可以切換到GPU模式呢，很多瀏覽器提供了某些觸發的CSS規則。
當瀏覽器檢測到頁面中某個DOM元素應用了某些CSS規則時就會開啟，最顯著的特征的元素是3D變化。
.cube{
translate3d(250px,250px,250px);
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5,0.5,0.5);
}可能在一些情況下，我們并不需要對元素應用3D變幻的效果，那怎么辦呢?這時候我們可以使用“欺騙”瀏覽器來開啟硬件加速。雖然我們可能不想對元素應用3D變換，可我們一樣可以開啟3D引擎。例如我們可以用transform:translateZ(0);來開啟硬件加速
.cube{
transform: translateZ(0);
}如果文章中有那塊寫得不太好或有問題歡迎大家指出，我也會在后面的文章不停修改。也希望自己進步的同時能跟你們一起成長。喜歡我文章的朋友們也可以關注一下
此時，年輕的我和你，輕裝上陣；而后，富裕的你和我，滿載而歸。
作者：前端自學驛站
鏈接：https://juejin.im/post/6888102016007176200
來源：掘金
源：眾成翻譯 譯者：myvin
讓我們用萬圣節主題帖來盡情慶祝萬圣節吧。我會使用一些來自CSS選擇器王室墳墓的CSS選擇器來拉開序幕，這些東西可是會讓你害怕到骨子里的喲。額，也許沒有那么恐怖，但是至少它們是有些詭異的。
遲鈍的貓頭鷹選擇器
兩年前，Heydon Pickering將它發揚光大，它看起來是這個樣子的:
* + * {
margin-top: 1.5em;
}
無圖無真相，看看這遲鈍的貓頭鷹吧。這回記住了吧？！
插圖來自Ping Zhu，摘自A List Apart。
這里想要實現的是給所有擁有前一個同胞節點的元素設置margin-top值。你沒必要像下面這樣做：
.the-last-one-so-don't-put-margin-on-me {
margin-bottom: 0;
}
使用貓頭鷹選擇器，你將會得到均勻的間隔：
CodePen 代碼
你也可以看看其他的小伙伴是如何玩轉這個選擇器的。
幽靈選擇器
這個小家伙太詭異了，以至于我的WordPress網站都保存不了，所以讓我們使用CodePen來看下效果（嵌入頁面的CodePen看起來可能也會有些詭異，所以請嘗試直接在CodePen上查看）：
說到那些不同尋常的角色，當然也不能少了emoji表情！
怪物選擇器
說到那些不同尋常的角色，再來看看這些顏文字吧：
顏文字
上面列出的都是可以作為選擇器的喲！但是在這種情況下，一些字符需要用工具或者其他的方式來轉義。幸運的是，Mathias Bynens已經提供了轉義的工具。
這就意味著我們可以像這樣做：
呆瓜選擇器
the-brain:empty {
color: green;
}
哪種選擇器可以作為大腦呢？我們可以通過瘋狂的科學來創建一個像弗蘭肯斯坦一樣的怪物?；蛘咧皇莿摻ㄒ粋€普通的元素，也或者是其他什么元素。
<template>The brain!</template>
（據說現在已經支持使用customElements.define()來實現了？不管你知道不知道，反正我是不知道~.~）。
所以現在如果我們像下面這樣寫的話我們的選擇器就會被匹配到：
<the-brain></the-brain>
但是正如選擇器所示的那樣，如果我們這樣寫的話是不會被匹配到的：
<the-brain>Fallback content inside.</the-brain>
這樣寫也匹配不到：
<the-brain> </the-brain>
除非我們可以使用the-brain:blank {}，但是:blank還沒有被真正地支持。
麻木不仁的選擇器
比呆瓜更可怕的是什么？不管是什么，當然不可能是個泛泛之輩。好吧，它是一個看起來仍然很詭異的選擇器，對吧？
a[href$=".zip" i] { }
末尾的"i"表示：屬性值".zip"不管是大寫還是小寫都是會被匹配到的。
該段代碼來自Wes Bos：
CSS4 is getting case insensitive matching on attribute selectors! pic.twitter.com/7LQBi2VUcL
— Wes Bos (@wesbos) December 2, 2015
堅強不屈的選擇器
實現僵尸 斑馬紋很簡單對吧？
tr:nth-child(odd) {
background: WhiteSmoke;
}
但是如果我們使用JavaScript的神奇魔法，通過在某些行上添加一個類使該行在視覺上消失遁形，結果會怎么樣呢：
...
<tr><td></td></tr>
<tr class="BANISHED"><td></tr></tr>
<tr><td></td></tr>
...
.BANISHED {display: none;}
現在我們的斑馬紋已經一團糟了，就像在施法召喚的時候一堆蠑螈掉進了藥鍋（哦，對不起）。
CSS4對此有相應的解決之道:
tr:nth-child(odd of li:not(.BANISHED)) {background: WhiteSmoke;}
上面的寫法表示的是，在可見的行上計算奇偶，如此一來，斑馬紋依然堅強不屈地保持完好無損。
然而該選擇器還沒有被完全支持，所以讓我們像女鬼一樣嚎叫吧，嚎叫到天荒地老，嚎叫到該選擇器被完全支持。
穿腸而過的匕首選擇器
還記得我們之前創建的那個特定元素<the-brain>嗎？假如元素的模板內部有一些實實在在的HTML標簽，就像這個樣子：
<template>
<div class="braaaain">The brain!</div>
</template>
正如我們所見，你給元素添加了樣式，然后期望這個元素會乖乖地帶著樣式展現出來。但是，你血淋淋的雙手是沒有辦法直接將其穿腸而過的。
/* works fine */
the-brain {
color: pink;
}
/* But you can't reach inside like this */
.braaaain {
color: red;
}
這其實就是封裝，是web組件化的關鍵所在，但是你可以用一把匕首刺穿這個幽靈的SHADOW DOM，就像這個樣子：
html /deep/ .braaaain {
color: red;
}
但是現在只有Blink內核支持，我無法確定這會不會成為標準。Word的天啊，跨瀏覽器兼容之痛啊。
ID選擇器
#container {
}
這個就太具體了，哈哈哈~~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
