好程式設計師 HTML5 培訓教程 -html 和 css 的使用方法以及樣式，很好的基礎知識系列，內容都是乾貨知識點，適合收藏下來！

佈局步驟
第一步：清除預設樣式
第二步：劃分模組
第三步：設定模組的大小以及位置
第四步：劃分下一級模組
html 和 css
引入網頁頭像
<link rel="shortcut icon" href="img/...ico">
css 樣式表的引入方式

css 樣式表的引入方式
1 、外鏈式

2 、嵌入式

3 、行內樣式

@import url('')

檔案命名以及變數命名

命名規範
1 、嚴格區分大小寫
2 、可以採用字母數字下劃線 $, 數字不開頭
3 、命名語義化
4 、可以採用駝峰命名法
清除預設樣式

清楚邊距

*{

margin : ;

padding : ;

list-style : none;

}

a 標籤清楚下劃線和顏色

a {

color : black;

text-decoration : none;

}

css 中顏色的表示方式

css 中顏色的表示方式：
1. 預定義的顏色【關鍵字顏色】 red pink blue yellow
2.#6 位數的色值 #00-00-00 紅綠藍
3.rgb （紅，綠，藍）： rgb([0-255],[0-255],[0-255])
4.rgba （ red ， green ， blue ，透明度）： rgba([0-255],[0-255],[0-255] ， [0-1])

0-1: 0 全透明， 1 不透明

html 中的標籤和屬性
html ：
標籤：
按照語法分類：

1. 單標籤：只有開始標籤

meta img a

2. 雙標籤：有開始標籤和結束標籤

3. 屬性的語法

語法：

屬性名 = " 屬性值 "

屬性名 = " 屬性值 1 屬性值 2"

注意 :

1 、標籤名和屬性名之間要有空格

2 、多個屬性之間要有空格

3 、多個屬性值之間要有空格

4. 開始標籤標籤名後有空格

按照標籤在頁面中的呈現效果分類：

1 、行內元素

行內元素定義 : 在一行內顯示，只能設定左右間距，不可以設定上下間距。

