精品久久Av电影,亚洲一区二区三区视频,俺去啦操你拉

CSS：全稱Cascading Style Sheets（層疊樣式表）
CSS 規(guī)則由兩個(gè)主要部分構(gòu)成,選擇器(給誰(shuí)改樣式)以及一條或多條聲明
h1 { color:red; font-size: 25px; } h1 即為選擇器, color:red;是一條聲明,每條聲明后面一定要加分號(hào)結(jié)束, 選擇器就是根據(jù)不同需求把不同的標(biāo)簽選出來(lái),
CSS 屬性名，屬性值關(guān)鍵字雖然大寫(xiě)也能執(zhí)行，但是推薦使用小寫(xiě)，冒號(hào)后面保留一個(gè)空格，選擇器和大括號(hào)中間也保留一個(gè)空格

選擇器

選擇器（選擇符）的作用就是根據(jù)不同需求把不同的標(biāo)簽選出來(lái)，簡(jiǎn)單說(shuō)就是選擇標(biāo)簽用的

選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器
基礎(chǔ)選擇器是由單個(gè)選擇器組成的,包括: 標(biāo)簽選擇器、類選擇器、id 選擇器和通配符選擇器
1. 標(biāo)簽選擇器:是指用 html 標(biāo)簽名稱作為選擇器,按標(biāo)簽名稱分類,為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的 CSS 樣式,能快速為頁(yè)面中同類型的標(biāo)簽統(tǒng)一設(shè)置樣式,不能差異化設(shè)置。

標(biāo)簽名 {
  屬性1: 屬性值1;
  屬性 2: 屬性值 2;
  ...
}

類選擇器: 如果想要差異化選擇不同的標(biāo)簽,單獨(dú)或者幾個(gè)標(biāo)簽,可以使用類選擇器, 在標(biāo)簽中通過(guò) class 屬性來(lái)設(shè)置樣式，類選擇器使用.標(biāo)識(shí)，.后緊跟類名

.類名 {
  屬性1: 屬性值 1;
  屬性2: 屬性值 2;
  ...
}
<div class='類名'> 紅色</div>

可以給一個(gè)標(biāo)簽指定多個(gè)類名,從而達(dá)到更多的選擇的目的,這些類名都可以選出這個(gè)標(biāo)簽, class 屬性值中將多個(gè)類型用空格分開(kāi)既可給標(biāo)簽指定多個(gè)類名

<style>
  .red {
    color: red;
  }
  .font12 {
   font-size: 12px;
  }
</style>
<div class="red font12">多類名</div>

id 選擇器: 可以為標(biāo)有特定 id 的 html 元素指定特定的樣式,css 中以#來(lái)定義 id 選擇器, 只能被調(diào)用一次（如果有標(biāo)簽已經(jīng)調(diào)用了，則后面的標(biāo)簽不允許再調(diào)用）, 用于頁(yè)面唯一性的元素,經(jīng)常的 JS 搭配使用

#id名{
  屬性1: 屬性值 1;
  屬性 2: 屬性值 2;
  ... 
}

在標(biāo)簽中將 id 設(shè)置為 css 中定義的id名就好, <div id="id名"> red</div>

通配符選擇器: 以*號(hào)表示,不用被調(diào)用,自動(dòng)會(huì)用里面的屬性值把所有標(biāo)簽的對(duì)應(yīng)樣式都修改掉

* {
  
}

font-family 屬性可以設(shè)置一個(gè)字體或多個(gè)字體, 如果字體名字中間有空格,需要用引號(hào)包起來(lái),當(dāng)設(shè)置多個(gè)字體時(shí),用逗號(hào)隔開(kāi),會(huì)優(yōu)先使用第一個(gè),第一個(gè)沒(méi)有時(shí)才用第二個(gè),第二個(gè)沒(méi)有才用第三個(gè),以此類推....,如果都沒(méi)有裝,就會(huì)使用電腦上默認(rèn)的字體。通常為了兼容性,推薦使用系統(tǒng)默認(rèn)字體,保證在任何瀏覽器中都能正確顯示.通常設(shè)置 body 的字體,這樣就能改變所有字體,應(yīng)該所有顯示的內(nèi)容都在 body 里.
font-size: 由于不同瀏覽器默認(rèn)字體大小不一致,所以通常要明確指定字體的大小值,記得加上px, 一般設(shè)置 body 標(biāo)簽的字體大小,就能改變所有標(biāo)簽的字體大小了,但是標(biāo)題標(biāo)簽比較特殊,需要單獨(dú)指定。
font-weight: normal 相當(dāng)于 400, bold 相當(dāng)于 700
font-style: normal標(biāo)準(zhǔn)樣式, italic 斜體樣式
font的復(fù)合屬性,注意順序是固定死的, font-style 和 font-weight 可以省略, 但是font-size和font-family一定不能省

div {
  font: font-style font-weight font-size/line-height font-family;
}

文本屬性
1. color 屬性支持三種方式的值:
  預(yù)定義的顏色值,比如: red 、green、blue
  十六進(jìn)制: #FF0000、#FF9900 注意以#開(kāi)頭
  RGB代碼: rgb(255,0,125)或者 rgb(100%,0,50%)
2. text-align: 水平對(duì)齊方式 left（默認(rèn)）、center、right
3. text-decoration: 添加下劃線、刪除線、上劃線等 none、underline、line-through、overline?？梢酝ㄟ^(guò)設(shè)置a標(biāo)簽的text-decoration：none屬性，將其自帶的下劃線去掉
4.text-indent: 文本第一行的縮進(jìn),單位可以是 px,也可以是 em,一單位的 em 表示一個(gè)字符的大小
1. line-height: 行間距/行高

CSS 引入的三種方式

內(nèi)部樣式表(嵌入式):是寫(xiě)到 html 頁(yè)面內(nèi)部,是將所有的 CSS 代碼抽取出來(lái),單獨(dú)放到一個(gè)<style>標(biāo)簽中, 這個(gè)<style>標(biāo)簽理論上可以放到 html 文檔中的任何地方,但一般會(huì)放在文檔的<head>標(biāo)簽中,通過(guò)這種方式,可以方便的控制當(dāng)前整個(gè)頁(yè)面中的元素樣式設(shè)置
行內(nèi)樣式表(行內(nèi)式):在標(biāo)簽的 style 屬性上進(jìn)行賦值<div style="color: red; font-size: 12px"> 內(nèi)部樣式表</div>
外部樣式表(鏈接式):樣式單獨(dú)寫(xiě)到 css 文件中,之后把 css 文件使用<link>標(biāo)簽引入到html 文件中,<link rel="stylesheet" href="style.css">，rel表示使用的樣式表，href表示css文件路徑

Emmet 語(yǔ)法

快速生成html標(biāo)簽語(yǔ)法

生成標(biāo)簽：直接輸入標(biāo)簽名，按回車鍵即可，比如輸入div 然后按回車鍵，就可以生成<div></div>
生成多個(gè)相同標(biāo)簽：直接輸入標(biāo)簽名數(shù)量，然后按回車鍵即可，比如div3，然后按回車鍵，就可以快速生成3個(gè)div
有父子關(guān)系的標(biāo)簽：可以用>,比如 ul>li ，回車，就可以生成<ul><li></li></ul>
有兄弟關(guān)系的標(biāo)簽：可以使用+連接，比如 div+p，回車，就可以生成<div></div><p></p>
如果生成帶有類名或者id名字的，直接寫(xiě).類名，或者#id名，回車即可，比如輸入 .demo 回車就可生成<div class=‘demo’></div>，輸入#two 回車就可生成<div id=‘two’></div>
如果生成的div類名是有順序的，可以使用自增符號(hào)$,比如輸入.demo$*5回車就可生成<div class=‘demo1’></div><div class=‘demo2’></div><div class=‘demo3’></div><div class=‘demo4’></div><div class=‘demo5’></div>
如果想要在生成的標(biāo)簽內(nèi)部寫(xiě)內(nèi)容可以用{}表示，比如 div{asdfsfs} 就會(huì)生成<div>asdfsfs</div>

快速生成CSS樣式語(yǔ)法

比如輸入tac可以生成 text-align：center；
輸入w100可以生成width：100px；
輸入h100可以生成height：200px；
輸入lh26可以生成line-height：26px；
輸入tdn可以生成text-decoration：none；
.......

格式化代碼

shift+option+f 可以格式化當(dāng)前文檔,或者點(diǎn)擊當(dāng)前頁(yè)面右鍵選擇格式化文檔
點(diǎn)擊左下角設(shè)置圖標(biāo)-->設(shè)置-->搜索emmet.include-->在 setting.json 中添加下面兩條語(yǔ)句:

"editor.formatOnType":true,
"editor.formatOnSave":true,

設(shè)置好后,每次只要保存代碼會(huì)自動(dòng)的幫我們格式化代碼

復(fù)合選擇器

復(fù)合選擇器: 是建立在基礎(chǔ)選擇器之上,對(duì)基本選擇器進(jìn)行組合形成的; 復(fù)合選擇器可以更準(zhǔn)確,更高效的選擇目標(biāo)元素(標(biāo)簽); 復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器,通過(guò)不同的方式組合而成的。主要包括: 后代選擇器、子選擇器、并集選擇器、偽類選擇器等等
后代選擇器: 又稱包含選擇器,可以選擇父元素里面子元素,其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面,內(nèi)層標(biāo)簽寫(xiě)在后面,中間用空格分隔,當(dāng)標(biāo)簽發(fā)生嵌套時(shí),內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
元素1 元素2 { 樣式聲明 }

ol li { // 指定 ol 中的 li 標(biāo)簽顏色為紅色
    color: red;
}

注意: 元素1 和元素2 中間用空格隔開(kāi),元素 2 可以是兒子也可以是孫子,只要是元素 1 的后代都可以,元素 1 和元素 2 可以是任意的基礎(chǔ)選擇器,前面也可以加自定義的類名.nav ol li { 樣式聲明 }

