一、HTML基礎標簽
1.HTML簡介
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言
標記語言是一套標記標簽
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML?標簽及文本內容
HTML 運行在瀏覽器上，由瀏覽器來解析
HTML文檔也叫做?web 頁面
文檔的后綴名：xxx.html 或 xxx.htm
2.HTML標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)
HTML 標簽是由尖括號包圍的關鍵詞，比如?<html>
HTML 標簽通常是成對出現的，比如?<b>?和</b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
3.HTML基礎標簽
html
html是網頁的根標簽，網頁的所有內容，都必須要寫在該標簽里面
head
head是頭部標簽，用于導入外部的資源信息和描述網頁自身信息
title
title是網頁自身的標題標簽，它里面的內容會在網頁的瀏覽器的選項卡上顯示
body
body是主體標簽，網頁中能看到到所有內容，都必須要寫在該標簽里面
<!DOCTYPE html>
文檔聲明，是告訴瀏覽器采用什么標準去解析下面的網頁，這里表示html5的標準
如果沒有文檔聲明標簽，瀏覽器會根據網頁中具體的標簽去判斷使用什么標準
其他標準：
HTML 4.01
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
meta
meta標簽提供關于HTML文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。它可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務
meta標簽是單標簽，不需要閉合標簽，規范寫法，單標簽需要自閉合
聲明編碼：
utf-8 包含全世界所有國家需要用到的字符
gb2312 包含全部中文字符
<metacharset='utf-8'/>
頁面關鍵詞：
<metaname="keywords"content="前端,web前端"/>
頁面描述：
<metaname="description"content="如何學好前端"/>
頁面重定向和刷新：
content內的數字代表時間（秒），既多少時間后刷新。如果加url,則會重定向到指定網頁
<metahttp-equiv="refresh"content="30;url="/>
移動設備：
如果不是響應式網站，不要使用initial-scale或者禁用縮放
大部分4.7-5寸設備的viewport寬設為360px；5.5寸設備設為400px；iphone6設為375px；ipone6 plus設為414px
<metaname="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><!-- `width=device-width` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊? -->
width：寬度（數值 / device-width）（范圍從200 到10,000，默認為980 像素）
height：高度（數值 / device-height）（范圍從223 到10,000）
initial-scale：初始的縮放比例 （范圍從>0 到10）
minimum-scale：允許用戶縮放到的最小比例
maximum-scale：允許用戶縮放到的最大比例
user-scalable：用戶是否可以手動縮 (no,yes)
注意，很多人使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染，用戶需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網頁來看到全部的內容
<link/>
導入外部資源，比如：網頁選項卡圖標，外部樣式
<linkrel="icon"href="favicon.ico">
h1~h6
h1~h6是網頁的內容標題標簽，h1最大，h6最小。標題標簽的特點是：字體會加粗
p
p標簽是段落標簽，用于描述一段內容
hr
hr是水平線標簽，用于對網頁中的內容進行分隔
br
在網頁中，無論打多少空格，或者換多少次行，默認都只是一個空格
如果需要手動換行，需要使用br標簽
strong
strong是加粗標簽，用于突出一段內容里面的部分信息
em
em是傾斜標簽，也用于突出一段內容里面的部分信息
特殊符號
? ? ? 空格
<? ? ? ? ? ? ?小于號
>????????????大于號
"? ? ? ? ?雙引號
©????????版權符號
img
img是圖片標簽，src屬性設置圖片的地址，地址可以是本地地址，也可以是網絡地址
title屬性設置鼠標懸停提示信息，alt屬性設置圖片的替代文字，當圖片無法顯示時，顯示對應的文字
width屬性設置圖片寬度，height屬性設置圖片高度，如果只設置了其中一個屬性，另一個屬性會等比縮放
a
超鏈接標簽，根據鏈接類型可以分為：頁面間鏈接，錨鏈接，功能性鏈接
1.頁面間鏈接：
href屬性設置鏈接的地址，可以是本地地址，也可以是網絡地址
target屬性設置目標窗口打開的位置，屬性值_self替換自身窗口，_blank是打開新窗口
<a href="./index06.html"target="_self">替換自己</a>
<a href="./index06.html"target="_blank">打開新窗口</a>
2.錨鏈接：
用于當前頁面的跳轉，從頁面的某個區域，跳轉到另一個區域
通常需要兩個a標簽，一個a標簽通過name屬性設置錨標記，另一個a標簽通過href屬性跳轉到對應的錨標記處
注意：href屬性值需要加一個#號
如果需要跨頁面，在href屬性中，顯示設置地址，在地址的后面在設置對應的錨標記
<a href="#bj">北京</a>
<!-- 這里的a標簽，只是做一個錨標記，通過name屬性設置標記名 -->
<a name="bj"></a>
3.功能性鏈接：
利用超鏈接打開本地的應用
<a href="mailto:123456789@qq.com">發送郵件</a>
<a target="_blank">打開QQ</a>
div
div是分區標簽，是一個塊級標簽，通常用于網頁的布局
span
span是范圍標簽，是一個行級標簽，通常用于突出顯示段落中的部分內容
4.標簽分類
所有的標簽可以分為兩類：塊級標簽和行級標簽(內聯標簽)
塊級標簽：該元素獨占一行(h2,p)
行級標簽：按行顯示，一行不夠放，才會自動換行(a,strong,em,img)
注意：通常情況下，行級標簽要放在塊級標簽里面使用
注意：p標簽不能嵌套p標簽
二、列表、表格、表單
1.有序列表和無序列表
ol是有序列表標簽，它里面的列表項是有序號的
ul是無序列表標簽，它里面的列表項是沒有序列的，但是有符號
li 是列表項標簽
列表可以嵌套定義
通過設置ol的type屬性值，可以改變序號類型，可以設置屬性值有：A，a，I，i，1
ul標簽通過type屬性，也可以設置符號類型：屬性值有：disc，circle，square
2.定義列表標簽
dl是定義列表標簽
dt的定義列表的標題標簽
dd是定義列表的描述標簽，用來描述dt
可以用多個dd去描述一個dt
一個dl可以只描述一個dt，也可以描述多個dt
一般圖文布局的結構會使用定義列表標簽
3.表格標簽
table是表格標簽，通過border屬性設置表格的邊框，width屬性設置寬度，height屬性設置高度
設置表格的屬性align="center"，將整個表格居中
tr是行標簽
設置tr的align屬性，控制的是tr里面的所有td的水平對齊方式
td是列標簽
td設置align屬性，只是對當前td設置水平對齊方式
colspan屬性，用于單元格跨列
rowspan屬性，用于單元格跨行
如果表格里面的單元格需要跨列或者跨行：
先將完整的表格畫好
然后做跨列
最后做跨行
4.表格的完整結構
表格根據結構劃分：thead是表格的頭部，tbody是表格的主體，tfoot是表格的尾部
caption是表格的標題標簽
td是普通列，th是表頭列，th里面的內容默認會加粗并且居中
5.表單標簽
form是表單標簽，表單的作用是：接收用戶輸入的數據，并向服務器發送
method屬性設置表單的提交方式：GET和POST (POST比GET更安全)
action屬性設置表單的提交地址，比如：http://192.168.112.55:8080/address/add
6.表單里面的常用元素
form是表單標簽，所有的表單元素，必須要放到form標簽里面，才能提交到服務器
如果表單中使用了文件域，表單標簽需要添加一個enctype="multipart/form-data"屬性
input標簽是表單的元素，絕大多數表單元素都是使用input標簽，通過type屬性設置元素的類型
type="text"是文本框，size屬性設置初始長度，maxlength屬性設最大輸入長度，name屬性設置表單元素的名稱
type="password"是密碼框
type="radio"是單選框，注意：一組單選框，必須要設置相同的name屬性值，value屬性設置表單元素保存的值，
checked屬性設置默認選中,該屬性的屬性值也是checked。
注意：在html中如果屬性值跟屬性名相同，可以省略屬性值
type="checkbox"是復選框，也可以使用checked屬性
type="file"是文件域，該標簽用于選擇文件
type="button"是普通按鈕
type="submit"是提交按鈕，用于將表單里面的數據向服務器提交，disabled屬性設置表單元素禁用
type="reset"是重置按鈕，用于清空表單里面的填寫內容
type="image"是圖片提交按鈕，它不需要通過value屬性設置文本，但是需要通過src屬性設置一張圖片
type="hidden"是隱藏域，用于在網頁中隱藏信息。在實際開發中，隱藏域里面的信息是需要加密存儲的
select標簽是下拉框，option是下拉框的選項標簽，value屬性設置每個選項的值，
注意：值可能跟顯示的文本不一樣，selected屬性設置默認選中
textarea標簽是文本域，其實就是多行文本框，rows屬性設置行數，cols屬性設置每行列數，
readonly屬性表示只讀
7.html5新增表單元素
type="number"是數字文本框，min設置最小值，max設置最大值，step設置增量值
type="range"是滑塊，min，max，step用法同number
type="url"是網址文本框，輸入的內容必須以ftp: 或者 http: 或者 https: 開頭
type="email"是郵箱文本框，輸入的內容必須包含@字符
type="search"其實就是文本框，只是專門用于做搜索框用，輸入內容后，帶有清空內容的小按鈕
<button type="submit">提交按鈕</button>
<button type="reset">重置按鈕</button>
<button type="button">普通按鈕</button>
新增屬性：
placeholder屬性設置文本框里面的提示內容，當在文本框中輸入真正的內容時，會自動消失
required屬性給文本框，添加非空驗證
pattern屬性用于給文本框，添加正則表達式驗證
三、初始樣式
1.行內樣式表
通過在標簽中使用style屬性的方式，可以給標簽添加行內樣式
在實際開發中，不推薦使用行內樣式，因為行內樣式不方便樣式的復用
行內樣式，違反了內容與表現分離的原則，網頁后期改版會變復雜
更關鍵的是，這樣的網頁不利于搜索引擎搜索
2.內部樣式表
在head標簽中通過style標簽，定義內部樣式。style標簽可以通過type屬性明確里面的樣式類型，type屬性可以省略
內部樣式表：可以做到當前頁面的樣式復用，但是不能做到多頁面樣式的復用，內容與表現的分離不夠徹底
在style標簽里面，通過定義選擇器的方式，定義樣式
下面的樣式就是根據p標簽的名稱定義選擇器，給p標簽添加樣式：
p{font-size:30px;color:red;}
3.外部樣式表
通過link標簽，引入外部樣式文件，href屬性設置樣式文件的路徑
注意：必須設置rel屬性的屬性值為stylesheet。告訴瀏覽器引入的外部資源是樣式表資源
如果有多個頁面需要該樣式，直接引入，方便多頁面樣式的復用
網頁的內容和樣式徹底分離，這樣的網頁更利用搜索引擎搜索
<link rel="stylesheet" href="./css/style.css">
引入外部樣式文件的第二種方式，在style標簽中，通過@import方式導入指定的樣式文件
<style>@import url('./css/style02.css');
4.樣式的優先級
外部樣式和內部樣式的優先級采用：就近原則，后引入的，優先級更高
行內樣式的優先級最高
5.選擇器
1.基本選擇器
標簽選擇器：以標簽的名稱作為選擇器的名稱，對所有該標簽添加樣式
類選擇器：選擇器的名稱是自定義的，必須以.符號開頭。在標簽中，通過class屬性調用具體的類選擇器樣式，在標簽中使用時，不需要加.號
id選擇器：選擇器的名稱也是自定義的，必須以#符號開頭。在標簽中，通過id屬性調用具體的id選擇器樣式，在標簽中使用時，不需要加#號
注意：在網頁中，標簽的id屬性值，通常是不能重復的。id選擇器的優先級更高
2.基本選擇器的優先級
基本選擇器的優先級：id選擇器 > 類選擇器 > 標簽選擇器
注意： !important的優先級最高
3.層次選擇器
后代選擇器，方式是：A B{}。對A里面的所有B添加樣式
子選擇器，方式是：A>B{}。 對A里面的所有第一級的B添加樣式
相鄰兄弟選擇器，方式是：A+B{}，B必須是A相鄰的下一個元素
通用兄弟選擇器，方式是：A~B{}，對A下面的所有的B元素添加樣式
4.屬性選擇器
屬性選擇器，方式是：[屬性名]{}，通常會配合其他選擇器一起使用，比如：li[屬性名]，只針對li標簽
屬性選擇器，可以根據屬性值，精確的對某些標簽添加樣式
$= 表示以指定的屬性值結尾
^= 表示以指定的屬性值開頭
*= 表示屬性值包含指定的內容
實際案例：給以.png結尾的圖片，設置大小
img[src$='.png']{width:100px;height:100px;}
5.交集選擇器
交集選擇器，方式是：選擇器A選擇器B{}，同時滿足A和B的元素，添加樣式
a.red{color:red}
6.并集選擇器
并集選擇器，方式是：A,B,C{}，給多個選擇器，設置相同的樣式
案例：.header里面的.nav 和 .centent里面的p 和 #two上面的.three，采用相同的樣式
.header.nav,.cententp,#two.three{font-size:20px;color:red;}
四、基礎樣式
1.字體樣式
font-size 設置字體的大小
單位：px是像素
font-family 設置字體的類型
font-family 可以設置中文字體類型，也可以設置英文字體類型，如果需要同時設置英文字體類型和中文字體類型，先設置英文，再設置中文
font-family:'Courier New','幼圓'
font-weight 設置字體的粗細，屬性值bold表示加粗
font-style 設置字體的風格，屬性值italic表示傾斜
font是字體的縮寫屬性，可以同時設置：風格 加粗 大小 類型
風格和加粗的順序可以變化，也可以省略，最后兩個屬性值必須是大小和類型
特殊用法：20px是字體大小，40px是行高
font:20px/40px'楷體'
2.文本樣式
color 是文本顏色
顏色值可以是英文單詞
顏色值可以是十六進制顏色值，方式是：#紅綠藍
下面屬性值里面的ff其實是十六進制的255
color:#ff0000;
顏色值可以是十進制顏色值，方式是：rgb(紅,綠,藍)
color:rgb(255,0,0);
rgba(紅,綠,藍,透明度)，注意：透明度的取值范圍是：0-1
color:rgba(255,0,0,0.5);
十六進制顏色值，加透明度的方式是：#紅綠藍透明度。注意：這里的透明度的取值范圍是0-255
color:#ff000055
text-align 是文本對齊方式，屬性值包括：left(默認值)，center，right
text-indent 是首行縮進，首行通常需要縮進兩個字符，所有屬性值單位通常使用em或者rem
一個em大小就是當前元素字體的大小尺寸。
一個rem的大小默認是網頁字體的默認大小(16px)
line-height 是行高
text-decoration 是文本裝飾，屬性值包括：underline(下劃線)，overLine(上劃線),line-through(刪除線),none(沒有裝飾)
可以通過text-decoration屬性，
text-decoration: none;
去掉超鏈接的默認下劃線
letter-spacing 是字符間距
word-spacing 是單詞間距
3.超鏈接樣式
a:link 表示未點擊的樣式
a:visited 表示點擊過后的樣式
a:hover 表示鼠標懸停樣式
a:active 表示點擊未釋放樣式
注意：順序必須是：a:link a:visited a:hover a:active
一般情況下，我們會先給a元素設置統一的樣式，再添加一個a:hover
4.列表樣式
list-style-type 設置列表樣式，屬性值none，表示無樣式
其它屬性值，包括：disc(實心圓) circle(空心圓) square(方塊) decimal(數字)
所以，所謂有序列表和無需列表，只是默認的列表樣式值不同
list-style-image 設置列表的樣式為圖標
list-style-position 設置列表樣式的位置，屬性值包括：inside 和 outside(默認值)，inside屬性值，列表會往里縮進一個tab符
list-style 是縮寫屬性，既可以設置列表符號類型，也可以設置列表圖標
5.背景樣式
background-color 背景顏色
background-image 背景圖片
background-repeat 背景圖片的平鋪方式，
屬性值包括：no-repeat(不平鋪) repeat(平鋪) repeat-x(X軸平鋪) repeat-y(Y軸平鋪)
background-position 背景圖片的位置，
可以通過：left right top bottom center 這些方位值設背景圖片的具體位置，
也可以通過：具體的數字設置X軸和Y軸的位置，
還可以通過：百分比設置X軸和Y軸的位置，
無論是給具體的數字，還是給具體的百分比，如果只傳一個值，X軸和Y軸的位置相同
background-size 屬性設置背景圖片的大小，
屬性值contain，表示：等比拉伸，直到跟任意一邊與容器邊框重疊，
屬性值cover，表示：等比拉伸，直到跟所有邊與容器邊框重疊，
可以設置固定的大小，一般不推薦，因為會使圖片變形，
屬性值也可以設置百分比
background 是背景的縮寫屬性，可以同時設置背景顏色，背景圖片，平鋪方式，位置。
各屬性值，沒有嚴格的順序
如果要加背景圖片的大小,方式是：顏色 圖片 平鋪方式 位置 / 背景圖片大小
background: red url(./img/zhl.jpg) no-repeat center / 300px 300px;
6.背景漸變
linear-gradient()函數，用于設置背景的線性漸變
該函數的第一個參數值是漸變的方向，后面的參數值是漸變的顏色
background: linear-gradient(to left top,red,blue,green,purple);
radial-gradient()函數，用于設置背景的鏡像漸變
該函數不需要傳漸變方向，直接傳漸變的顏色，從中間向外漸變
background: radial-gradient(red,blue,green);
7.文本垂直居中
如果只有一行文本內容，可以通過設置line-height:height(行高=高度)的方式，設置單行文本垂直居中
8.文本陰影
text-shadow 屬性設置文本陰影
屬性值分別是：X軸偏移量 Y軸偏移量 陰影的模糊半徑 陰影顏色
9.圖片對齊方式
圖片的vertical-align樣式，可以設置圖片兩端文本相對于圖片的對齊方式
屬性值包括了：top bottom middle
五、盒子模型
1.什么是盒子模型
網頁里面的每一個標簽，都可以當做是一個盒子，該盒子是用來放內容的
通過：寬高，內邊距，邊框，外邊距定義盒子
2.邊框
每條邊框可以通過三個屬性設置，分別設置：邊框寬度 邊框顏色 邊框類型
邊框類型solid，表示實線
邊框類型double，表示雙實線
邊框類型dashed，表示虛線
邊框類型dotted，表示點線
通常情況下，盒子的四條邊框的樣式應該是統一的，可以通過下面的三個屬性去統一設置
border:10px tomato dotted;
去掉文本框的輪廓線
outline:none;
3.內邊距
可以分別設置盒子四個方向的內邊距
padding-top:20px;
padding-right:40px;
padding-bottom:60px;
padding-left:80px;
padding是縮寫屬性，可以分別設置：上 右 下 左 四條邊的內邊距。（順序是順時針）
padding:20px 40px 60px 80px;
padding如果只設置3個屬性值，分別是：上 右 下，左邊采用右邊的值
padding:20px 40px 60px;
padding如果只設置2個屬性值，分別是：上 右，左邊采用右邊的值，下面采用上面的值
padding:20px40px;
padding如果只設置1個屬性值，表示上 右 下 左采用相同的內邊距
padding:20px;
4.外邊距
外邊距是設置盒子與盒子的間距
margin-top:50px;
margin-right:50px;
margin-bottom:100px;
margin-left:100px;
注意：上下兩個盒子的間距，采用上面盒子的底邊距和下面盒子的上邊距的最大值
margin的縮寫屬性，用法同padding一樣
5.盒子居中
因為網頁中的很多標簽，都有默認的樣式，在實際開發中，我們又不需要這些默認的樣式，
所以，可以使用通用選擇器，去掉這些默認樣式
*{
????/* 去掉外邊距 */margin:0;
????/* 去掉內邊距 */padding:0;
????/* 去掉列表符號 */list-style:none;
????/* 去掉輪廓線 */outline:none;
????/* 去掉下劃線 */text-decoration:none;
}
如果設置盒子居中顯示。屬性值auto，表示自動，左右外邊距的屬性值為auto，會自動平分剩余的空間
margin:0 auto;
6.盒子尺寸
width和height屬性設盒子內容區域的大小
border，padding，margin 會增長盒子的整體尺寸
盒子的實際寬度= width + border-left + border-right + padding-left + padding-right + margin-left + margin-right
box-sizing屬性設置盒子的類型，默認值是content-box，是內容盒子，表示width和height的空間全部給內容
屬性值border-box，是邊框盒子，盒子的邊框和內邊距產生的空間從width和height里面扣除
7.display屬性
塊級元素：特點是獨占一行，可以識別寬高屬性
一個塊級元素的實際寬度 = width + border-left/right + padding-left/right + margin-left/right
margin-right屬性的默認值是auto，所以，剩余的空間會給margin-right
行級元素：特點是按行顯示，一行不夠放，會自動換行，不識別寬高屬性，它的實際大小還有內容決定
通過display屬性，可以設置標簽的顯示方式，inline表示行內元素，block表示塊級元素，none表示不顯示
inline-block表示行內塊元素，既有塊級元素可以識別寬高的特點，又有行內元素在一行顯示的特點
8.盒子陰影
盒子陰影：屬性值分別是：X軸偏移量 Y軸偏移量 模糊半徑 陰影顏色
box-shadow:10px 10px 5px blue;
第一個屬性值設置為inset，表示內陰影
box-shadow:inset 0px 0px 30px blue;
9.圓角邊框
分別設置4個角的圓角
border-top-left-radius:20px;
border-top-right-radius:40px;
border-bottom-right-radius:60px;
border-bottom-left-radius:80px;
一個屬性值是橫向寬度，第二個屬性值是縱向寬度，這樣的圓角就是橢圓圓角
border-top-left-radius:20px 40px;
border-top-right-radius:40px 60px;
border-bottom-right-radius:60px 80px;
border-bottom-left-radius:80px 100px;
border-radius是縮寫屬性，可以同時設置：左上 右上 右下 左下，四個角的圓角
border-radius:20px 40px 60px 80px;
四個角的圓角都設置為50%，就是正圓
border-radius: 50%;
五、浮動
1.float
浮動樣式主要用于對塊元素的布局
元素一旦浮動起來，就會脫離標準文檔流
float屬性設置浮動，屬性值包括left(左浮動)，right(右浮動)，none(不浮動)
2.clear
用于清除浮動。屬性值包括：left(清除左浮動)，right(清除右浮動)，both(清除全部浮動)
3.解決父級邊框塌陷
方式一：
在標準文檔流中，父級如果不指定高度，高度由子級撐開。
如果子級浮動，父級的邊框就會塌陷，第一種解決的方法是：給父級一個明確的高度。
方式二：
在父級的最下面，添加一個不浮動的元素，并清除前面的浮動空間。
方式三：
通過偽元素樣式在父級的下面添加塊級元素，再利用該塊級元素清除前面的浮動，原理根方法2一樣。
::after表示在指定的父級的下面，添加元素
::before表示在指定的父級的上面，添加元素
.parent::after{
????/* content屬性里面設置添加的元素里面的內容 */content:'';
????/* 下面是設置該元素的樣式 */display:block;
????clear:both;
}
方式四：
給父級添加一個overflow屬性，屬性值是非visible。
4.overflow
overflow屬性，用于設置溢出處理
屬性值包括：
visible(溢出部分顯示，是默認值)
hidden(溢出部分隱藏)
scroll(溢出部分，通過滾動條查看)，如果內容不溢出，還是會出現滾動條的區域
auto(自動，如果內容溢出，出現滾動條；沒有溢出，不會出現滾動條區域)
5.overflow配合錨鏈接
overflow配合錨鏈接的使用，可以增長一個盒子的實際使用空間
id屬性值可以作為錨鏈接的錨標記使用
6.文本溢出處理
white-space 屬性設置空白處理，屬性值nowrap，表示設置文本不換行，屬性值pre，表示保留空格
overflow 屬性是溢出處理，屬性值hidden表示溢出部分隱藏
text-overflow 屬性設置文本溢出處理，屬性值ellipsis表示文本溢出部分顯示...
注意：上面的三個屬性值缺一不可
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
7 多行文本溢出處理
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;//子元素應該被水平或垂直排列
-webkit-line-clamp:3;//3行后顯示省略號
六、定位
1.static
position 是定位屬性，屬性值包括：static(不定位，默認值)
2.relative
relative(相對定位)，是相對于自己重新定位，通過top，bottom，left，right屬性控制定位的偏移量
3.absolute
absolute(絕對定位)。絕對定位是根據離它最近的父級定位元素進行定位
如果它的父級中，沒有定位元素，就根據瀏覽器的視口來定位
注意：絕對定位元素，會脫離標準文檔流，所以，它下面的元素會去搶占它原來的位置
通常情況下：一個父容器里的子元素，如果要進行調整位置
父容器先設置為相對定位，并且不設置偏移量，子元素再設置為絕對定位，
這樣，子元素就可以在該父元素中精細調整了
4.fixed
fixed(固定定位)。就是根據瀏覽器的視口進行定位
并且定位后的位置，不會隨著瀏覽器滾動條的滾動而消失
5.z-index
元素定位后，默認情況下，后面的元素會蓋住簽名的元素
通過z-index屬性，可以修改定位元素的層疊順序，
值越小越靠下，值越大越靠上，可以設置負數，默認值0
6.盒子水平和垂直方向居中
/* 子級設置為絕對定位 */
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
非定位元素的實際寬度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right
定位元素的實際寬度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right + left + right
7.透明度
opacity屬性，設置透明度，注意：是設置整個元素的透明度
取值范圍是：0-1，0是全透明，1是不透明
8.背景樣式補充
設置背景顏色 background-color
設置背景圖片 background-image
設置背景平鋪方式 background-repeat，默認是X軸和Y軸方向都平鋪
設置背景圖片的位置 background-position
設置背景圖片的大小 background-size
設置背景的填充區域 background-clip
屬性值有：
border-box 到邊框，默認值
padding-box 到內填充
content-box 到內容
background-origin 只能設置背景圖片的填充區域，不能控制背景顏色
background-attachment 設置背景圖片的定位方式：
設置屬性值為fixed，表示固定背景圖片
在縮寫屬性中，如果同時設置了背景位置和背景大小，方式是：位置 / 大小
background:fixed url() content-box 40px 40px / 600px 400px;
七、補充內容
1.結構偽類選擇器：
:first-child 表示指定標簽的第一個
注意：這里ul里面的第一個元素如果不是li，該樣式失效
ul li:first-child{color:red;}
:last-child 表示指定標簽的最后一個
注意：這里ul里面的最后一個元素如果不是li，該樣式失效
ul li:last-child{color:green;}
:nth-child(n) 表示指定標簽的第n個
odd表示所有的奇數行（也可以用2n-1），even表示所有的偶數行（也可以用2n）
:first-of-type和:first-child的區別是：
:first-child：計算索引時，統計的是所有的子元素
:first-of-type 計算索引時，只統計指定的子元素
:last-of-type和:last-child的區別同上
:nth-of-type和:nth-child的區別同上
2.內嵌框架
iframe 是內嵌框架標簽，用于在當前網頁中，嵌入另一個完整的網頁，通過src屬性設置目標網頁的地址
frameborder屬性設置邊框，屬性值包括0和1
scrolling屬性設置是否顯示滾動條，屬性值包括no和 yes 和 auto
3.video
video標簽，用于播放視頻，src屬性設置視頻路徑，controls屬性顯示控件按鈕，autoplay屬性設置自動播放，loop屬性設置循環播放
通過source子標簽，給video標簽添加視頻路徑，好處是，該方式可以同時添加多個視頻路徑
由于不同瀏覽器對視頻格式的兼容性，存在差異，所以，會導致，指定格式的視頻在部分瀏覽器中無法播放
通常情況下，如果在網頁中需要播放視頻，會將同一個視頻轉成多種格式，通過source標簽引入
瀏覽器會挨個加載source標簽引入的視頻，直到找到一個可以播放的格式
video標簽里面的寫的其他標簽，在瀏覽器不識別video標簽時顯示
4.audio
audio是音頻標簽，用于播放音頻，用法根video一樣
5.HTML5結構標簽
過去，我們在布局網頁的時候，全部采用div標簽，給div標簽定義不同的id名稱，
用該id名稱去表示它所處的區域是網頁的哪一個部分
現在，HTML5給我們新推出了一些，專門用于布局的結構標簽：
header 頭部
nav 導航
main 主體
aside 側邊欄
section 獨立區域（網頁中有多個獨立區域時，用section）
article 獨立內容（網頁中只有一個獨立區域時，用article）
footer 尾部
fieldset標簽，用于設置一個分組區域，通過legend子標簽設置分組標題。
八、動畫
1.css3-過渡
transition 過渡屬性
過渡：css從一種狀態變化到另一種狀態的過程。
transition-property 設置哪些屬性，需要過渡效果，可以傳多個過渡的屬性，使用逗號隔開。
例如： transition-property: background-color,width，
屬性值設置為all，表示過渡全部屬性。
transition-duration 設置過渡的時間，就是完成整個效果，需要花費的時間，
單位可以是秒(s)或者毫秒(ms)。
transition-delay 設置過渡之前的等待時間，單位同transition-duration
transition-timing-function 設置過渡的動作函數：
默認值是 ease 表示先快速再慢速
linear 表示勻速
ease-in 表示加速
ease-out 表示減速
ease-in-out 表示先加速再減速
transition是過渡的縮寫屬性，四個屬性值的順序沒有要求，但是如果設置了兩個時間，第一個是過渡時間，第二個過渡等待時間。
2.css3-動畫
animation-name 指定動畫的名稱（指定一個動畫的關鍵幀名稱，就是動畫的規則）
animation-duration 指定動畫的時間（完成該動畫需要多少時間）
animation-delay 動畫的延遲播放時間
animation-timing-function 動畫的動作函數，ease linear ease-in ease-out ease-in-out
animation-iteration-count 設置動畫的播放次數 屬性值可以給具體的次數，如果設置屬性值為infinite，表示無限次數
animation-play-state 表示播放狀態，默認值是running(播放) paused(暫停)
animation-direction 表示動畫的方向，屬性值包括：
normal(正向) reverse(反向) alternate(正反方向重復運動) alternate-reverse(反正方向重復運動)
animation-fill-mode 表示填充模式，其實就是動畫結束后，元素的回到什么位置，屬性值包括：
backwards(回到原點位置)，在開始動畫之前，等待的時間在開始動畫處等待，
forwards(停在結束位置)，在開始動畫之前，等待的時間在原點位置處等待，
both(綜合了上面兩個屬性的特點)，在開始動畫處等待，在動畫結束處停止，
animation是縮寫屬性，具體的屬性值，沒有順序要求，如果同時設置動畫時間和等待時間，第一個是動畫時間，第二個是等待時間
3.關鍵幀
定義動畫的關鍵幀，關鍵幀就是動畫的規則，在css中，一個動畫最多可以拆分成100份
@keyframesmove{
????/* from 是動畫的起始位置 */
????from{
????????left: 0;
????}
????/* to? 是動畫的結束位置*/
????to{
????????left: 500px
????}
}
定義動畫的關鍵幀，將動畫的規則，拆分成多組
@keyframesmove2{0%{left:100px;top:0;}25%{left:500px;top:0;}50%{left:500px;top:500px}75%{left:0;top:500px;}100%{left:0;top:100px;}}
4.css3-變形
transform 是css的變形屬性，通過變形函數，設置具體的變形方式
scale()變形函數，設置元素縮放
translate()變形函數，設置元素平移，該函數如果只傳一個參數，表示X軸方向平移，如果傳兩個參數，第二個參數是Y軸方向平移
rotate()變形函數，設置元素旋轉。屬性值的單位是deg(度數)，也可以是turn(圈)，屬性值，正數是順時針，負數是逆時針
skew()變形函數，設置元素傾斜。該函數如果只傳一個參數，表示X軸方向傾斜度數，如果傳兩個參數，第二個參數是Y軸方向傾斜度數
5.動作函數補充
transition-timing-function 設置動作函數
屬性值包括：ease linear ease-in ease-out ease-in-out
動作函數的取值，除了一些常規的屬性值，還可以里貝塞爾曲線函數，定義特殊規則的動作
transition-timing-function:cubic-bezier(.22,1.52,.42,-0.72);
通過steps() 函數，可以將一個動作分解成多次運行
animation:move12sinfinitesteps(4)
6.3D變形
perspective 屬性設置瀏覽器的視距：就是告訴瀏覽器平移到眼睛的距離是多少，一般范圍我們會控制在600px-1200px，常用值為800px。
body{height:600px;border:1pxsolidgreen;perspective:800px;}
translateX() 是X軸方向平移
translateY() 是Y軸方向平移
translateZ() 是Z軸方向平移
rotate() 默認是久Z軸方向旋轉
rotateZ() 是Z軸方向旋轉
rotateX() 是X軸方向旋轉
rotateY() 是Y軸方向旋轉
3d變形樣式 transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateY(45deg) rotateZ(-45deg);
animation: love 4s infinite alternate;
visibility屬性，用于設置元素的顯示方式，屬性值包括：hidden（隱藏），visible（顯示）
backface-visibility屬性，用于設置元素的背面顏色方式
backface-visibility: hidden，表示背面隱藏
九、iconfont
1.字體圖標
<!--本地引入--><linkrel="stylesheet"href="./iconfont/iconfont.css"><!--在線使用iconfont字體圖標--><linkrel="stylesheet"><!--i 標簽 專門用于定義字體圖標--><iclass="iconfont icon-gouwuche"></i>
2.自定義字體類型
@font-face{/* 設置字體類型名稱 */font-family:gjm;/* 設置字體類型文件的路徑 */src:url(./font/郭敬明字體.ttf);}div{font-size:50px;font-family:gjm;}
3.CSS繪制三角形
/* 保留上邊框，下邊框的寬度設為0 */.a{border-color:transparent;border-top-color:red;border-width:50px50px050px;}/* 保留右邊框，左邊框的寬度設為0 */.b{border-color:transparent;border-right-color:blue;border-width:50px50px50px0;}/* 保留下邊框，上邊框的寬度設為0 */.c{border-color:transparent;border-bottom-color:green;border-width:050px50px50px;}/* 保留左邊框，右邊框的寬度設為0 */.d{border-color:transparent;border-left-color:orange;border-width:50px050px50px;}
十、彈性布局
1.彈性盒子
display屬性，設置元素的類型，屬性值包括：none(不顯示)，inline(行內元素)，block(塊級元素)，inline-block(行內塊元素)
設置display: flex，該盒子就成為了彈性盒子，一旦給一個盒子設置為了彈性盒子，它里面的子元素默認就會橫向排列
flex-direction屬性 設置子元素的排列方向，屬性值包括：row(橫向) column(縱向) row-reverse(橫向反向) column-reverse(縱向方向)
2.子元素的對齊方式
主軸的排列方式，通過justify-content屬性控制
屬性值包括：flex-start(開始處對齊) flex-end(結束處對齊) center(居中對齊) space-between(平均分布，開始和結束處頂格)，space-around(平均分布，兩邊留有一半的間隔空間) space-evenly(平均分布，每個元素兩端的間隔相等)
輔軸的排列方式，通過align-items屬性控制
屬性值包括： flex-start(開始處對齊) flex-end(結束處對齊) center(居中對齊) baseline(首行文本的基線對齊) stretch(拉伸對齊)
注意：主軸不一定是橫向，排列方向如果是橫向，主軸是橫向；排列方向如果是縱向，主軸就是縱向
3.子元素的換行方式
flex-wrap屬性，設置彈性盒子內，子元素的換行方式
屬性值包括： nowrap(不換行) wrap(換行) wrap-reverse(反向換行)
align-content屬性，設置子元素換行后，每行元素在輔軸上的對齊方式
注意：一旦設置了align-content，align-items屬性就失效了
align-content的屬性值包括：flex-start(開始處對齊) flex-end(結束處對齊) center(居中對齊) space-between(平均分布，開始和結束處頂格)，space-around(平均分布，兩邊留有一半的間隔空間) space-evenly(平均分布，每個元素兩端的間隔相等)
總結：不換行，輔軸上的對齊方式用align-items，換行后，輔軸上的對齊方式用 align-content。
4.子元素order屬性
order屬性，用于設置子元素的排列順序，默認值是1，值越小越靠前，值越大越靠后
5.子元素margin屬性
子元素通過margin屬性，可以搶占父級的剩余空間作為自己的外邊距
6.子元素align-self屬性
align-items屬性設置所有彈性子元素在輔軸上的對齊方式
align-self屬性，用于設置彈性子元素自身在 輔軸 方向上的對齊方式
屬性值包括：flex-start，flex-end，center，baseline，stretch
7.子元素flex屬性
flex屬性用于指定彈性子元素如何分配空間
.b為flex:5，.c為flex: 1 表示剩余的空間，b占5份，c占1份
十一、移動端
1.什么是像素
什么是像素：就是一個發光點
我們在編寫網頁的時候，所說的像素，其實是css像素
比如我們的顯示器的分辨率是1920*1080，這里的1920是物理像素
一般情況下，一個css像素對應一個物理像素
如果瀏覽器放大兩倍，此時就會是一個css像素對應兩個物理像素
在移動端，通常的做法就是一個css像素對應多個物理像素，一般采用的是兩個或者三個物理像素
由于我們的顯示器，默認是放大125%，所有，在默認瀏覽器中css像素跟物理像素的比例是 1 : 1.25。1個css像素的寬度 對應 1.25個物理像素的寬度
2.移動端網頁
在移動端：iphone6手機的分辨率：750*1334（物理像素）
在iphone6中 css像素是375*667，所以，css像素和物理像素的比例是 1 : 2
iphone6Plus手機的分辨率：828*1472
在iphone6Plus中 css像素是414*736，所以，css像素和物理像素的比例是 1 : 2
100vw就表示顯示屏全屏寬度，100vh就是表示顯示屏全屏高度
在iphone6中 100vw = 375px
1px = 0.266666vw
2.66666vw就相當于10px
5.33333vw就相當于20px
因為字體的最小單位是12px，所以我們將上面的比例再 * 2
font-size: 5.33333vw
em是當前元素字體大小單位
rem是網頁根元素字體大小單位
默認情況下，1rem=16px，但是這里的rem已經被我們重新定義過了
1rem=5.33333vw 在iphone6中是20px
html{font-size:5.33333vw}.a{width:100vw;height:100px;background-color:red;}.b{width:5rem;height:5rem;background-color:green;font-size:1rem;}
3.視口
name="viewport"就是設置視口
設置width屬性值為device-width，采用設備的寬度
initial-scale=1.0 表示初始縮放比例為1.0
默認情況下，在移動端視口的寬度是980px，根據需要，可以修改視口寬度
如果我們需要將一個pc端的網頁，在移動端能夠完全打開，通常修改設置固定寬度的視口值
<metaname="viewport"content="width=1226">
4.媒體查詢
媒體查詢：讓一個網頁在不同的設備上都能夠正常顯示
視口寬度>=1200px 的屏幕 稱為超大屏
視口寬度>=992px 的屏幕 稱為大屏
視口寬度>=768px 的屏幕 稱為中屏
視口寬度>=576px 的屏幕 稱為小屏
視口寬度<576px 的屏幕 稱為超小屏
定義媒體查詢樣式：
screen 表示屏幕
max-width: 1200px 表示最大寬度小于1200px，執行下面的樣式
@mediascreenand(max-width:1200px){/* 這里面寫的都是樣式 */.a{background-color:lightgreen;color:white;}}@mediascreenand(max-width:992px){.a{background-color:lightblue;color:orange;font-size:40px;}}@mediascreenand(max-width:768px){.a{background-color:lightsalmon;color:orchid;font-size:30px;}}@mediascreenand(max-width:576px){.a{background-color:lightseagreen;color:pink;font-size:20px;}}