舉例： span del i em b strong a(title= " 滑鼠移入時顯示的文字 " ;target= " " ( 新視窗開啟的位置 _self: 在本視窗開啟 ;_blank: 在新視窗開啟 ) ...

2 、塊元素

塊元素定義：可以設定寬高，獨佔一行。

舉例： div 標題標籤列表標籤段落標籤 ...

3 、行內塊元素

行內塊元素定義：可以設定寬高，在一行顯示。

舉例： img 【 title= " 滑鼠移入時顯示的文字 " 】表單控制元件

元素的轉換

塊元素： display: block;

行內塊元素： display: inline-block;

行內元素： display: inline;

元素的級別

塊元素 > 行內塊元素 > 行內元素

元素巢狀規範

1 、同一級別可以相互巢狀

2 、級別高的元素可以巢狀級別低的元素

3 、段落標籤只能巢狀行內元素

4 、 a 標籤不可以巢狀 a 標籤； p 不能巢狀 p

盒子模型及其問題

四部構成：

1 、 margin 外間距盒子與盒子之間的距離

2 、 border 邊框

3 、 padding 內填充（內間距）邊框與內容之間的距離。

4 、 content 內容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin: 0 auto; auto 自動

margin: 50px 100px 150px; 上左右下

margin: 50px 100px 150px 200px; 上右下左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width ：上邊框的寬度

padding: 設定方法同 margin

content: ;

width : 數值百分比 auto

height: 數值百分比 auto

盒子模型的問題：

1. 大部分元素的 margin 和 padding 預設為，但有一部分的 margin 和 padding 不為，例如 body 標題標籤（ h1-h6 ）（ ul ol il 等列表標籤）段落標籤

2. 想領的兩個塊元素的 margin 會重合，值會取最大值

3.margin 可以為 [ 負數 ] ， padding 不可以設定 [ 負數 ] 。

4. 行內元素 margin 只有左右，沒有上下

5. 如果（ 1 ）發生巢狀關係的元素，（ 2 ）父元素沒有上邊框，（ 3 ）上 padding ，（ 4 ）父元素與子元素之間沒有別的內容，此時子元素 margin-top 就會作用到父元素身上

margin-top 的解決方式：

1. 用父元素的 padding-top 代替子元素的 margin-top ；

2. 給父元素新增 overflow ： hidden ；

寬高的設定和計算

height ： auto / 百分比 / px ；
width ： auto / 百分比 / px ；
height ： auto ；參照與父元素
width ： auto ；參照與內容
box-sizing ： border-box ；將邊框算入盒子內；

一個元素實際的寬高
實際寬度 = border-left + padding-left + width +paddint-right + border-right;
實際高度 = border-top + padding-top + height + padding-bottom + border-bottom;
浮動

作用：讓塊元素橫排排列
樣式： float ： left ；從左往右排列

float ： right ；從右往左排列

原理：讓元素脫離文件流，讓元素從文件層浮動到浮動層。
引發的問題：父元素不設定高度，子元素都浮動，浮動的子元素撐不開父元素。（浮動的元素脫離文件流）

* 解決方式一：給父元素新增 overflow ： hidden ；（超出部分隱藏）

* 解決方式二：在父元素內容最後新增擁有清除浮動屬性的元素。

clear ： right/left/both ；別的浮動對它的影響清除掉

例：

.box ： after{

content: "";

display: block;

width: 0;

height: 0;

clear: both;

}

* 解決方式三：父元素能設定高度的儘量設定高度

浮動之後的塊元素參照內容：屬性值 auto
定位

定位的元素脫離文件層，到達定位層
定位的元素會多出 5 個樣式：

top right bottom left z-index ： 999

上右下左層級（層級越高，離使用者越近）【只能在有定位屬性的元素上才能用】

層級：
z-index ：整數；
定位的幾種方式：
1. 相對定位：

相對於自身來定位，在文件層中保留原來的位置

用法：

position ： relative ；

2. 絕對定位：

相對於最近的定位的祖先元素來定位，完全脫離文件流（其他頂替其位置）

用法：

position ： absolute ；

+ 方向值

3. 固定定位：

相對於瀏覽器的四條邊，完全脫離文件流

用法：

position ： fixed ；

top 與 bottom 同時定義，那個樣式會作用到元素身上的判斷關係：

top 的權重比 bottom 的權重大

left 的權重比 right 的權重大

元素作用時：

1. 如果是

position ： relative ；

left ：；

margin ：；

先作用 margin ，在作用 relative ；

2. 如果是

position ： absolute ；

left ：；

margin ：；

先作用 absolute ，在作用 margin ；

定位元素的居中方式：
方法一：

1 . 水平居中：

position ： absolute ；

left ： 50 % ；

margin- left ： - 自身長度的一半；

2 . 垂直居中：

position ： absolute ；

top ： 50 % ；

margin-top ： - 自身長度的一半；

3 . 絕對居中：

position ： absolute ；

left ： 50 % ；

top ： 50 % ；

margin- left ： - 自身長度的一半；

margin-top ： - 自身長度的一半；

方法二：

1 . 水平居中：

position ： absolute ；

left ：；

right ：

2D 和 3D

2D 和 3D 屬性：
1. 平移樣式

transform :translate(x, y ); 向上為負，向下為正

transform :translateX(100px);

transform ： rotate （ 180 deg ）；（ 1 turn ）轉一圈

平移 transform :translate （）例子： translate （ x ， y ） translateX （）

旋轉 transform :rotate （）例子 rotate （ 180 deg ）順時針 -180deg 逆時針

transform ： rotate （）空格 translate （）；

transform-origin :px px ; 變換的中心點；

left center ；

縮放 transform :scale （）例子： scale （ 2 ）放大為原來的 2 倍 scale （ 0.n ）縮小為原來的 0.n scale （ m ， n ） x 軸 m ， y 軸 n

斜切 transform :skew （）例子： skew （ 45 peg ）左拉伸 45° skew （ 45 peg ， m ）

過渡 transition
transition ： all 0.5s ；

全部時間

3. 過渡的屬性樣式： transition-property: ， ;

可以為：屬性的全部樣式

4. 過度的總時間： transition-duration ：；
5. 過渡的時間函式： transition-timing-function ：；

linear （勻速） ease （開頭結尾慢，中間快）

cubic-bezier （ 1 ， 0.07 ， 0.54 ， 0.21 ）貝塞爾曲線

6. 延遲 transition-delay ：；

3d 效果：和 2d 的一樣 transition ， transform ；

prespective ：給父元素加 prespective （滅點的值）

prespective-origin ： x y ；滅點的位置調整觀察的角度（大多數情況不設定）

transform ： ratate3d （ 0-1 的值 , 0-1 的值 , 0-1 的值 , 45 deg ）

transform ： ratateY （ 45 deg ）

transform ： translate3d （ 0-1 ， 0-1 ， px ）

父元素： transform-style ： preserve-3d ；
動畫

動畫規則：

@ keyframes 動畫名（隨便給） {

（動畫規則）

from {}

to {}

}

@ keyframes 動畫名（隨便給） {

（動畫規則）

0%{}

50%{}

100%{}

}

@ keyframes animation1{

from {

background-color :red;

}

to {

background-color :blue;

}

掛載動畫 : 將動畫加到元素身上

. 元素 {

animation ： animation1 時間步數時間函式延遲時間次數；

}

掛載多個動畫：

. 元素 {

animation ： animation1 時間 ,animation2 時間 ,animation1 時間；

其他動畫的相同的可以附件透過 animation 屬性；

}

animation 的樣式
動畫名： animation-name
時間： animation-duration
步數： animation-steps ： 8 ；
時間函式： animation-timing-function
延遲： animation-delay
動畫次數： animation-iteration-count ： infinite （無限次） /2 ；
指定下一次動畫是否逆向： animation-direction ： alternate （逆向） / normal （常規）；
最後的狀態： animation-fill-mode ： backwards （預設（保持一開始的狀態）） /forwards （保持當前的狀態）；
狀態即指定動畫是否運動： animation-play-state: running （執行） /paused （靜止） ;

元素分類

按照在頁面中的呈現效果：
1. 行內元素：在一行內顯示，不可以設定寬高：（存放文字）

span a b i strong del

2. 行內塊元素：在一行內顯示，可以設定寬高：（有縫隙不常用）

img 表單控制元件

3. 塊元素：可以設定寬高，獨佔一行

div 標題標籤（ h1-h6 ）列表標籤（ ul-li ol-li dl>dt+dd 段落標籤（ p pre ））

元素巢狀規範：

1. 同一級別可以相互巢狀

2. 級別高的可以巢狀級別低的元素

3.p 標籤只能巢狀行內元素

4.a 連結不能相互巢狀

元素的轉換：

1. 塊元素： display ： block ；

2. 行內塊元素： display ： inline -block ；

3. 行內元素： display ： inline ；

背景圖片以及瀏覽器核心

背景圖

先設大小，在引 background ；

background: url( ' 路徑 ' ) no-repeat left bottom/contain ；

// 圖片位置禁止重複位置（ top bottom left right ）

路徑： background-image ： url （ “” ）， url （ “” ）；載入多張背景圖
背景圖大小： background-size ： 100px auto ， 100px auto ；會重複
背景的圖重複：

4. background- repeat ： no- repeat ， repeat ；（無重複）

5. background- repeat ： repeat -x （ x 方向重複）

background- repeat ： repeat -y （ y 方向重複）

背景圖的位置：

background-position ： x y ；（數值方位值（ top/bottom left / right center （可以省略）））

背景開始渲染的位置： background-origin: ;

8. padding- box ；（預設）從 padding 位置開始渲染

9. border- box ；從邊框的位置開始渲染

content- box ；從內容的位置開始渲染

圖片結束渲染的位置： background-clip: ;

11. padding- box ；（預設）從 padding 位置結束渲染

12. border- box ；從邊框的位置結束渲染

content- box ；從內容的位置結束渲染

使得背景圖載入到瀏覽器中
background-attachment: fixed;

8. 可以簡寫：

background ：空格隔開；

背景圖漸變
background: linear-gradiend(top ，顏色 1 ，顏色 2 ，顏色 n)

// 漸變開始的方向（預設 top ）類似 25deg （ 25 度）

10. 瀏覽器核心 // 背景色漸變

1. /* 標準語法 */

例子： background : linear-gradient ( top , #3bbcff , #47eaff );

2. /* 谷歌核心 -webkit- */

例子： background : -webkit-linear-gradient ( top , #3bbcff , #47eaff );

3. /* 火狐核心 -moz- */

例子： background : -moz-linear-gradient ( top , #3bbcff , #47eaff );

4. /* 歐鵬核心 -o- */

例子： background : -o-linear-gradient ( top , #3bbcff , #47eaff );

5. /* IE 核心 -ms- */

例子： background : -ms-linear-gradient ( top , #3bbcff , #47eaff );

檔案的讀取方法路徑

絕對路徑：從磁碟機代號開始的一條完整路徑
相對路徑：兩個檔案的位置關係
邊框的相關屬性【圓角，邊框形狀】

border-radius ：邊框的半徑設定圓角 n% 或者 num 畫素
border-style:dotted solid double dashed;

上邊框是點狀

右邊框是實線

下邊框是雙線

左邊框是虛線

透明度

透明性的選擇：（整個容器都變）
opacity ：； 0-1 之間的值；
字型

font-family =“ 字型 ” // 字型樣式可以被繼承
滑鼠移入樣式

span 標籤
cursor ： pointer ；滑鼠樣式：手型
陰影

box-shadow ： x 軸偏移量 y 軸偏移量陰影的模糊程度陰影的大小（和本身一樣大小）陰影的顏色；
引入字元圖示

引入字元圖示：
行內元素隨意
span class=“iconfont 圖示類名 ”
可調節樣式：同文字
文件流

文件流：

標準情況下，頁面元素從左往右從上往下依次排列

flex 佈局 ( 規範的設計稿 )- 彈性佈局

容器（父元素）的屬性：【 display:flex; 】

*flex-direction: 決定主軸方向。

row 主軸在水平方向，從左向右（預設）。

row- reverse 主軸在水平方向，從右向左

column 主軸在垂直方向，從上到下

column- reverse 主軸在垂直方向，從下到上

*flex- wrap : 決定專案換行

wrap : 專案換行

nowrap: 專案不換行（預設值）

wrap - reverse ：專案換行且反轉

*justify-content: 決定專案在主軸的對齊方式

flex-start; 主軸的起點

flex- end ; 主軸的終點

center; 主軸的中心

space-between; 兩端對齊

space-around; 專案兩側距離相等

*align-items ：專案在交叉軸上的對齊方式（適用於一根軸線與多跟軸線）

flex-start: 交叉軸的起點

flex- end ：交叉軸的終點

Center ：交叉軸的中心

baseline ：基線對齊（文字底部）

*align-content: 定義專案在交叉軸上的對齊方式（僅適用於多根軸線）

flex-start; 交叉軸的起點

flex- end ; 交叉軸的終點

center; 交叉軸的中心

space-between; 兩端對齊

space-around; 兩側距離相等

子元素（專案）的屬性：

*order ：定義專案的排列順序，數值越小，越靠前，預設值為（可以取負值）。

*flex- grow: 定義專案的放大比例。預設值為，即使存在剩餘空間，也不放大。

*flex-shrik ：定義專案的縮小比例，預設值為 1 ，空間不足，專案縮小 ; 值為時 , 空間不足 , 專案也不縮小 .

*flex- basis: 定義專案佔據的主軸空間 . 預設 auto 或者自己新增畫素 ;

*align- self: 定義單個專案在交叉軸的對齊方式 .

flex- start: 交叉軸的起點

flex-end ：交叉軸的終點

Center ：交叉軸的中心

捲軸

overflow-x ： auto ；超出部分在 x 軸的表現形式。

auto ：自動；（如果超出，就自動以捲軸的形式顯示）

去捲軸：加在具有 overflow 屬性的元素身上

::-webkit-scrollbar {

height ：；

}

swiper(.js).com
表格

[ 行 ] [ 列 ]

table 身上的屬性

table 身上的屬性：

border ：表格邊框 cellspacing ：單元格間的間距

cellpadding ：單元格的內容與其邊框的內邊距

bgcolor ：表格的背景顏色 background ：表格的背景圖片

width ：表格寬度 height ：表格高度

border-collaspe ： collaspe ：邊框合併，不疊加 cellspacing ：：邊框合併，但合併之後的邊框寬度等於前兩個邊框寬度之和

caption ：表格標題

background: 表格背景圖

cellspacing: 單元格之間的間隙寬度

align: 表格的水平對齊方式，通常是 left ， center ， right

表格的標題

<caption align=" 水平對齊方式 " valign=" 標題與表格的相對位置 "></caption>
單元格【 tr 】【 td 】

width ：單元格寬度 height ：單元格高度
align ：單元格內文字的對齊方式 , 通常是左，中，右 left ， center ， right
valign ：單元格內文字的對齊方式 , 通常是上，中，下 top ， middle ， bottom
nowrap ：在為設定單元格寬度時，當文字長度寬於單元格寬度，將要換行時，該標籤會使其不換行

<td align = "center" nowrap > 手機空中免費充值 </td>

</tr>

表格的跨行與跨列【 td 】

rowspan ：跨行標籤，表示跨了多少行
colspan ：跨列標籤，表示跨了多少列

表格標籤擴充及其屬性

thead ：定義表格的表頭。

tbody ：定義表格主體（正文）。

tfoot ：定義表格的頁尾（腳註或表注）。

colgroup ：標籤用於對錶格中的列進行組合，以便對其進行格式化。

注意：不管 thead 、 tbody 、 tfoot 的程式碼先後順序如何， html 顯示時，始終是先顯示 thead ，再顯示 tbody ，最後顯示 tfoot 。

1 、 <thead> 內部必須擁有 <tr> 標籤！
2 、 <tfoot> 元素內部必須包含一個或者多個 <tr> 標籤。
3 、 <tbody> 元素內部必須包含一個或者多個 <tr> 標籤。
4 、必須在 table 元素內部使用這些標籤。
5 、當不同行間的單元格合併時各單元格所在的行不要加 tbody 標籤。
標題欄

《 tr 》 <th></th> 《 /tr 》用法和 td 相似知識自動將單元格內容以粗體顯示

表單控制元件表單標籤

action: 表單資訊提交的位置；

method ：提交的方式

get ：位址列，資訊量少，安全性低

post ：資訊量多，比較安全

1. 輸入文字【輸入框】：

使用者名稱： <input type = "text" placeholder= " 請輸入使用者名稱 " maxlength= "10" value= " " name= "username" class = "" >

placeholder ：預設提示文字 ;

maxlength: 規定輸入的最大字元數

name: 本文字框的名字，與後臺進行資料互動用

class : 定義本文字框的樣式，相當於盒子

placeholder 下的縮排

text-indent ： 2 em ；縮排

2. 輸入密碼【密碼框】：

密碼： <input type = "password" placeholder= " 請輸入密碼 " maxlength= "10" value= " " name= "psw" class = "" >

3. 單選按鈕 [name 的值必須相同 ] ：

請選擇你的性別：

<label for = "man" > [label 實現點什麼就選中， for 中的值和 id 中的值相同 ]

男： <input type = "radio" name= "sex" id= "man" checked> //checked 預設選項

</label>

女： <input type = "radio" name= "sex" id= "woman" >

</label>

4. 多選按鈕 [name 的值必須相同 ] ：

請選擇你喜歡的音樂：

搖滾： <input type = "checkbox" checked>

5. 下拉選單【下拉框】：

選擇你的學歷：

</select>

6. 上傳檔案：

選擇你的照片：

7. 留言文字空間：

</textarea>

8. 使用者是否允許重新設定 textarea 大小 css 屬性：

resize: none/both/vertical/horizontal; 不允許 / 上下允許拖動 / 只能在垂直方向拖動 / 只能在水平方向拖動

9. 重置按鈕：

10. 提交按鈕：

11. 自定義按鈕：

12. 顏色：

13. 時間日期：

年月： <input type = "month" >

年周： <input type = "week" >

時分： <input type = "time" >

年月日： <input type = "date" >

年月時分： <input type = "datetime-local" >

14. 驗證

<input type = "email" > 郵箱驗證

<input type = "tel" autofocus> 電話

15. autofocus 自動獲取焦點

</form>
文字模型
文字換行

使非中日韓文字換行
word-break: break-all ;
文字禁止換行

white-space:nowrap;
單行文字溢位部分以省略號顯示

overflow: hidden;( 放文字的容器 )
text-overflow: ellipsis;
多行文字溢位

指定為彈性盒子
display: -webkit-box;
在彈性盒模型中指定元素的排列順序
-webkit-box-orient: vertical;
指定文字顯示（溢位）的行數 ;
-webkit-line-clamp: 3;
height 要是 line-height 的倍數
line-height: 70px;
overflow ： hidden ；

音訊影片標籤
音訊標籤

controls 空間向使用者顯示：

loop 迴圈播放

autoplay 當前頁面載入完自動播放

影片標籤

<video src="" controls loop autoplay></video>
H5 語義化標籤

<header> 頭部 </header>
<nav> 導航 </nav>
<aside> 側導航 <aside>
<section> 頁面中的某一部分 </section>
<main> 主體 </main>
<footer> 底部 </footer>
meta 標記【籤】

name=" 關鍵字 " cantent=" 內容 "
<mate http-equiv="Refresh" content="10";url=" 跳轉路徑 "> // 每 10s 重新整理一次並且跳轉到跳轉路徑知識的檔案
bgsound 標籤

<bgsound src=" 路徑 " loop=" 播放次數 ">
body 屬性

bgcolor: 背景顏色
background ：背景圖片
text ：文件中文字的顏色
link ：超連結的顏色
alink ：正在訪問的超連結的顏色
vlink ：已訪問過的超連結的顏色
leftmargin/rightmargin/topmargin/bottommargin ：左 / 右 / 上 / 下邊距的畫素值

對文字操作的標籤

<p></p> 開始一個新段落，可單可雙
換行標籤，單獨標記
<pre></pre> 預格式化【敲什麼樣式，顯示什麼樣式】
<font></font> 用來設定文字的字型大小顏色粗細等
文字樣式標記 [ 均成對出現 ]
b 粗體 i 斜體 u 下劃線 tt 等寬
sup 上標體 sub 下表體 strike 刪除線 big 大號字樣
small 小號字樣 blink 閃爍字樣 em 強調字樣 strong 著重字樣 cite 引用字樣

列表標籤

符號列表
<ul type="circlr( 空心圓點 )/disc （實心圓點）【預設】 /square （實心方塊） ">

2. <li>

<li>

</ul>

排序列表
<ol type="1( 數字 ) /a （ a ， b ， c.. ） / A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a 標籤

<a href=" 路徑 " title=" 滑鼠移入時顯示的文字 " target=" "( 新視窗開啟的位置 _self: 在本視窗開啟 ;_blank: 在新視窗開啟； _parent: 在當前視窗的父視窗開啟連結； _top: 在整個瀏覽器視窗開啟 ) ...
[ 字元實體 ] 常用的跳脫字元
顯示結果描述實體名稱

空格

< 小於號

大於號
& 和號
" 引號
' 撇號 (IE 不支援 )
￠分（ cent ）
£ 鎊（ pound ）
¥ 元（ yen ）
€ 歐元（ euro ）
§ 小節
© 版權（ copyright ）
® 註冊商標
™ 商標
× 乘號
÷ 除號
選擇器
分類

css 選擇器
1. 通用選擇器：

* ｛｝ // 選擇所有的標籤

2. 群組選擇器：

E1,E2,E3.. ｛｝ // 選擇 E1 E2 E3

3. 標籤選擇器

標籤名｛｝

4. 類名選擇器：

. 類名｛｝

5. 後代選擇器

.E1 .E2 ｛｝ // 選擇 E1 的後代 E2

6. 交叉選擇器

標籤名 . 類名｛｝

7.id 選擇器
例如建立 id

#id 名｛｝ // 選擇頁面中 id 為 ** 的標籤

8. 偽類選擇器：

滑鼠移入狀態

E ： hover { } E 元素選擇滑鼠移入狀態

E ： hover . 子類 { } 選擇 e 元素下滑鼠移入時子類的變化

獲取焦點，用於表單的輸入

E : focus {

outline : none;

}

9. 偽結構選擇器：

E ： first-child ｛｝作為子元素的第一個孩子的 E 標籤

E ： last-child ｛｝作為子元素的最後第一個孩子的 E 標籤

E : nth-child(n){} // 作為子元素的第 n 個孩子的 E 標籤

E : nth-last-child(n) 作為子元素的倒數第 n 個孩子的 E 標籤

E ： first- of - type ｛｝作為子元素的同型別的第一元素

E ： last- of - type ｛｝作為子元素的同型別中的最後一個元素

E : nth- of - type （ n ）作為子元素的同型別中的第 n 個元素

E : nth-last- of - type ( n ) 作為子元素的同型別中的倒數第 n 個元素

（ n ） n 可以以為 num/even （偶數） /odd( 奇數 )/ 3 n （ 3 的倍數）

例子： 5.15 / 偽結構選擇器

10. 偽元素選擇器：

::after{} 在元素之後加入一個

::before{

content ： “ 內容之前 ” ；

color ：；

} 在元素之前

屬於行內元素

::after{} ::before{} 偽元素 content ： "" ；樣式必須寫

11. 子類選擇器

相鄰兄弟選擇器

E1+E2 ｛｝選擇 E1 的下一個兄弟元素 E2 （不能選中上一個兄弟元素）

div .box>a+img a 和 img 統計

子類選擇器

E1>E2{} 選擇 E1 的子類元素 E2

例子： div .box> div .item{$}* 20

div .box>a>img

12. 屬性選擇器

[ 屬性名 ]{} 選擇所有擁有屬性為屬性名的元素

[ 屬性名 =“value”] ｛｝選擇擁有屬性名的屬性且屬性值為 value

E [ 屬性名 =“value”]{} 選擇擁有屬性名的屬性且屬性值為 value 的 E 元素

E [ 屬性名 ~=“value”]{} 選擇擁有屬性名的屬性並且屬性值一個或者多個，其中一個屬性值為 value 的 E 元素

E [value^=“1”]{} 選擇擁有 value 的屬性並且屬性值一個或者多個，其中一個屬性值以 1 開頭的 E 元素

E [value$=“1”]{} 選擇擁有 value 的屬性並且屬性值一個或者多個，其中一個屬性值以 1 結尾的 E 元素

E [value*=“1”]{} 選擇擁有 value 的屬性並且屬性值一個或者多個，其中一個屬性值包含 1 的 E 元素

例子：屬性選擇器

選擇器的優先順序

宗旨：越具體的優先順序越高
id (100 ) > class( 10 )> 標籤名 ( 1)

. box .son{ } 10 + 10 = 20

abcde 優先順序（ e 為個位）：

a: 行內樣式

b: id 選擇器

c: 類名選擇器偽類選擇器（： hover ）屬性選擇器

d: 標籤選擇器偽元素選擇器（：： after ）

e: 通用選擇器有一個

選擇有中有一個 abcde 在其位置 +1
移動端佈局步驟

修改視口
<meta name="viewport" content="width=device-width">

視口：視覺視口，佈局視口，理想視口
em: 當前字型的倍率 100px=10em
rem ： html 字型的倍率

移動端視窗 375 * 667

html{

font-size ： 0.5 rem ；

}

. box {

width ： 750 rem ； //375px=750rem*0.5px ； 100px=1rem

height ： 1334 rem ；

}

引入 rem.js
<script src=" 路徑 "></script>
修改 rem.js 中設計稿的寬度
100px=1rem

未完待續，感謝關注 好程式設計師 前端教程分享！

好程式設計師HTML5培訓教程-html和css的使用方法以及樣式

相關文章