子選擇器: 只能選擇作為某元素的最近一級(jí)子元素,簡(jiǎn)單理解就是選親兒子元素,孫子及后代不選，使用>隔開(kāi)
元素1>元素 2 { 樣式聲明 }
并集選擇器: 可以選擇多組標(biāo)簽,同時(shí)為他們定義相同的樣式,通常用于集體聲明,使用逗號(hào)隔開(kāi), 任何形式的選擇器都可以作為并集選擇器的一部分
元素1,元素2 { 樣式聲明 }
div,p,.pig li { color: red; }
偽類選擇器: 用于向某些選擇器添加特殊的效果,比如鼠標(biāo)放到標(biāo)簽上,標(biāo)簽產(chǎn)生變化。其最大的特點(diǎn)是用冒號(hào)(:)表示,比如 :hover、:first-child。
1. 鏈接偽類選擇器:
  a:link // 選擇所有未被訪問(wèn)的鏈接
  a:visited // 選擇所有已被訪問(wèn)的鏈接
  a:hover // 選擇鼠標(biāo)指針位于其上的鏈接
  a:active // 選擇活動(dòng)鏈接(鼠標(biāo)按下未彈起的鏈接)

a:link {
  color: #333333;
  text-decoration: none;
}

注意:使用偽類選擇器的時(shí)候順序不要寫(xiě)錯(cuò)了,一定要是:link :visited :hover :active。
a 標(biāo)簽的樣式由于瀏覽器有默認(rèn)設(shè)置,所以需要單獨(dú)設(shè)置

:focus 偽類選擇器: 用于選取獲得焦點(diǎn)的表單元素,焦點(diǎn)就是光標(biāo), 主要是 input 使用

input:focus {
    color: red;
}

CSS 的元素顯示模式:

塊元素

特點(diǎn)：
1. 自己獨(dú)占一行
2. 高度，寬度，內(nèi)外邊距都可以控制
3. 寬度是默認(rèn)容器（父級(jí)寬度）的100%
4. 是一個(gè)容器及盒子里面可以放行內(nèi)或者塊級(jí)元素
5. 常見(jiàn)塊元素有h1～h6，p，div，ul，ol，li等

注意：文字類的元素內(nèi)不能使用塊級(jí)元素，比如p標(biāo)簽和h標(biāo)簽里面主要用于存放文字，因此不能放塊級(jí)元素

行內(nèi)元素

也稱內(nèi)聯(lián)元素
特點(diǎn)：
1. 一行可以顯示多個(gè)
2. 高度，寬度直接設(shè)置是無(wú)效的
3. 默認(rèn)寬度是它本身的寬度
4. 行內(nèi)元素只能容納文本或其他行內(nèi)元素
5. 常見(jiàn)行內(nèi)元素有a,b,strong,em,i,del,s,ins,u,span等
注意：鏈接里不能在放鏈接， a里面可以放塊級(jí)元素

行內(nèi)塊元素

特點(diǎn)：
1. 同時(shí)具有塊元素和行內(nèi)元素的特點(diǎn)
2. 和相鄰行內(nèi)元素在一行上，但是他們之間會(huì)有空隙，一行可以顯示多個(gè)（行內(nèi)元素特點(diǎn)）
3. 默認(rèn)寬度就是它本身內(nèi)容的寬度（行內(nèi)元素特點(diǎn)）
4. 高度，行高，內(nèi)外邊距都可以控制（塊級(jí)元素特點(diǎn)）
5. 常見(jiàn)行內(nèi)塊級(jí)元素有 img、input、td

顯示總結(jié)

顯示模式的轉(zhuǎn)換

在對(duì)應(yīng)的樣式中設(shè)置對(duì)應(yīng)的 display 值就可以做對(duì)應(yīng)的轉(zhuǎn)換

a {
  width: 200px;
  height: 100px;
  display: block;
}

轉(zhuǎn)換為塊元素 display: block;
轉(zhuǎn)換為行內(nèi)元素 display: inline;
轉(zhuǎn)換為行內(nèi)塊元素 display: inline-block;
讓 line-height 的高度和 height 的高度相等,既可設(shè)置垂直居中
background-color: 背景色
background-image: 背景圖片,容易控制位置, 設(shè)置為 none,就是沒(méi)有背景圖片;設(shè)置為 url,就是有背景圖片background-image: url(images/icon.png)
background-repeat: repeat | no-repeat | repeat-x | repeat-y: 背景平鋪,默認(rèn)是平鋪的
background-position: x y; 背景圖片位置, x y 如果表示方位名詞(top、center、left、right、bottom), 如果只設(shè)置了一個(gè),另一個(gè)默認(rèn)居中對(duì)齊; x y 如果表示精確單位需要帶上單位 px,此時(shí)第一個(gè)值是水平方向的偏移,第二個(gè)值是垂直方向上的偏移;x y可以一個(gè)設(shè)置精確位置,另一個(gè)設(shè)置方位
background-attachment: 背景圖像固定, scroll 背景隨內(nèi)容滾動(dòng), fixed 內(nèi)容滾動(dòng)時(shí)背景圖像固定
背景復(fù)合寫(xiě)法
background: 顏色圖片平鋪滾動(dòng) 位置 ,順序沒(méi)要求
背景半透明: background: rgba(0,0,0,0.3)
使用背景圖片的優(yōu)勢(shì)是控制位置非常方便

CSS 的三大特性: 層疊性、繼承性、優(yōu)先級(jí)

層疊性: 相同選擇器設(shè)置相同的樣式,后設(shè)置的會(huì)覆蓋之前設(shè)置的,注意只覆蓋相同的屬性值
繼承性: 子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式,如文本顏色、字號(hào)
1. 行高的繼承：

{
  body {
    font: 12px/1.5 Microsoft YaHei; // 這里的1.5表示的是所有body里的字元素的行高是子元素本身fontsize的1.5倍，如果子元素沒(méi)有設(shè)置fontsize則繼承父元素的fontsize計(jì)算
  }
}

優(yōu)先級(jí): 繼承的權(quán)重值最低,不管父元素權(quán)重多高,子元素得到的權(quán)重值都是 0
1. 復(fù)合選擇器會(huì)有權(quán)重疊加的問(wèn)題,權(quán)重雖然會(huì)疊加,但是不會(huì)有進(jìn)位的問(wèn)題

ul li {  // 這里ul 權(quán)重為0001， li權(quán)重為0001， 所以其權(quán)重為0001+0001 = 0002
  color:green
}
.nav li { // 這里.nav 權(quán)重為0010， li權(quán)重為0001， 所以其權(quán)重為0010+0001 = 0011
  color:red
}

頁(yè)面布局的三大核心:盒子模型、定位、浮動(dòng)

盒子模型

盒子模型由邊框，內(nèi)邊距，外邊距，內(nèi)容四部分組成
border 邊框: border-width、border-style、border-color、border-top、border-bottom、border-left、border-right
邊框的簡(jiǎn)寫(xiě): border-top: 1px solid red;
border-collapse: collapse; 合并相鄰的邊框
邊框會(huì)增加盒子的實(shí)際大小
content 內(nèi)容:
padding 內(nèi)邊距:

值的個(gè)數(shù)	表達(dá)意思
padding:5px;	1個(gè)值，代表上下左右都有5像素內(nèi)邊距
padding:5px 10px;	2個(gè)值，代表上下內(nèi)邊距是5像素左右內(nèi)邊距是10像素
padding:5px 10px 20px;	3個(gè)值，代表上內(nèi)邊距是5像素，左右內(nèi)邊距是10像素下內(nèi)邊距是20像素
padding:5px 10px 20px 30px;	4個(gè)值，代表上內(nèi)邊距是5像素，右內(nèi)邊距是10像素，下內(nèi)邊距是20像素，左內(nèi)邊距是30像素，順時(shí)針

padding 會(huì)影響盒子實(shí)際大小

margin 外邊距: margin-left、margin-top、margin-right、margin-bottom
塊級(jí)盒子水平居中設(shè)置margin: 0 auto;就可以了

相鄰塊元素外邊距合并: 比如上下兩個(gè)塊元素,上邊的塊元素設(shè)置了底部 margin,下邊的塊元素設(shè)置了頂部,margin, 這時(shí)候兩個(gè)塊元素的 margin 不是取兩者的和,而是取兩者之中較大的那個(gè)作為兩者之間的 margin;左右相鄰的塊元素也是同樣的

嵌套塊元素垂直外邊距的塌陷: 對(duì)于兩個(gè)嵌套關(guān)系(父子關(guān)系)的塊元素,父元素有上邊距同時(shí)子元素也有上外邊距,此時(shí)父元素會(huì)塌陷較大的外邊距值; 浮動(dòng)的元素不會(huì)有塌陷的問(wèn)題

解決方案:
1、可以為父元素定義上邊框
2、可以為父元素定義內(nèi)邊距
3、可以為父元素添加 overflow: hidden;

清除內(nèi)外邊距: 很多網(wǎng)頁(yè)元素都帶有默認(rèn)的內(nèi)外邊距

* {
  margin: 0;
  padding: 0;
}

border-radius: 圓角邊框, 可以設(shè)置 px,也可以設(shè)置百分比 , 也可以按順序設(shè)置 4 個(gè)值,分別對(duì)應(yīng) 左上右上右下左下 ; 還有分別對(duì)應(yīng)四個(gè)角的寫(xiě)法: border-top-left-radius、border-top-right-radius、border-botom-right-radius 和 border-bottom-left-radius
box-shadow: 為盒子添加陰影，順序?yàn)?code>box-shadow:h-shadow v-shadow blur spread color inset
1. h-shadow: 必需，水平陰影的位置，允許負(fù)值
2. v-shadow：必須，垂直陰影的位置，允許負(fù)值
3. blur：可選，模糊距離
4. spread：可選，陰影的尺寸
5. color：可選，陰影的顏色
6. inset：可選，將外部陰影改為內(nèi)部陰影
text-shadow: 文字陰影，順序?yàn)?code>box-shadow:h-shadow v-shadow blur color，沒(méi)有spread和inset

傳統(tǒng)網(wǎng)頁(yè)布局的三種方式

標(biāo)準(zhǔn)流(普通流/文檔流): 標(biāo)簽按照規(guī)定好默認(rèn)方式排列. 塊級(jí)元素獨(dú)占一行從上向下順序排列;行內(nèi)元素按照從左到右的順序排列
浮動(dòng)
定位

浮動(dòng)

為什么需要浮動(dòng), 比如我們需要多個(gè)div顯示在同一行,這時(shí)我們可以將div的顯示設(shè)置為行內(nèi)塊元素,但這個(gè)時(shí)候每個(gè)div橫向之間會(huì)有空白縫隙,這個(gè)縫隙是很難控制的,而通過(guò)浮動(dòng)就可以將多個(gè)塊級(jí)元素顯示在同一行,并且可以控制它們之間的縫隙;再比如希望將行內(nèi)的兩個(gè)塊元素分別位居左右兩邊,中間空白,這時(shí)也可以用浮動(dòng)解決
網(wǎng)頁(yè)布局第一準(zhǔn)則: 多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流,多個(gè)塊級(jí)元素橫向排列找浮動(dòng)
網(wǎng)頁(yè)布局第二準(zhǔn)則: 先設(shè)置盒子大小,再設(shè)置盒子位置
float 屬性用于創(chuàng)建浮動(dòng)框,將其移動(dòng)到一邊,直到左邊緣或右邊緣及包含塊或另一個(gè)浮動(dòng)框的邊緣, 包括下面三個(gè)值:
1. none: 元素不浮動(dòng),默認(rèn)值
2. left: 元素向左浮動(dòng)
3. right: 元素向右浮動(dòng)

浮動(dòng)的特性

加了浮動(dòng)之后的元素,會(huì)具有很多特性:
1. 浮動(dòng)的元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo)), 移動(dòng)到指定位置,浮動(dòng)的盒子不再保留原先的位置,浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流,不會(huì)影響前面的標(biāo)準(zhǔn)流
2. 如果多個(gè)盒子都設(shè)置了浮動(dòng),則他們會(huì)按照屬性值一行內(nèi)顯示并且頂端對(duì)齊排列,當(dāng)一行放不下時(shí),會(huì)自動(dòng)換行顯示,換行后也是頂端對(duì)齊排列
3. 浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性
為了約束浮動(dòng)元素位置,網(wǎng)頁(yè)布局一般采用的策略是:先用標(biāo)準(zhǔn)流的父元素排列上下位置,之后內(nèi)部子元素采取浮動(dòng)排列左右位置,符合網(wǎng)頁(yè)布局第一準(zhǔn)則
浮動(dòng)和標(biāo)準(zhǔn)流的父盒子搭配,先用標(biāo)準(zhǔn)流的父元素排列上下位置,之后內(nèi)部子元素采取浮動(dòng)排列左右位置
一個(gè)元素浮動(dòng)了,理論上其余的兄弟元素也要浮動(dòng),浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流,不會(huì)影響前面的標(biāo)準(zhǔn)流

清除浮動(dòng)

為什么要清楚浮動(dòng):由于父級(jí)盒子很多情況下,不方便給高度,但子盒子浮動(dòng)又不占有位置,最后父級(jí)盒子高度為 0,就會(huì)影響下面的標(biāo)準(zhǔn)流盒子
清楚浮動(dòng)的本質(zhì)就是清楚浮動(dòng)元素的造成的影響,如果父盒子本身有高度,則不需要清除浮動(dòng).清除浮動(dòng)之后,父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度,父級(jí)有了高度,就不會(huì)影響下面的標(biāo)準(zhǔn)流了
清除浮動(dòng)使用的是 clear 屬性,其有三個(gè)值,
1. left:不允許左側(cè)有浮動(dòng)元素,清除左側(cè)浮動(dòng)的影響:
2. right:不允許右側(cè)有浮動(dòng)元素,清除右側(cè)浮動(dòng)的影響:
3. both:同時(shí)清除左右兩側(cè)浮動(dòng)的影響
清除浮動(dòng)的策略是: 閉合浮動(dòng),只讓浮動(dòng)在父盒子內(nèi)部影響,不影響父盒子外的其他盒子.
清除浮動(dòng)的方法
1. 額外標(biāo)簽法: 也稱隔墻法,W3C 推薦的方法,就是在最后一個(gè)浮動(dòng)子元素后面添加一個(gè)額外標(biāo)簽(必須是塊級(jí)元素),添加清除浮動(dòng)樣式(給該標(biāo)簽樣式設(shè)置 clear 屬性)
2. 父級(jí)添加 overflow 屬性: 給父級(jí)盒子添加 overflow 屬性,將其屬性值設(shè)置為 hidden,auto,scroll 中的一種即可.缺點(diǎn)是無(wú)法顯示溢出的部分
3. 父級(jí)添加 after 偽元素: 給父級(jí)盒子樣式添加下面樣式

.clearfix:after{
  content:"';
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix {
  *zoom:1; // 兼容 ie6,7
}

父級(jí)添加雙偽元素:給父級(jí)盒子樣式添加下面樣式

.clearfix:before, 
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;// 兼容 ie6,7
}

jpg 圖片格式: JPEG(JPG)對(duì)色彩的信息保留較好,高清,顏色較多,產(chǎn)品類的圖片經(jīng)常使用這種格式
gif 圖像格式: GIF 格式最多只能存儲(chǔ) 256 色,所以通常用來(lái)顯示簡(jiǎn)單圖形及字體,但是可以保存透明背景和動(dòng)畫(huà)效果,實(shí)際常用語(yǔ)一些圖片小動(dòng)畫(huà)效果
png 圖像格式: 結(jié)合了 GIF 和 JPEG 的優(yōu)點(diǎn),具有存儲(chǔ)形式豐富的特點(diǎn),能夠保持透明背景,如果想要切成背景透明的圖片,選擇這種格式
css 屬性書(shū)寫(xiě)順序
1. 布局定位屬性:dispaly,position,float,clear,visibility,overflow
2. 自身屬性:width,height,margin,padding,border,background
3. 文本屬性:color,font,text-decoration,text-align,vertical-align,white-space,break-word
4. 其他屬性:content.cursor,border-radius,box-shadow,text-shadow,background:linear-gradient
導(dǎo)航欄注意事項(xiàng): 實(shí)際開(kāi)發(fā)中,導(dǎo)航欄中的鏈接不是直接用a 標(biāo)簽,而是用 li 包含鏈接 a 的做法。如果直接用 a,搜索引擎容易辨別為有堆砌關(guān)鍵字嫌疑(故意堆砌關(guān)鍵字有容易被搜索引擎降權(quán)的風(fēng)險(xiǎn)),從而影響網(wǎng)站排名
多個(gè)行內(nèi)塊元素之間會(huì)有空隙
頁(yè)面布局的整體思路
1. 必須確定頁(yè)面的版心(可視區(qū))
2. 分析頁(yè)面中的行模塊,以及每個(gè)行模塊中的列模塊
3. 一行中的列模塊經(jīng)常浮動(dòng),先確定每個(gè)列的大小,之后確定列的位置
4. 制作 html 結(jié)構(gòu),先有結(jié)構(gòu)后有樣式的原則,結(jié)構(gòu)永遠(yuǎn)最重要
5. 先理清布局再寫(xiě)代碼

定位

為什么需要定位
1. 定位可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定在屏幕中的某個(gè)位置,并且可以壓住其他盒子
2. 某個(gè)元素在一個(gè)盒子內(nèi)可以隨意的移動(dòng),并且壓住其他盒子
3. 當(dāng)我們滾動(dòng)窗口時(shí),盒子是固定在屏幕的某個(gè)位置的
定位 = 定位模式 + 邊偏移
1. 定位模式: 用于指定一個(gè)元素在文檔中的定位方式, 通過(guò) position 屬性來(lái)設(shè)置,其值有四個(gè)如下:

值	語(yǔ)義
static	靜態(tài)定位
relative	相對(duì)定位
absolute	絕對(duì)定位
fixed	固定定位
sticky	粘性定位

邊偏移: 決定了該元素的最終位置,通過(guò) top,bottom,left,right,4 個(gè)屬性值來(lái)確認(rèn)的,注意如果同時(shí)設(shè)置了 top 和 bottom,則以 top 為準(zhǔn),如果同時(shí)設(shè)置了 left 和 right,則以 left 為準(zhǔn)

邊偏移屬性	描述
top	頂端偏移,相對(duì)父元素的上邊線距離
bottom	底部偏移,相對(duì)父元素的下邊線距離
left	左側(cè)偏移,相對(duì)父元素的左邊線距離
right	右側(cè)偏移,相對(duì)父元素的右邊線距離

靜態(tài)定位

靜態(tài)定位是元素的默認(rèn)定位方式,無(wú)定位的意思,語(yǔ)法入下:

***選擇器 {
  position: static;
}

靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置,它沒(méi)有邊偏移,在定位布局時(shí)很少使用

相對(duì)定位relative重要

相對(duì)定位是元素在移動(dòng)位置的時(shí)候,是相對(duì)于它原來(lái)的位置來(lái)說(shuō)的, 當(dāng)設(shè)置了一個(gè)元素的 position 為 relative 時(shí),這是這是top:100px,是讓該元素相對(duì)與它之前的上邊線位置向下移動(dòng) 100px, 如果設(shè)置 left 為 100px,是讓該元素相對(duì)于它之前的左邊線位置向右移動(dòng) 100px;

***選擇器 {
  position: relative;
  top:100px;
  ....
  width:200px;
  height:200px;
}

相對(duì)定位特點(diǎn):
1. 它是相對(duì)于自己原來(lái)的位置來(lái)移動(dòng)的(移動(dòng)的時(shí)候參照的是自己原來(lái)的位置)
2. 原來(lái)在標(biāo)準(zhǔn)流的位置繼續(xù)占有,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它(不脫標(biāo),繼續(xù)保留原來(lái)位置,類似停薪留職,職位還保留著,不會(huì)被別的盒子占有),最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)?/li>

絕對(duì)定位 absolute (重要)

絕對(duì)定位是元素在移動(dòng)位置的時(shí)候,是相對(duì)于它祖先元素來(lái)說(shuō)的
特點(diǎn):
1. 如果沒(méi)有祖先元素或者祖先元素沒(méi)有定位,則以瀏覽器為準(zhǔn)定位(Document 文檔)
2. 如果祖先元素有定位(相對(duì),絕對(duì),固定定位),則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置
3. 絕對(duì)定位不在占有原先位置(脫標(biāo))
子絕父相: 子級(jí)使用絕對(duì)定位,父級(jí)則需要使用相對(duì)定位
1. 子級(jí)絕對(duì)定位,不會(huì)占有位置,可以放到父盒子里面的任何一個(gè)地方,不糊影響其他的兄弟盒子
2. 父盒子要加定位限制子盒子在父盒子內(nèi)顯示

固定定位 fixed (重要)

固定定位: 是元素固定于瀏覽器可視區(qū)的位置。主要使用場(chǎng)景是在瀏覽器頁(yè)面滾動(dòng)時(shí)元素的位置不會(huì)改變
特點(diǎn):
1. 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素
2. 跟父元素沒(méi)有任何關(guān)系
3. 不隨滾動(dòng)條滾動(dòng)
4. 固定定位不占有原先位置,也是脫標(biāo)的,其實(shí)固定定位也可以看做是一種特殊的絕對(duì)定位

粘性定位 sticky (了解)

粘性定位可以被認(rèn)為是相對(duì)定位和固定定位的混合
特點(diǎn):
1. 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素(固定定位特點(diǎn))
2. 粘性定位占有原先的位置(相對(duì)定位特點(diǎn))
3. 必須添加 top,left,right,bottom 其中的一個(gè)才有效
跟頁(yè)面滾動(dòng)搭配使用, 兼容性差,IE 不支持

定位疊放次序 z-index

使用定位布局時(shí),可能會(huì)出現(xiàn)盒子重疊的情況,此時(shí),可以使用 z-index 來(lái)控制盒子的前后次序,語(yǔ)法

***選擇器{
  z-index:1;
}

數(shù)值可以是正整數(shù),負(fù)數(shù)或 0,默認(rèn)是 auto,數(shù)值越大,盒子越靠上
如果屬性值相同,則按照書(shū)寫(xiě)順序,后來(lái)者居上
數(shù)字后面不能加單位
只有定位的盒子才有 z-index 屬性

定位的特殊性

行內(nèi)元素添加絕對(duì)或者固定定位后,可以直接設(shè)置高度和寬度
塊級(jí)元素添加絕對(duì)或者固定定位后,如果不給寬度或者高度,默認(rèn)大小是內(nèi)容的大小
脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷的, 浮動(dòng)元素,絕對(duì)定位,固定定位元素都不會(huì)觸發(fā)外邊距合并的問(wèn)題
絕對(duì)定位(固定定位)會(huì)完全壓住盒子, 在浮動(dòng)中,浮動(dòng)元素只會(huì)壓住它下面標(biāo)準(zhǔn)流的盒子,但是不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里面的文字/圖片; 但是絕對(duì)定位/固定定位元素會(huì)壓住標(biāo)準(zhǔn)流所有內(nèi)容

浮動(dòng)為什么不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里面的文字/圖片呢? 因?yàn)楦?dòng)最初就是為了做文字環(huán)繞效果設(shè)計(jì)的

網(wǎng)頁(yè)布局總結(jié)

一個(gè)完整的網(wǎng)頁(yè),是標(biāo)準(zhǔn)流,浮動(dòng),定位一起完成布局的,每個(gè)都有自己的專門用法。
標(biāo)準(zhǔn)流: 可以讓盒子上下排列或者左右排列,垂直的塊級(jí)盒子明顯就用標(biāo)準(zhǔn)流布局
浮動(dòng): 可以讓多個(gè)塊級(jí)元素一行顯示或者左右對(duì)齊盒子,多個(gè)塊級(jí)盒子水平顯示就用浮動(dòng)布局
定位: 定位最大的特點(diǎn)是有層疊的概念,就是可以讓多個(gè)盒子前后疊壓來(lái)顯示,如果元素自由在某個(gè)盒子內(nèi)移動(dòng)就用定位布局

元素的顯示與隱藏

display: 當(dāng)屬性值設(shè)置為 none 時(shí),即隱藏元素, 使用 display 隱藏元素后,不再占有原來(lái)的位置
visibility: 隱藏元素后繼續(xù)占有原來(lái)的位置
1. inherit: 繼承上一個(gè)父對(duì)象的可見(jiàn)性
2. visible: 可見(jiàn)
3. hidden: 隱藏
4. collapse: 主要用來(lái)隱藏表格的行或列,隱藏的行或列能夠被其他內(nèi)容使用
overflow: 針對(duì)溢出的部分進(jìn)行顯示或隱藏,默認(rèn)是顯示的
1. visible: 超出部分顯示,默認(rèn)值
2. hidden: 超出部分隱藏
3. scroll: 顯示不下時(shí)滾動(dòng),滾動(dòng)條不論內(nèi)容能不能顯示下都固定顯示滾動(dòng)條
4. auto: 默認(rèn)值,在需要的時(shí)候添加滾動(dòng)條(能顯示下的時(shí)候不顯示滾動(dòng)條,顯示不下的時(shí)候顯示滾動(dòng)條)

精靈圖

精靈圖是為了減少服務(wù)器收發(fā)請(qǐng)求次數(shù),提高頁(yè)面加載速度的。一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖作為裝飾,當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí),服務(wù)器就會(huì)頻繁地接收和發(fā)送請(qǐng)求圖片,造成服務(wù)器壓力過(guò)大。核心原理是將很多小圖片整合到一張大圖中,這樣只需要向服務(wù)器請(qǐng)求一次就可以了。
精靈圖技術(shù)主要針對(duì)不經(jīng)常跟換的背景圖片使用,就是把多個(gè)小背景圖片整合到一張大圖中. 而對(duì)于經(jīng)常更換的產(chǎn)品圖則不適用
主要通過(guò)使用background-position移動(dòng)背景圖片位置,移動(dòng)的距離就是這個(gè)目標(biāo)圖片的x和y坐標(biāo),需要注意網(wǎng)頁(yè)中的坐標(biāo)不同,x,y一般是負(fù)值
使用精靈圖的時(shí)候需要精準(zhǔn)測(cè)量,每個(gè)小背景圖片的大小和位置
精靈圖是有諸多優(yōu)點(diǎn),但是缺點(diǎn)很明顯:
1. 圖片文件還是比較大
2. 圖片本身放大和縮小會(huì)失真
3. 一旦圖片制作完成想要更換比較麻煩

字體圖標(biāo)(iconFont)

字體圖標(biāo)主要用于顯示網(wǎng)頁(yè)中通用,常用的一些小圖標(biāo),展示的是圖標(biāo),本質(zhì)屬于字體
字體圖標(biāo)解決了精靈圖的缺點(diǎn)
字體圖標(biāo)的優(yōu)點(diǎn):
1. 輕量級(jí):一個(gè)圖標(biāo)字體要比一系列的圖像小,一旦字體加載了,圖標(biāo)就會(huì)馬上渲染出來(lái),減少服務(wù)器請(qǐng)求
2. 靈活性: 本質(zhì)其實(shí)是文字,可以隨意的改變顏色,產(chǎn)生陰影,透明效果等
3. 兼容性: 幾乎只吃所有的瀏覽器,可以放心使用
字體圖標(biāo)的缺點(diǎn):
1. 字體圖標(biāo)只能是一些結(jié)構(gòu)和樣式比較簡(jiǎn)單的小圖標(biāo)
2. 如果是結(jié)構(gòu)和樣式比較復(fù)雜的小圖標(biāo),還是只能通過(guò)精靈圖
字體圖標(biāo)使用:
1. 字體圖標(biāo)下載, 推薦兩個(gè)網(wǎng)站 http://icomoon.io 和 http://www.iconfont.cn, 可以挑選自己需要的字體圖標(biāo),挑選好后下載到本地就可以了,下載的壓縮包里有字體,有樣式,還有使用demo
2. 字體圖標(biāo)的引入,下載的壓縮文件中有使用的demo
3. 字體圖標(biāo)的追加, 將壓縮文件中的selection.json從新上傳,然后再選中自己想要新的圖標(biāo),從新下載壓縮包,并替換原來(lái)的文件即可

CSS 實(shí)現(xiàn)三角

設(shè)置盒子的寬高為0
設(shè)置盒子邊框?qū)挾?和樣式, 設(shè)置為透明
設(shè)置箭頭指向方向的反向邊框的顏色

div {
  width:0;
  height:0;
  border: 50px solid transparent;
  border-left-color: pink;
}

可以通過(guò)設(shè)置上下左右邊框的不同比例生成不同的三角形

CSS 用戶界面樣式

什么是界面樣式

所謂界面樣式,就是更改一些用戶操作樣式,以便提高更好的用戶體驗(yàn),比如:
1. 更改用戶的鼠標(biāo)樣式, 通過(guò)設(shè)置 cursor 屬性來(lái)實(shí)現(xiàn),對(duì)應(yīng)有下面幾個(gè)值

屬性值	描述
default	小白箭頭默認(rèn)
pointer	小手
move	移動(dòng)
text	文本
not-allowed	禁止

表單(input,textare 等)輪廓線,當(dāng)輸入框成為焦點(diǎn)時(shí),默認(rèn)會(huì)顯示藍(lán)色邊框,通過(guò)設(shè)置 outline 屬性為 none,可以將藍(lán)色邊框去掉
防止拖拽拖拽文本域, 文本域默認(rèn)右下角有個(gè)斜線三角,拖拽這個(gè)斜線三角可以改變文本域的大小,通過(guò)設(shè)置 resize 屬性為 none,可以禁掉拖拽

vertical-align 屬性

vertical-align 屬性用于設(shè)置一個(gè)元素的垂直對(duì)齊方式,但只針對(duì)行內(nèi)元素或者行內(nèi)塊元素有效,比如圖片或者表單(行內(nèi)塊元素)和文字垂直居中

值	描述
baseline	默認(rèn),元素放置在父元素的基線上
top	把元素的頂端與行中最高元素的頂端對(duì)齊
middle	把此元素放置在父元素的中部
bottom	把元素的頂端與行中最低的元素的頂端對(duì)齊

通常圖片底部會(huì)有一個(gè)空白縫隙,原因是行內(nèi)塊元素默認(rèn)是和文字的基線對(duì)齊的, 可以通過(guò)給圖片設(shè)置 vertical-align 屬性的值為 middle|top|bottom 中的一個(gè)解決

溢出文字省略號(hào)顯示

單行文本溢出省略號(hào)顯示

white-space: nowrap; //先強(qiáng)制一行內(nèi)顯示文本,默認(rèn) normal 自動(dòng)換行
overflow: hidden; // 超出部分隱藏
text-overflow:ellipsis; // 用省略號(hào)替代超出的部分

多行文字溢出省略號(hào)顯示,有較大的兼容性問(wèn)題,只適用于 webkit 瀏覽器或者移動(dòng)端,對(duì) IE 瀏覽器是不兼容的

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 彈性伸縮盒子模型顯示
-webkit-line-clamp: 2; // 限制一個(gè)塊元素顯示的文本的行數(shù)
-webkit-box-orient: vertical; // 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式

CSS 的初始化

為什么要進(jìn)行 CSS 的初始化, 因?yàn)椴煌瑸g覽器對(duì)同一種元素的默認(rèn)樣式是不一樣的,比如有的默認(rèn)margin 寬一點(diǎn),有的窄一點(diǎn).
CSS 初始化里要做哪些事情呢?
- 做一些統(tǒng)一的處理,比如清除默認(rèn)內(nèi)外邊距, 清除 li 標(biāo)簽左邊的圓點(diǎn), 設(shè)置 img 的垂直對(duì)齊方式,清除a 標(biāo)簽的下劃線,設(shè)置字體,清除浮動(dòng)等等

*{
  margin:0;
  padding:0;
}
em,
i {
  font-style:normal;
}
li {
  list-style:none;
}
img{
  border:0;
  vertical-align: middle;
}
button{
  cursor: pointer;
}
a{
  color:#666;
  text-decoration:none;
}
body{
  -webkit-font-smoothing: antialiased;// CSS3 的文字抗鋸齒性
  background-color:#fff;
  color:#666;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino San GB, "\5B8B\4F53";// "\5B8B\4F53"是宋黑,這里這樣寫(xiě)是有的瀏覽器識(shí)別不了中文會(huì)顯示亂碼
}
.clearfix:after { // 清除浮動(dòng)
  visibility:hidden;
  clear: both;
  display:block;
  content:".";
  height:0;
}
.clearfix{
  *zoom:1;
}

HTML5 新特性

新特性都有兼容性問(wèn)題,基本是 IE9 以上的瀏覽器才支持,對(duì)移動(dòng)端沒(méi)有任何兼容性問(wèn)題
<header>: 頭部標(biāo)簽
<nav>: 導(dǎo)航標(biāo)簽
<article>: 內(nèi)容標(biāo)簽
<section>: 定義文檔某個(gè)區(qū)域
<aside>: 側(cè)邊欄標(biāo)簽
<footer>: 尾部標(biāo)簽
<audio>: 音頻標(biāo)簽,只支持 mp3,Wav,Ogg 三種格式,推薦 MP3
<video>: 視頻標(biāo)簽,只支持 mp4,WebM,Ogg 這三種格式的視頻,但并不是所有的瀏覽器都支持上面三種格式, 只有 MP4格式的所有瀏覽器都支持
<input> 標(biāo)簽,增加了 type= "email","url","date","time","month","week","number","tel","search","color"等類型

CSS3 新特性

新特性有兼容性問(wèn)題,IE9以上才支持,移動(dòng)端無(wú)兼容問(wèn)題

屬性選擇器

屬性選擇器: 通過(guò)中括號(hào)中的屬性值將符合條件的元素選出來(lái)
屬性選擇器的權(quán)重是 0010;
|選擇符|簡(jiǎn)介|
|-|-|
|E[att] |選擇具有 att 屬性的 E 元素|
|E[att="val"] |選擇具有 att 屬性且屬性值等于 val的 E 元素|
|E[att^="val"] |選擇具有 att 屬性且值以 val 開(kāi)頭的的 E 元素|
|E[att$="val"] |選擇具有 att 屬性且值以 val 結(jié)尾的 E 元素|
|E[att*="val"] |選擇具有 att 屬性且值中含有 val的 E 元素|
1. 選擇有某個(gè)屬性的元素

input[value]{ // 選出有 value 屬性的 input 標(biāo)簽
  color:red;
}

選擇屬性=某值的某些元素

input[value="sss"]{ // 選出有 value 屬性且 value 值等于 "sss"的 input 標(biāo)簽
  color:red;
}

選擇屬性值開(kāi)頭的某些元素

input[value^="sss"]{ // 選出有 value 屬性且 value 值以"sss"開(kāi)頭的 input 標(biāo)簽
  color:red;
}

選擇屬性值結(jié)尾的某些元素

input[value$="sss"]{ // 選出有 value 屬性且 value 值以"sss"結(jié)尾的 input 標(biāo)簽
  color:red;
}

選擇屬性值中含有某字符串的某些元素

input[value*="sss"]{ // 選出有 value 屬性且 value 值含有" sss" 的input 標(biāo)簽
  color:red;
}

結(jié)構(gòu)偽類選擇器

結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來(lái)選擇元素,常用于根據(jù)父級(jí)選擇器里面的子元素

選擇符	簡(jiǎn)介
E:first-child	匹配父元素中的第一個(gè)子元素 E
E:last-child	匹配父元素中的最后一個(gè)子元素 E
E:nth-child(n)	匹配父元素中的第n個(gè)子元素 E
E:first-of-type	指定類型 E 的第一個(gè)元素
E:last-of-type	指定類型 E 的最后一個(gè)元素
E:nth-of-type(n)	指定類型 E 的第n個(gè)元素

匹配父元素中第一個(gè)子元素

ul li:first-child{ // 匹配 ul 中第一個(gè) li 元素
  color:red;
}

nth-child(n)選擇某個(gè)父元素的一個(gè)或多個(gè)特定的子元素
1. n 可以是數(shù)字,關(guān)鍵字和公式
2. n 如果是數(shù)字,就是選擇第 n 個(gè)子元素,里面數(shù)字從 1 開(kāi)始
  例如: 匹配父元素中第 5 個(gè)子元素

ul li:nth-child(5){ // 匹配 ul 中第5個(gè)且是 li 的元素
  color:red;
}

n 可以是關(guān)鍵字:even 偶數(shù),odd 奇數(shù), 可用來(lái)做表格的隔行變色

ul li:nth-child(even){ // 選出偶數(shù)行且是 li 的元素
  color:red;
}

選擇所對(duì)應(yīng)類型的所有子元素

ul li:nth-child(n){ // 從 0 開(kāi)始,每次往后面計(jì)算,這里面必須是你,不能是其他字母,選擇了所有的孩子為 li 的子元素
  color:red;
}

n 可以是公式:常見(jiàn)公式如下(如果 n 是公式,則從 0 開(kāi)始計(jì)算,但是第 0 個(gè)元素或者超出了元素的個(gè)數(shù)會(huì)被忽略)

公式	取值
2n	偶數(shù)
2n+1	奇數(shù)
5n	5,10,15...
n+5	從第 5 個(gè)開(kāi)始(包括第 5 個(gè))到最后
-n+5	前 5 個(gè)(包含第 5 個(gè))

nth-of-type(n) 和 nth-child(n)的用法基本相識(shí),不同的地方如下:

section div:nth-child(1) { // nth-child 會(huì)把所有的子元素都拍序號(hào),執(zhí)行是先看 nth-child(1)之后再看 div,如果兩者都匹配,則選出來(lái)
  background-color:red;
}
section div:nth-of-type(1) { // nth-of-type 會(huì)把指定 div的子元素都拍序號(hào),然后再把序號(hào)是 1 的找出來(lái)
  background-color:red;
}

偽元素選擇器

偽元素選擇器可以幫助我們利用 CSS 創(chuàng)建新標(biāo)簽元素,而不需要 HTML 標(biāo)簽,從而簡(jiǎn)化 HTML 結(jié)構(gòu)

選擇符	簡(jiǎn)介
::before	在元素內(nèi)部的前面插入內(nèi)容
::after	在元素內(nèi)部的后面插入內(nèi)容

可以利用偽元素選擇器清除浮動(dòng)
注意:
1. before 和 after 創(chuàng)建一個(gè)元素,但是屬于行內(nèi)元素
2. 新創(chuàng)建的這個(gè)元素在文檔中是找不到的,所以稱為偽元素
3. 語(yǔ)法是: element::before{}
4. before 和 after 必須有 content 屬性
5. before 在父元素內(nèi)容的前面創(chuàng)建元素,after 在父元素內(nèi)容的后面插入元素
6. 偽元素選擇器和標(biāo)簽選擇器一樣,權(quán)重為 1

盒子模型

CSS3 中可以通過(guò) box-sizing 來(lái)指定盒子模型
1. box-sizing:content-box 該方式是盒子大小為 width+padding+border(以前的方式)
2. box-sizing:border-box 盒子大小為設(shè)置的 width 和 height, 該模式下 padding 和 border 不會(huì)撐大盒子(前提是 padding 和 border 不超過(guò) width 的寬度)

CSS3 濾鏡 filter

css3 新增 filter 屬性將模糊或者顏色偏移等圖形效果應(yīng)用于元素
通過(guò)設(shè)置 filter 的屬性值為 blur()函數(shù),使圖片模糊,blur()函數(shù)的參數(shù)值越大越模糊filter:blur(5px);

過(guò)渡

過(guò)渡(transition)是 CSS3 中具有顛覆性的特性之一,我們可以在不使用 Flash 動(dòng)畫(huà)或 JS 的情況下,當(dāng)元素從一種樣式變換另一種樣式時(shí)為元素添加效果
過(guò)渡動(dòng)畫(huà): 是從一個(gè)狀態(tài)漸漸地過(guò)渡到另外一個(gè)狀態(tài),可以讓我們的頁(yè)面更好看,雖然低版本瀏覽器不支持,但是不會(huì)影響頁(yè)面布局
經(jīng)常與:hover 一起搭配使用
transition 屬性有下面四個(gè)值,transition: 變化屬性花費(fèi)時(shí)間運(yùn)動(dòng)曲線何時(shí)開(kāi)始
1. 要過(guò)度化的屬性:想要變化的 css 屬性,寬度高度,背景色,內(nèi)外邊距都可以,如果要所有的屬性都變化過(guò)渡,寫(xiě)個(gè) all 就可以
2. 花費(fèi)時(shí)間:單位是秒,比如 0.5s
3. 運(yùn)動(dòng)曲線: 默認(rèn)是 ease(可以省略), linear:勻速,ease 逐漸慢下,ease-in 加速,ease-out 減速,ease-in-out 先加速后減速
4. 何時(shí)開(kāi)始: 單位是秒(必須寫(xiě)單位)可以設(shè)置延遲觸發(fā)事件,默認(rèn)是 0s,可以省略
多個(gè)屬性都要變化時(shí),需要使用逗號(hào)隔開(kāi),比如:
transition: width 0.5s ease 0s, height 1s ease 1s;

技巧

添加有定位的盒子居中的設(shè)置, 水平居中可以設(shè)置 left:50%, margin-left: -width0.5; 垂直居中可以設(shè)置 top:50%,margin-top:-height0.5
每個(gè)標(biāo)簽都有一個(gè) title 屬性,當(dāng)鼠標(biāo)放上去時(shí)回顯 title 內(nèi)容
控制一個(gè)標(biāo)簽是否顯示時(shí)可以控制 display 屬性是否為 none,為 none 時(shí)不顯示

const titleDisplayValue = isShow ? "block": "none";
<h2 style={{display: isShow}}>你好</h2>

table 中設(shè)置 border-collapse 屬性為 collapse 可以將每個(gè)單元格都顯示的分割線改成相鄰單元格只顯示一條分隔線
body 默認(rèn)有內(nèi)邊距, 可以設(shè)置 padding:0, 清除
height 和 line-height 設(shè)置一樣的值可以使內(nèi)容垂直居中
<strong></strong> 加粗文字
textare 的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽如果分兩行來(lái)寫(xiě),輸入內(nèi)容開(kāi)始距四周會(huì)有一定的空白區(qū)域,如果放在一行上寫(xiě)就沒(méi)有了
使用 margin 負(fù)值,將邊框合并,比如并排兩個(gè)都有 1 像素邊框的元素,那個(gè)中間那條線就是 2 像素,此時(shí)設(shè)置左邊元素的 margin-right 為-1 或者右邊元素的 margin-left 為-1 就可以將兩條邊框重疊,看起來(lái)是 1 像素,如果選中時(shí)一邊邊框被蓋,可以設(shè)置 z-index 解決
對(duì)于左邊是圖片右邊是文字的樣式,可以設(shè)置圖片左浮動(dòng)來(lái)顯示,因?yàn)楦?dòng)的圖片不會(huì)蓋住文字, 浮動(dòng)本來(lái)就是為了實(shí)現(xiàn)文字環(huán)繞的
padding 和 border 默認(rèn)會(huì)把盒子變大
一般情況下,a 如果包含有寬度的盒子,a 需要轉(zhuǎn)為塊級(jí)元素

CSS3 新增其他新特性

calc() 函數(shù),此函數(shù)可以讓你在聲明 CSS 屬性值時(shí)執(zhí)行一些計(jì)算
width:calc(100% - 80px); // 表示寬度是父容器的 100%-80px, 括號(hào)中可以使用+-*/來(lái)進(jìn)行計(jì)算

2D 轉(zhuǎn)換

2D 移動(dòng)

2D 移動(dòng)是 2D 轉(zhuǎn)換里的一種功能,可以改變?cè)卦陧?yè)面中位置,類似定位
語(yǔ)法:
transform: translate(x,y); //x 和 y 分別表示 X 軸和 Y 軸移動(dòng)的距離
transform: translate(50%,30%); // 值為百分比時(shí),表示相對(duì)于自身元素的寬高
transform: translateX(n); // x 軸上移動(dòng) n
transform: translateY(n); // y 軸上移動(dòng) n
translate 最大的優(yōu)點(diǎn)是不會(huì)影響到其他元素的位置
translate 對(duì)行內(nèi)標(biāo)簽沒(méi)有效果

2D 旋轉(zhuǎn)

2D 旋轉(zhuǎn)值的是讓元素在 2 維平面內(nèi)順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)
語(yǔ)法:
transform:rotate(度數(shù))
rotate 里面跟度數(shù),單位是 deg,比如 rotate(45deg)
角度為正時(shí)是順時(shí)針,負(fù)時(shí)是逆時(shí)針
默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn), 也可以通過(guò) transform-origin 設(shè)置元素旋轉(zhuǎn)的中心點(diǎn), 語(yǔ)法如下:
transform-origin: x y;
1. 注意后面的參數(shù) x 和 y 是用空格隔開(kāi)的
2. xy 默認(rèn)轉(zhuǎn)換的中心點(diǎn)是元素的中心點(diǎn)50% 50%
3. 還可以給 xy 設(shè)置像素或者方位名詞(top bottom left right center)

2D 縮放

語(yǔ)法如下:
transform: scale(x,y); // 注意 xy 是用逗號(hào)隔開(kāi)的
里面寫(xiě)的參數(shù)不跟單位,2 就是兩倍,0.5 就是0.5 倍,當(dāng)參數(shù)是一個(gè)時(shí),表示寬和高都縮放這么大倍數(shù)
scale 的優(yōu)勢(shì)是不會(huì)影響其他的盒子,而且可以設(shè)置縮放的中心點(diǎn),比如設(shè)置 transform-origin:left bottom; 就可以設(shè)置其縮放的中心點(diǎn)事左下角

2D 轉(zhuǎn)換的綜合寫(xiě)法

同時(shí)使用多個(gè)轉(zhuǎn)換,其格式為 transform: translate() rotate() scale() ... 等,中間用空格隔開(kāi)
其順序會(huì)影響轉(zhuǎn)換的效果(先旋轉(zhuǎn)會(huì)改變坐標(biāo)軸方向)
當(dāng)我們同時(shí)有位移和其他屬性的時(shí)候,記得要將位移放到最前

動(dòng)畫(huà)

基本使用

先定義動(dòng)畫(huà),用 keyframes 定義動(dòng)畫(huà)格式入下:

@keyframes 動(dòng)畫(huà)名稱{
  0%{ // 動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)
    width:100px;
  }  
  100%{ // 動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)
    width:200px;
  }
}

起始和結(jié)束狀態(tài)也可以分別使用 from 和to 表示

@keyframes 動(dòng)畫(huà)名稱{
   from { // 動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)
    width:100px;
  }  
  to { // 動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)
    width:200px;
  }
}

再使用動(dòng)畫(huà), 使用動(dòng)畫(huà)需要給 animation-name 設(shè)置調(diào)用動(dòng)畫(huà)的名稱, 然后給 animation-duration設(shè)置動(dòng)畫(huà)持續(xù)時(shí)間

div{
  width:100px;
  height:100px;
  animation-name: 動(dòng)畫(huà)名稱;
  animation-duration: 持續(xù)時(shí)間;
}

動(dòng)畫(huà)常用屬性

屬性	描述
@keyframes	定義動(dòng)畫(huà)
animation	所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性,除了 animation-play-state 屬性
animation-name	定義@keyframes 動(dòng)畫(huà)的名稱,必須的
animation-duration	規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒,默認(rèn)是 0,必須的
animation-timing-function	規(guī)定動(dòng)畫(huà)的速度曲線,默認(rèn)是 ease
animation-delay	規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始,默認(rèn)是 0
animation-iteration-count	規(guī)定動(dòng)畫(huà)被播放的次數(shù),默認(rèn)是 1,還有 infinite
animation-direction	規(guī)定動(dòng)畫(huà)是否在下一周期逆向播放,默認(rèn)是 normal, alternate 逆播放
animation-play-state	規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停,默認(rèn)是 running,還有 pause
animation-fill-mode	規(guī)定動(dòng)畫(huà)結(jié)束后狀態(tài),保持 forwards 回到起始 backwards

動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě):
animation: 名稱持續(xù)時(shí)間速度曲線延遲時(shí)間重復(fù)次數(shù) 方向是否停留在初始狀態(tài);
簡(jiǎn)寫(xiě)里不包含 animation-play-state
速度曲線的值有如下: linear,ease,ease-in, ease-out,ease-in-out,steps(多少步)

3D 轉(zhuǎn)換

三維坐標(biāo)系
1. x 軸: 水平向右,右邊是正值,左邊是負(fù)值
2. y 軸: 垂直向下,下邊是正值,上邊是負(fù)值
3. z 軸: 垂直屏幕,往外是正值,往里是負(fù)值

3D 位移

3D 移動(dòng)是在 2D 移動(dòng)的基礎(chǔ)上多加了一個(gè)可以移動(dòng)的方向,就是 z 軸
transform:translated3d(0,100px,200px);

透視 perspective

透視就是視距,就是眼睛到屏幕的距離,物體離屏幕(z 軸)越大,我們看到的物體就越大
z 軸上的偏移只有和透視結(jié)合使用才能看的出來(lái)
透視需要寫(xiě)在被觀察元素的父盒子上, perspective:500px

3D 轉(zhuǎn)換

3D 旋轉(zhuǎn)可以讓元素在三維平面內(nèi)沿著x 軸,y 軸,z 軸或者自定義軸進(jìn)行旋轉(zhuǎn)
1. transform:rotateX(45deg):沿著 x 軸正方向旋轉(zhuǎn) 45 度
2. transform:rotateY(45deg):沿著 y 軸正方向旋轉(zhuǎn) 45 度
3. transform:rotateZ(45deg):沿著 z 軸正方向旋轉(zhuǎn) 45 度
4. transform:rotate3D(x,y,z,deg):沿著自定義軸旋轉(zhuǎn) deg 角度,xyz 表示旋轉(zhuǎn)軸的矢量,是標(biāo)識(shí)是否希望沿著該軸旋轉(zhuǎn),比如:
  transform:rotate(1,0,0,45deg) 表示沿著 x 軸旋轉(zhuǎn) 45 度
左手法則: 伸出自己的左手將大拇指指向軸的正向,四指彎曲的方向就表示正值旋轉(zhuǎn)的方向
3D 呈現(xiàn) transform-style: 控制子元素是否開(kāi)啟三維立體環(huán)境, 默認(rèn)是 flat,子元素不開(kāi)啟 3d 立體空間. 子元素開(kāi)啟立體空間需將父級(jí)的 transform-style 設(shè)置為 preserve-3d;

瀏覽器私有前綴

瀏覽器私有前綴是為了兼容老版本瀏覽器的寫(xiě)法,較新版本的瀏覽器無(wú)需添加

前綴	瀏覽器
-moz-	代表firefox瀏覽器私有屬性
-ms-	代表ie瀏覽器私有屬性
-webkit-	代表safari,chrome私有屬性
-o-	代表opera私有屬性

移動(dòng)web開(kāi)發(fā)

國(guó)內(nèi)瀏覽器都是根據(jù)Webkit修改過(guò)來(lái)的內(nèi)核,兼容移動(dòng)端主流瀏覽器,處理Webkit內(nèi)核瀏覽器即可
meta標(biāo)簽的name設(shè)置為viewport時(shí),既是視口標(biāo)簽,標(biāo)準(zhǔn)寫(xiě)法<meta name="viewport" conten="width=device-width, user-scalable=no,initial-scale=1.0, maximum=1.0, minimum-scale=1.0">, 其屬性如下:

屬性	解釋
width	寬度設(shè)置的是viewport寬度,可以設(shè)置device-width特殊值
initial-scale	初始縮放比,大于0的數(shù)字
maximum-scale	最大縮放比,大于0的數(shù)字
minimum-scale	最小縮放比,大于0的數(shù)字
user-scalable	用戶是否可以縮放,yes或no

移動(dòng)端開(kāi)發(fā)方案

單獨(dú)制作移動(dòng)端頁(yè)面(主流)

通過(guò)判斷設(shè)備,如果是移動(dòng)設(shè)備,則跳到移動(dòng)端頁(yè)面。通常情況下,網(wǎng)址前面加m可以打開(kāi)移動(dòng)端

響應(yīng)式頁(yè)面兼容移動(dòng)端(非主流)

通過(guò)判斷屏幕寬度來(lái)改變樣式,以適應(yīng)不同終端,缺點(diǎn)是制作麻煩,需要花很大精力去調(diào)兼容性問(wèn)題

移動(dòng)端瀏覽器

移動(dòng)端瀏覽器基本以webkit內(nèi)核為主,因此就考慮webkit兼容性問(wèn)題, webkit內(nèi)核對(duì)H5和CSS3支持的非常好,所以可以放心使用

移動(dòng)端CSS初始化

推薦normalize.css,它有如下特點(diǎn):
1. 保護(hù)了有價(jià)值的默認(rèn)值
2. 修復(fù)了瀏覽器bug
3. 是模塊化的
4. 擁有詳細(xì)的文檔

特殊樣式的解決

清除點(diǎn)擊高亮: -webkit-tap-highlight-color: transparent;
禁用長(zhǎng)按頁(yè)面時(shí)彈出的菜單:img,a{-webkit-touch-callout:none;}
ios 需要加上這個(gè)屬性才能給按鈕和輸入框自定義樣式: -webkit-appearance:none

兩倍精靈圖做法

先把精靈圖等比例縮放為原來(lái)的一半
然后根據(jù)測(cè)量坐標(biāo)和大小
把 background-size 設(shè)置為原精靈圖寬度的一半

移動(dòng)端常見(jiàn)布局

單獨(dú)制作移動(dòng)端頁(yè)面中常見(jiàn)布局

流式布局(百分比布局)

流式布局,又稱百分比布局,也稱非固定像素布局
通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮,不受固定像素的限制,內(nèi)容向兩側(cè)填充
流式布局方式是移動(dòng) web 開(kāi)發(fā)比較常見(jiàn)的布局方式
可以通過(guò)設(shè)置盒子的 max-width 和 min-width 來(lái)限制盒子的最大最小寬度

flex 彈性布局(強(qiáng)烈推薦)

flex是flexible Box的縮寫(xiě),意為彈性布局,用來(lái)為盒子模型提供最大的靈活性,任何一個(gè)容器都可以指定為flex布局
操作方便,布局極為簡(jiǎn)單,移動(dòng)端應(yīng)用很廣泛,但是PC端瀏覽器支持情況較差
其原理是通過(guò)給父盒子添加flex屬性,來(lái)控制子盒子的位置和排列方式
當(dāng)父盒子設(shè)為flex布局以后,子元素的float、clear和vertical-align屬性將失效
flex布局中父元素主要使用下面幾個(gè)屬性:
1. flex-direction: 設(shè)置主軸的方向, 默認(rèn)x軸是主軸方向,水平向右,y軸是側(cè)軸方向,水平向下,屬性值如下

屬性值	說(shuō)明
row	默認(rèn)值,從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

justify-content: 設(shè)置主軸上的子元素排列方式,屬性值如下:

屬性值	說(shuō)明
flex-start	默認(rèn)值,從頭部開(kāi)始,如果主軸是x軸,則從左到右
flex-end	從尾部開(kāi)始排列
center	在主軸居中對(duì)齊(如果主軸是x軸則水平居中)
space-around	平分剩余空間
space-between	先兩邊貼邊再平分剩余空間

flex-wrap: 設(shè)置子元素是否換行,默認(rèn)nowrap是不換行的,當(dāng)子元素加起來(lái)的寬度超過(guò)父元素寬度也不換行,而是擠壓每個(gè)子盒子的寬度,使其保持在一行顯示. 若想換行需設(shè)置為wrap
align-content: 設(shè)置側(cè)軸上的子元素的排列方式(多行)

屬性值	說(shuō)明
flex-start	默認(rèn)值,從側(cè)軸的頭部開(kāi)始排列
flex-end	從側(cè)軸的尾部開(kāi)始排列
center	在側(cè)軸中間顯示
space-around	子項(xiàng)在側(cè)軸平分剩余空間
space-between	子項(xiàng)在側(cè)軸先兩邊貼邊再平分剩余空間
stretch	設(shè)置子元素高度平分父元素高度

align-items: 設(shè)置側(cè)軸上的子元素排列方式(單行)

屬性值	說(shuō)明
flex-start	從上到下
flex-end	從下到上
center	垂直居中
stretch	拉伸(默認(rèn)值)

flex-flow: 復(fù)合屬性,相當(dāng)于同時(shí)設(shè)置了flex-direction和flex-warp, flex-flow: row wrap;

flex 布局中子元素常用屬性如下:
1. flex: 用來(lái)表示子元素分配剩余空間的份數(shù),也可以是百分比
2. align-self: 控制子項(xiàng)自己在側(cè)軸上的排列方式,允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋align-items屬性,默認(rèn)為auto,表示繼承父元素的align-items屬性,如果沒(méi)有父元素則等同于stretch
3. order: 定義項(xiàng)目的排列順序,數(shù)值越小,排列越靠前,默認(rèn)為0,

less、rem、媒體查詢布局

rem

可以讓屏幕發(fā)聲變化的時(shí)候元素高度和寬度等比例縮放,它是通過(guò)修改html里面的文字大小來(lái)改變頁(yè)面中元素的大小
rem (root em)是一個(gè)相對(duì)單位, 類似em,不同的是rem的基準(zhǔn)是相對(duì)于html元素的字體大小, 比如根元素設(shè)置font-size=12px;非根元素設(shè)置width:2rem,則換成px表示就是24px;

媒體查詢

媒體查詢(Media Query)是CSS3新語(yǔ)法
使用@media查詢,可以針對(duì)不同的媒體類型定義不同的樣式
@media可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
當(dāng)你重置瀏覽器大小的過(guò)程中,頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面
語(yǔ)法規(guī)范:

// 格式
@media mediatype and|not|only (media feature) {
  ...CSS code;
}
// 舉例, 在我們屏幕上寬度小于等于800px時(shí),設(shè)置背景色為pink
@media screen and (max-width:800px) {
  body{
    background-color: pink;
  }
}

// 舉例, 在我們屏幕上寬度小于等于500px時(shí),設(shè)置背景色為purple
@media screen and (max-width:500px) {
  body{
    background-color: purple;
  }
}

用@media開(kāi)頭
mediatype媒體類型: 為all 時(shí)表示用于所有設(shè)備, print時(shí)表示用于打印機(jī)和打印預(yù)覽,screen時(shí)表示用于電腦屏幕,平板電腦,智能手機(jī)等
關(guān)鍵字 and not only, and可以將多個(gè)媒體特性連接到一起,相當(dāng)于且的意思, not排除某個(gè)媒體類型,相當(dāng)于非得意思,可以省略,only指定某個(gè)特定的媒體類型,可以省略
media feature媒體特性必須有小括號(hào)包裹

值	說(shuō)明
width	定義輸出設(shè)備中頁(yè)面可見(jiàn)區(qū)域的寬度
min-width	定義輸出設(shè)備中頁(yè)面最小可見(jiàn)區(qū)域?qū)挾?/td>
max-width	定義輸出設(shè)備中頁(yè)面最大可見(jiàn)區(qū)域?qū)挾?/td>

根據(jù)不同的屏幕寬度,引入不同的 css 資源,注意要從小往大的寫(xiě),如下當(dāng)屏幕寬度大于等于 640 的時(shí)候引入 style640.css,當(dāng)屏幕寬度在 320 和 640 之間時(shí),引入 style320.css

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

less

css 的缺點(diǎn)

css 是一門非程序式語(yǔ)言,沒(méi)有變量,函數(shù),作用域等概念
css 需要書(shū)寫(xiě)大量看似沒(méi)有邏輯的代碼,css 冗余度比較高
不方便維護(hù)及擴(kuò)展,不利于復(fù)用
css 沒(méi)有很好的計(jì)算能力

less

全稱 Leaner Style Sheets 的縮寫(xiě),是一門 css 擴(kuò)展語(yǔ)言,也稱為 css 的預(yù)處理器,作為 css 的擴(kuò)展,它在 css 的語(yǔ)法為 css 加入程序式語(yǔ)言特性,在 css 語(yǔ)法的基礎(chǔ)上引入了變量,Mixin(混入),運(yùn)算及函數(shù)等功能,大大簡(jiǎn)化了 css 的編寫(xiě),降低了 css 的維護(hù)成本。(less 中文網(wǎng))[http://lesscss.cn]
less 文件后綴名為.less
less 變量, 格式@變量名:值, 規(guī)范如下:
1. 必須有@為前綴
2. 不能包含特殊字符
3. 不能以數(shù)字開(kāi)頭
4. 大小寫(xiě)敏感

@redColor: #ff0000; // 定義一個(gè)紅色
@font14: 14px; // 定義一個(gè) 14px大小的字號(hào)
body{
  background-color:@redColor; // 這里就可以使用@redColor 將背景設(shè)置為紅色
  font-size:@font14; // 將字體大小設(shè)置為 @font14
}

less 編譯
1. less 文件不能被我們的 html 文件引用,html 文件只能引入 css 文件, 那么怎么才能使用 less 文件呢?
2. vscode安裝 Easy LESS 插件, 安裝成功后,每次我們寫(xiě)/修改完 less 文鍵,只要 ctrl+s 保存,就會(huì)幫我們生成與 less 文件同名的.css 文件,這樣我們就可以引入 css 文件使用了
less 嵌套
1. 內(nèi)層選擇器的前面沒(méi)有&符號(hào),則它被解析為父選擇器的后代
2. 如果有&符號(hào),它就被解析為父元素自身或父元素的偽類

// less 嵌套寫(xiě)法
a{
  &:hover{
    color:red;
  }
}
// 轉(zhuǎn)成 css
a:hover{
  color:red;
}

less 運(yùn)算
1. less 中任何數(shù)字,顏色,或者變量都可以參與運(yùn)算。less 提供了＋、-、*、/ 算術(shù)運(yùn)算
2. 對(duì)于兩個(gè)不同單位值之間的運(yùn)算,運(yùn)算結(jié)果的值取第一個(gè)值的單位
3. 如果兩個(gè)值之間只有一個(gè)值有單位,則運(yùn)算結(jié)果就取該單位
less 文件中使用@import "xxx"導(dǎo)入文件

rem 適配方案

使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置 html 的字體大小,然后頁(yè)面元素使用 rem 做尺寸單位,當(dāng) html 字體大小變化時(shí),元素尺寸也會(huì)發(fā)生變化,從而達(dá)到等比縮放的適配

rem + 媒體查詢 + less 適配方案

混合布局

響應(yīng)式頁(yè)面兼容移動(dòng)端中常見(jiàn)布局

響應(yīng)式開(kāi)發(fā)原理: 就是使用媒體查詢針對(duì)不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置,從而適配不同設(shè)備的目的

設(shè)備劃分	尺寸區(qū)間	寬度
超小屏幕(手機(jī))	<768px	設(shè)置寬度為 100%
小屏設(shè)備(平板)	>=768px, <992px	設(shè)置寬度為 750px
中等屏幕(桌面顯示器)	>=992px, <1200px	設(shè)置寬度為 970px
寬屏設(shè)備(大桌面顯示器)	>=1200px	設(shè)置寬度為 1170px

媒體查詢

bootstrap

bootstrap 是 Twitter 推出的最受歡迎的html、css、js框架, 用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。有如下優(yōu)點(diǎn):
1. 標(biāo)準(zhǔn)化的 html+css 編碼規(guī)范
2. 提供一套簡(jiǎn)潔,直觀,強(qiáng)悍的組件
3. 有自己的生態(tài)圈,不斷地更新迭代
4. 讓開(kāi)發(fā)更簡(jiǎn)單,提高了開(kāi)發(fā)的效率
中文官網(wǎng)
官網(wǎng)
推薦使用
Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container 容器,Bootstrap 預(yù)先定義好了這兩個(gè)類
1. container類: 響應(yīng)式布局的容器,固定寬度, 大屏(>=1200px)寬度定為 1170px; 中屏(>=992px)寬度定為 970px;小屏(>=768px)寬度定為 750px; 超小屏寬度定為 100%
2. container-fluid 類 :流式布局容器百分百寬度,占據(jù)全部視口(viewport)的容器,適合于單獨(dú)做移動(dòng)開(kāi)發(fā)
Bootstrap提供了一套響應(yīng)式,移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng),隨著屏幕或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多 12 列, Bootstrap里面 container 寬度是固定的,但是不同屏幕下,container 的寬度不同,我們?cè)侔?container 劃分為 12 等份

vw和 vh

vw/vh 是一個(gè)相對(duì)單位:
1. vw 是 viewport width 視口寬度單位, 1vw = 1/100 視口寬度
2. vh 是 viewport height 視口高度單位, 1vh = 1/100 視口高度
  例如,當(dāng)前屏幕視口是 375 像素,則 1vw 就是 3.75 像素,如果當(dāng)前屏幕視口為 414,則 1vw 就是 4.14
它和百分比的的區(qū)別是,百分比是相對(duì)于父元素來(lái)說(shuō)的,而 vw 和 vh 總是針對(duì)當(dāng)前視口來(lái)說(shuō)的

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS

選擇器

CSS 引入的三種方式

Emmet 語(yǔ)法

快速生成html標(biāo)簽語(yǔ)法

快速生成CSS樣式語(yǔ)法

格式化代碼

復(fù)合選擇器

CSS 的元素顯示模式:

塊元素

行內(nèi)元素

行內(nèi)塊元素

顯示總結(jié)

顯示模式的轉(zhuǎn)換

CSS 的三大特性: 層疊性、繼承性、優(yōu)先級(jí)

頁(yè)面布局的三大核心:盒子模型、定位、浮動(dòng)

盒子模型

傳統(tǒng)網(wǎng)頁(yè)布局的三種方式

浮動(dòng)

浮動(dòng)的特性

清除浮動(dòng)

定位

靜態(tài)定位

相對(duì)定位relative重要

絕對(duì)定位 absolute (重要)

固定定位 fixed (重要)

粘性定位 sticky (了解)

定位疊放次序 z-index

定位的特殊性

網(wǎng)頁(yè)布局總結(jié)

元素的顯示與隱藏

精靈圖

字體圖標(biāo)(iconFont)

CSS 實(shí)現(xiàn)三角

CSS 用戶界面樣式

什么是界面樣式

vertical-align 屬性

溢出文字省略號(hào)顯示

CSS 的初始化

HTML5 新特性

CSS3 新特性

屬性選擇器

結(jié)構(gòu)偽類選擇器

偽元素選擇器

盒子模型

CSS3 濾鏡 filter

過(guò)渡

技巧

CSS3 新增其他新特性

2D 轉(zhuǎn)換

2D 移動(dòng)

2D 旋轉(zhuǎn)

2D 縮放

2D 轉(zhuǎn)換的綜合寫(xiě)法

動(dòng)畫(huà)

基本使用

動(dòng)畫(huà)常用屬性

3D 轉(zhuǎn)換

3D 位移

透視 perspective

3D 轉(zhuǎn)換

瀏覽器私有前綴

移動(dòng)web開(kāi)發(fā)

移動(dòng)端開(kāi)發(fā)方案

單獨(dú)制作移動(dòng)端頁(yè)面(主流)

響應(yīng)式頁(yè)面兼容移動(dòng)端(非主流)

移動(dòng)端瀏覽器

移動(dòng)端CSS初始化

特殊樣式的解決

兩倍精靈圖做法

移動(dòng)端常見(jiàn)布局

單獨(dú)制作移動(dòng)端頁(yè)面中常見(jiàn)布局

流式布局(百分比布局)

flex 彈性布局(強(qiáng)烈推薦)

less、rem、媒體查詢布局

rem

媒體查詢

less

css 的缺點(diǎn)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

頁(yè)面布局的三大核心:盒子模型、定位、浮動(dòng)

less、rem、媒體查詢布局