第一個(gè)網(wǎng)頁(yè)
Emmet插件：自動(dòng)生成HTML代碼片段
注釋
注釋為代碼的閱讀者提供幫助僻弹，注釋不參與運(yùn)行
在HTML中，注釋使用如下格式書(shū)寫(xiě)：
<!-- 注釋內(nèi)容 -->
元素
其他叫法：標(biāo)簽助隧、標(biāo)記
<a title="黑龍江渡一教育有限公司">渡一教育</a>
<title>Document</title>
整體：element （元素）
元素 = 起始標(biāo)記（begin tag） + 結(jié)束標(biāo)記（end tag） + 元素內(nèi)容 + 元素屬性
屬性 = 屬性名 + 屬性值
屬性的分類(lèi)：
- 局部屬性：某些元素特有的屬性
- 全局屬性：所有元素通用
<meta charset="UTF-8">
有些元素沒(méi)有結(jié)束標(biāo)記哲嘲，這樣的元素叫做：空元素
空元素的兩種寫(xiě)法：
<meta charset="UTF-8"><meta charset="UTF-8" />
元素的嵌套
元素不能相互嵌套
父元素、子元素璃饱、祖先元素、后代元素肪康、兄弟元素（擁有同一個(gè)父元素的兩個(gè)元素）
標(biāo)準(zhǔn)的文檔結(jié)構(gòu)
HTML：頁(yè)面荚恶、HTML文檔
<!DOCTYPE html>
文檔聲明撩穿，告訴瀏覽器，當(dāng)前文檔使用的HTML標(biāo)準(zhǔn)是HTML5裆甩。
不寫(xiě)文檔聲明冗锁，將導(dǎo)致瀏覽器進(jìn)入怪異渲染模式。
<html lang="en">
</html
根元素嗤栓，一個(gè)頁(yè)面最多只能一個(gè)，并且該元素是所有其他元素的父元素或祖先元素箍邮。
HTML5版本中沒(méi)有強(qiáng)制要求書(shū)寫(xiě)該元素
lang屬性：language茉帅，全局屬性，表示該元素內(nèi)部使用的文字是使用哪一種自然語(yǔ)言書(shū)寫(xiě)而成的锭弊。
<head>
</head>
文檔頭堪澎，文檔頭內(nèi)部的內(nèi)容，不會(huì)顯示到頁(yè)面上味滞。
<meta>
文檔的元數(shù)據(jù)：附加信息樱蛤。
charset：指定網(wǎng)頁(yè)內(nèi)容編碼。
計(jì)算機(jī)中剑鞍，低壓電（0~2 V）0昨凡，高壓電（2~5 V）1，表示2蚁署，使用10
計(jì)算機(jī)中便脊，只能存儲(chǔ)數(shù)字
文字和數(shù)字進(jìn)行對(duì)應(yīng)
比如：a —— 97， A —— 64
該字典叫做字符編碼表光戈，GB2312哪痰，GBK
袁 —— GB2312 —— 100000 —— GBK —— ？久妆？
UTF-8 是 Unicode 編碼的一個(gè)版本
<title>Document</title>
網(wǎng)頁(yè)標(biāo)題
<body>
</body>
文檔體晌杰，頁(yè)面上所有要參與顯示的元素，都應(yīng)該放置到文檔體中筷弦。
語(yǔ)義化
什么是語(yǔ)義化
- 每一個(gè)HTML元素都有具體的含義
a元素：超鏈接
p元素：段落
h1元素：一級(jí)標(biāo)題
- 所有元素與展示效果無(wú)關(guān)
元素展示到頁(yè)面中的效果肋演，應(yīng)該由CSS決定。
因?yàn)闉g覽器帶有默認(rèn)的CSS樣式奸笤，所以每個(gè)元素有一些默認(rèn)樣式惋啃。
重要：選擇什么元素洛二，取決于內(nèi)容的含義咨堤，而不是顯示出的效果
為什么需要語(yǔ)義化？
- 為了搜索引擎優(yōu)化（SEO）
搜索引擎：百度眶掌、搜搜健盒、Bing绒瘦、Google
每隔一段時(shí)間称簿，搜索引擎會(huì)從整個(gè)互聯(lián)網(wǎng)中，抓取頁(yè)面源代碼
- 為了讓瀏覽器理解網(wǎng)頁(yè)
閱讀模式惰帽、語(yǔ)音模式
文本元素
HTML5中支持的元素：HTML5元素周期表
h
標(biāo)題：head
h1h6：表示1級(jí)標(biāo)題6級(jí)標(biāo)題
p
段落憨降，paragraphs
lorem，亂數(shù)假文该酗，沒(méi)有任何實(shí)際含義的文字
span【無(wú)語(yǔ)義】
沒(méi)有語(yǔ)義授药，僅用于設(shè)置樣式
以前：某些元素在顯示時(shí)會(huì)獨(dú)占一行（塊級(jí)元素），而某些元素不會(huì)（行級(jí)元素）
到了HTML5呜魄，已經(jīng)棄用這種說(shuō)法悔叽。
pre
預(yù)格式化文本元素
空白折疊：在源代碼中的連續(xù)空白字符（空格、換行爵嗅、制表）娇澎，在頁(yè)面顯示時(shí)，會(huì)被折疊為一個(gè)空格
例外：在pre元素中的內(nèi)容不會(huì)出現(xiàn)空白折疊
在pre元素內(nèi)部出現(xiàn)的內(nèi)容睹晒，會(huì)按照源代碼格式顯示到頁(yè)面上趟庄。
該元素通常用于在網(wǎng)頁(yè)中顯示一些代碼。
pre元素功能的本質(zhì)：它有一個(gè)默認(rèn)的css屬性
顯示代碼時(shí)伪很，通常外面套code元素戚啥，code表示代碼區(qū)域。
HTML實(shí)體
實(shí)體字符是掰， HTML Entity
實(shí)體字符通常用于在頁(yè)面中顯示一些特殊符號(hào)虑鼎。
- &單詞;
- &#數(shù)字;
- 小于符號(hào)
<
- 大于符號(hào)
>
- 空格符號(hào)
?
- 版權(quán)符號(hào)
?
- &符號(hào)
&
a元素
超鏈接
href屬性
hyper reference：通常表示跳轉(zhuǎn)地址
- 普通鏈接
- 錨鏈接
id屬性：全局屬性，表示元素在文檔中的唯一編號(hào)
- 功能鏈接
點(diǎn)擊后键痛，觸發(fā)某個(gè)功能
- 執(zhí)行JS代碼炫彩，javascript:
- 發(fā)送郵件，mailto:
要求用戶計(jì)算機(jī)上安裝有郵件發(fā)送軟件：exchange
- 撥號(hào)絮短，tel:
要求用戶計(jì)算機(jī)上安裝有撥號(hào)軟件江兢，或使用的是移動(dòng)端訪問(wèn)
target屬性
表示跳轉(zhuǎn)窗口位置。
target的取值：
- _self：在當(dāng)前頁(yè)面窗口中打開(kāi)丁频，默認(rèn)值
- _blank: 在新窗口中打開(kāi)
路徑的寫(xiě)法
站內(nèi)資源和站外資源
站內(nèi)資源：當(dāng)前網(wǎng)站的資源
站外資源：非當(dāng)前網(wǎng)站的資源
絕對(duì)路徑和相對(duì)路徑
站外資源：絕對(duì)路徑
站內(nèi)資源：相對(duì)路徑
- 絕對(duì)路徑
絕對(duì)路徑的書(shū)寫(xiě)格式：
url地址：
協(xié)議名://主機(jī)名:端口號(hào)/路徑
schema://host:port/path
當(dāng)跳轉(zhuǎn)目標(biāo)和當(dāng)前頁(yè)面的協(xié)議相同時(shí)杉允，可以省略協(xié)議
- 相對(duì)路徑
以./開(kāi)頭，./表示當(dāng)前資源所在的目錄
可以書(shū)寫(xiě)../表示返回上一級(jí)目錄
相對(duì)路徑中：./可以省略
圖片元素
img元素
image縮寫(xiě)席里，空元素
src屬性：source
alt屬性：當(dāng)圖片資源失效時(shí)叔磷，將使用該屬性的文字替代圖片
和a元素聯(lián)用
和map元素
map：地圖
map的子元素：area
衡量坐標(biāo)時(shí)，為了避免衡量誤差奖磁，需要使用專(zhuān)業(yè)的衡量工具：
ps改基、pxcook、cutpro（本人開(kāi)發(fā)）
和figure元素
指代咖为、定義秕狰，通常用于把圖片稠腊、圖片標(biāo)題、描述包裹起來(lái)
子元素：figcaption
多媒體元素
video 視頻
audio 音頻
video
controls: 控制控件的顯示鸣哀，取值只能為controls
某些屬性架忌，只有兩種狀態(tài)：1. 不寫(xiě) 2. 取值為屬性名，這種屬性叫做布爾屬性
布爾屬性我衬，在HTML5中叹放，可以不用書(shū)寫(xiě)屬性值
autoplay: 布爾屬性，自動(dòng)播放挠羔。
muted: 布爾屬性许昨，靜音播放。
loop: 布爾屬性褥赊，循環(huán)播放
audio
和視頻完全一致
兼容性
- 舊版本的瀏覽器不支持這兩個(gè)元素
- 不同的瀏覽器支持的音視頻格式可能不一致
mp4、webm
列表元素
有序列表
ol: ordered list
li：list item
無(wú)序列表
把ol改成ul
ul：unordered list
無(wú)序列表常用于制作菜單 或 新聞列表莉恼。
定義列表
通常用于一些術(shù)語(yǔ)的定義
dl: definition list
dt: definition title
dd: definition description
容器元素
容器元素：該元素代表一個(gè)塊區(qū)域拌喉，內(nèi)部用于放置其他元素
div元素
沒(méi)有語(yǔ)義
語(yǔ)義化容器元素
header: 通常用于表示頁(yè)頭，也可以用于表示文章的頭部
footer: 通常用于表示頁(yè)腳俐银，也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章節(jié)
aside: 通常用于表示側(cè)邊欄
元素包含關(guān)系
以前：塊級(jí)元素可以包含行級(jí)元素尿背，行級(jí)元素不可以包含塊級(jí)元素，a元素除外
元素的包含關(guān)系由元素的內(nèi)容類(lèi)別決定捶惜。
例如田藐，查看h1元素中是否可以包含p元素
總結(jié)：
- 容器元素中可以包含任何元素
- a元素中幾乎可以包含任何元素
- 某些元素有固定的子元素（ul>li，ol>li吱七，dl>dt+dd）
- 標(biāo)題元素和段落元素不能相互嵌套汽久，并且不能包含容器元素
為網(wǎng)頁(yè)添加樣式
術(shù)語(yǔ)解釋
h1{
color:red;
background-color:lightblue;
text-align: center;
}
CSS規(guī)則 = 選擇器 + 聲明塊
選擇器
選擇器：選中元素
- ID選擇器：選中的是對(duì)應(yīng)id值的元素
- 元素選擇器
- 類(lèi)選擇器
聲明塊
出現(xiàn)在大括號(hào)中
聲明塊中包含很多聲明（屬性），每一個(gè)聲明（屬性）表達(dá)了某一方面的樣式踊餐。
CSS代碼書(shū)寫(xiě)位置
- 內(nèi)部樣式表
書(shū)寫(xiě)在style元素中
- 內(nèi)聯(lián)樣式表景醇，元素樣式表
直接書(shū)寫(xiě)在元素的style屬性中
- 外部樣式表[推薦]
將樣式書(shū)寫(xiě)到獨(dú)立的css文件中。
1). 外部樣式可以解決多頁(yè)面樣式重復(fù)的問(wèn)題
2). 有利于瀏覽器緩存吝岭，從而提高頁(yè)面響應(yīng)速度
3). 有利于代碼分離（HTML和CSS）三痰，更容易閱讀和維護(hù)
常見(jiàn)樣式聲明
- color
元素內(nèi)部的文字顏色
預(yù)設(shè)值：定義好的單詞
三原色，色值：光學(xué)三原色（紅窜管、綠散劫、藍(lán)），每個(gè)顏色可以使用0-255之間的數(shù)字來(lái)表達(dá)幕帆，色值获搏。
rgb表示法：
rgb(0, 255, 0)
hex（16進(jìn)制）表示法：
#紅綠藍(lán)
淘寶紅：#ff4400, #f40
黑色：#000000，#000
白色：#ffffff, #fff
紅：#ff0000, #f00
綠：#00ff00, #0f0
藍(lán)：#0000ff, #00f
紫：#f0f
青：#0ff
黃：#ff0
灰色：#ccc
- background-color
元素背景顏色
- font-size
元素內(nèi)部文字的尺寸大小
1）px：像素蜓肆，絕對(duì)單位颜凯，簡(jiǎn)單的理解為文字的高度占多少個(gè)像素
2）em：相對(duì)單位谋币，相對(duì)于父元素的字體大小
每個(gè)元素必須有字體大小，如果沒(méi)有聲明症概，則直接使用父元素的字體大小蕾额，如果沒(méi)有父元素（html），則使用基準(zhǔn)字號(hào)彼城。
user agent诅蝶，UA，用戶代理（瀏覽器）
- font-weight
文字粗細(xì)程度募壕，可以取值數(shù)字调炬，可以取值為預(yù)設(shè)值
strong，默認(rèn)加粗舱馅。
- font-family
文字類(lèi)型
必須用戶計(jì)算機(jī)中存在的字體才會(huì)有效缰泡。
使用多個(gè)字體，以匹配不同環(huán)境
sans-serif代嗤，非襯線字體
- font-style
字體樣式棘钞，通常用它設(shè)置斜體
i元素，em元素干毅，默認(rèn)樣式宜猜，是傾斜字體; 實(shí)際使用中，通常用它表示一個(gè)圖標(biāo)（icon）
- text-decoration
文本修飾硝逢，給文本加線姨拥。
a元素
del元素：錯(cuò)誤的內(nèi)容
s元素：過(guò)期的內(nèi)容
- text-indent
首行文本縮進(jìn)
- line-height
每行文本的高度，該值越大渠鸽，每行文本的距離越大叫乌。
設(shè)置行高為容器的高度，可以讓單行文本垂直居中
行高可以設(shè)置為純數(shù)字拱绑，表示相對(duì)于當(dāng)前元素的字體大小
- width
寬度
- height
高度
- letter-space
文字間隙
- text-align
元素內(nèi)部文字的水平排列方式
選擇器
選擇器：幫助你精準(zhǔn)的選中想要的元素
簡(jiǎn)單選擇器
- ID選擇器
- 元素選擇器
- 類(lèi)選擇器
- 通配符選擇器
*综芥，選中所有元素
- 屬性選擇器
根據(jù)屬性名和屬性值選中元素
- 偽類(lèi)選擇器
選中某些元素的某種狀態(tài)
1）link: 超鏈接未訪問(wèn)時(shí)的狀態(tài)
2）visited: 超鏈接訪問(wèn)過(guò)后的狀態(tài)
3）hover: 鼠標(biāo)懸停狀態(tài)
4）active：激活狀態(tài)，鼠標(biāo)按下?tīng)顟B(tài)
愛(ài)恨法則：love hate
- 偽元素選擇器
before
after
選擇器的組合
- 并且
- 后代元素 —— 空格
- 子元素 —— >
- 相鄰兄弟元素 —— +
- 后面出現(xiàn)的所有兄弟元素 —— ~
選擇器的并列
多個(gè)選擇器, 用逗號(hào)分隔
語(yǔ)法糖
層疊
聲明沖突：同一個(gè)樣式猎拨，多次應(yīng)用到同一個(gè)元素
層疊：解決聲明沖突的過(guò)程膀藐，瀏覽器自動(dòng)處理（權(quán)重計(jì)算）
1. 比較重要性
重要性從高到底：
作者樣式表：開(kāi)發(fā)者書(shū)寫(xiě)的樣式
1） 作者樣式表中的!important樣式
- 作者樣式表中的普通樣式
- 瀏覽器默認(rèn)樣式表中的樣式
2. 比較特殊性
看選擇器
總體規(guī)則：選擇器選中的范圍越窄，越特殊
具體規(guī)則：通過(guò)選擇器红省，計(jì)算出一個(gè)4位數(shù)（x x x x）
- 千位：如果是內(nèi)聯(lián)樣式额各，記1，否則記0
- 百位：等于選擇器中所有id選擇器的數(shù)量
- 十位：等于選擇器中所有類(lèi)選擇器吧恃、屬性選擇器虾啦、偽類(lèi)選擇器的數(shù)量
- 個(gè)位：等于選擇器中所有元素選擇器、偽元素選擇器的數(shù)量
3. 比較源次序
代碼書(shū)寫(xiě)靠后的勝出
應(yīng)用
- 重置樣式表
書(shū)寫(xiě)一些作者樣式，覆蓋瀏覽器的默認(rèn)樣式
重置樣式表 -> 瀏覽器的默認(rèn)樣式
常見(jiàn)的重置樣式表：normalize.css傲醉、reset.css蝇闭、meyer.css
- 愛(ài)恨法則
link > visited > hover > active
繼承
子元素會(huì)繼承父元素的某些CSS屬性
通常，跟文字內(nèi)容相關(guān)的屬性都能被繼承
屬性值的計(jì)算過(guò)程
一個(gè)元素一個(gè)元素依次渲染硬毕，順序按照頁(yè)面文檔的樹(shù)形目錄結(jié)構(gòu)進(jìn)行
[圖片上傳失敗...(image-fde039-1627727215268)]
渲染每個(gè)元素的前提條件：該元素的所有CSS屬性必須有值
一個(gè)元素呻引，從所有屬性都沒(méi)有值，到所有的屬性都有值吐咳，這個(gè)計(jì)算過(guò)程逻悠，叫做屬性值計(jì)算過(guò)程
特殊的兩個(gè)CSS取值：
- inherit：手動(dòng)（強(qiáng)制）繼承，將父元素的值取出應(yīng)用到該元素
- initial：初始值韭脊，將該屬性設(shè)置為默認(rèn)值
盒模型
box：盒子童谒，每個(gè)元素在頁(yè)面中都會(huì)生成一個(gè)矩形區(qū)域（盒子）
盒子類(lèi)型：
- 行盒，display等于inline的元素
- 塊盒沪羔，display等于block的元素
行盒在頁(yè)面中不換行饥伊、塊盒獨(dú)占一行
display默認(rèn)值為inline
瀏覽器默認(rèn)樣式表設(shè)置的塊盒：容器元素、h1~h6蔫饰、p
常見(jiàn)的行盒：span撵渡、a、img死嗦、video、audio
盒子的組成部分
無(wú)論是行盒粒氧、還是塊盒越除，都由下面幾個(gè)部分組成，從內(nèi)到外分別是：
- 內(nèi)容 content
width外盯、height摘盆，設(shè)置的是盒子內(nèi)容的寬高
內(nèi)容部分通常叫做整個(gè)盒子的內(nèi)容盒 content-box
- 填充(內(nèi)邊距) padding
盒子邊框到盒子內(nèi)容的距離
padding-left、padding-right饱苟、padding-top孩擂、padding-bottom
padding: 簡(jiǎn)寫(xiě)屬性
padding: 上 右 下 左
填充區(qū)+內(nèi)容區(qū) = 填充盒 padding-box
- 邊框 border
邊框 = 邊框樣式 + 邊框?qū)挾?+ 邊框顏色
邊框樣式：border-style
邊框?qū)挾龋篵order-width
邊框顏色：border-color
邊框+填充區(qū)+內(nèi)容區(qū) = 邊框盒 border-box
- 外邊距 margin
邊框到其他盒子的距離
margin-top、margin-left箱熬、margin-right类垦、margin-bottom
速寫(xiě)屬性margin
盒模型應(yīng)用
改變寬高范圍
默認(rèn)情況下，width 和 height 設(shè)置的是內(nèi)容盒寬高城须。
頁(yè)面重構(gòu)師：將psd文件（設(shè)計(jì)稿）制作為靜態(tài)頁(yè)面
衡量設(shè)計(jì)稿尺寸的時(shí)候蚤认，往往使用的是邊框盒，但設(shè)置width和height糕伐，則設(shè)置的是內(nèi)容盒
- 精確計(jì)算
- CSS3：box-sizing
改變背景覆蓋范圍
默認(rèn)情況下砰琢，背景覆蓋邊框盒
可以通過(guò)background-clip進(jìn)行修改
溢出處理
overflow，控制內(nèi)容溢出邊框盒后的處理方式
斷詞規(guī)則
word-break，會(huì)影響文字在什么位置被截?cái)鄵Q行
normal：普通陪汽。CJK字符（文字位置截?cái)啵┭党荂JK字符（單詞位置截?cái)啵?/p>
break-all：截?cái)嗨小Ｋ凶址荚谖淖痔幗財(cái)?/p>
keep-all：保持所有挚冤。所有文字都在單詞之間截?cái)?/p>
空白處理
white-space: nowrap
行盒的盒模型
常見(jiàn)的行盒：包含具體內(nèi)容的元素
span况增、strong、em你辣、i巡通、img、video舍哄、audio
顯著特點(diǎn)
- 盒子沿著內(nèi)容沿伸
- 行盒不能設(shè)置寬高
調(diào)整行盒的寬高宴凉，應(yīng)該使用字體大小、行高表悬、字體類(lèi)型弥锄，間接調(diào)整。
- 內(nèi)邊距（填充區(qū)）
水平方向有效蟆沫，垂直方向不會(huì)實(shí)際占據(jù)空間籽暇。
- 邊框
水平方向有效，垂直方向不會(huì)實(shí)際占據(jù)空間饭庞。
- 外邊距
水平方向有效戒悠，垂直方向不會(huì)實(shí)際占據(jù)空間。
行塊盒
display：inline-block 的盒子
- 不獨(dú)占一行
- 盒模型中所有尺寸都有效
空白折疊
空白折疊舟山，發(fā)生在行盒（行塊盒）內(nèi)部 或 行盒（行塊盒）之間
可替換元素 和 非可替換元素
大部分元素绸狐，頁(yè)面上顯示的結(jié)果，取決于元素內(nèi)容累盗，稱為非可替換元素
少部分元素寒矿，頁(yè)面上顯示的結(jié)果，取決于元素屬性若债，稱為可替換元素
可替換元素：img符相、video、audio
絕大部分可替換元素均為行盒蠢琳。
可替換元素類(lèi)似于行塊盒啊终，盒模型中所有尺寸都有效。
常規(guī)流
盒模型：規(guī)定單個(gè)盒子的規(guī)則
視覺(jué)格式化模型（布局規(guī)則）：頁(yè)面中的多個(gè)盒子排列規(guī)則
視覺(jué)格式化模型傲须，大體上將頁(yè)面中盒子的排列分為三種方式：
- 常規(guī)流
- 浮動(dòng)
- 定位
常規(guī)流布局
常規(guī)流孕索、文檔流、普通文檔流躏碳、常規(guī)文檔流
所有元素搞旭，默認(rèn)情況下散怖，都屬于常規(guī)流布局
總體規(guī)則：塊盒獨(dú)占一行，行盒水平依次排列
包含塊（containing block）：每個(gè)盒子都有它的包含塊肄渗，包含塊決定了盒子的排列區(qū)域镇眷。
絕大部分情況下：盒子的包含塊，為其父元素的內(nèi)容盒
塊盒
- 每個(gè)塊盒的總寬度翎嫡，必須剛好等于包含塊的寬度
寬度的默認(rèn)值是auto
margin的取值也可以是auto欠动，默認(rèn)值0
auto：將剩余空間吸收掉
width吸收能力強(qiáng)于margin
若寬度、邊框惑申、內(nèi)邊距具伍、外邊距計(jì)算后，仍然有剩余空間圈驼，該剩余空間被margin-right全部吸收
在常規(guī)流中人芽，塊盒在其包含快中居中，可以定寬绩脆、然后左右margin設(shè)置為auto萤厅。
- 每個(gè)塊盒垂直方向上的auto值
height:auto， 適應(yīng)內(nèi)容的高度
margin:auto靴迫， 表示0
- 百分比取值
padding惕味、寬、margin可以取值為百分比
以上的所有百分比相對(duì)于包含塊的寬度玉锌。
高度的百分比：
1）. 包含塊的高度是否取決于子元素的高度名挥，設(shè)置百分比無(wú)效
2）. 包含塊的高度不取決于子元素的高度，百分比相對(duì)于父元素高度
- 上下外邊距的合并
兩個(gè)常規(guī)流塊盒主守，上下外邊距相鄰躺同，會(huì)進(jìn)行合并。
兩個(gè)外邊距取最大值丸逸。
浮動(dòng)
視覺(jué)格式化模型，大體上將頁(yè)面中盒子的排列分為三種方式：
- 常規(guī)流
- 浮動(dòng)
- 定位
應(yīng)用場(chǎng)景
- 文字環(huán)繞
- 橫向排列
浮動(dòng)的基本特點(diǎn)
修改float屬性值為：
- left：左浮動(dòng)剃袍，元素靠上靠左
- right：右浮動(dòng)黄刚，元素靠上靠右
默認(rèn)值為none
- 當(dāng)一個(gè)元素浮動(dòng)后，元素必定為塊盒(更改display屬性為block)
- 浮動(dòng)元素的包含塊民效，和常規(guī)流一樣憔维，為父元素的內(nèi)容盒
盒子尺寸
- 寬度為auto時(shí)，適應(yīng)內(nèi)容寬度
- 高度為auto時(shí)畏邢，與常規(guī)流一致业扒，適應(yīng)內(nèi)容的高度
- margin為auto，為0.
- 邊框舒萎、內(nèi)邊距程储、百分比設(shè)置與常規(guī)流一樣
盒子排列
- 左浮動(dòng)的盒子靠上靠左排列
- 右浮動(dòng)的盒子考上靠右排列
- 浮動(dòng)盒子在包含塊中排列時(shí)，會(huì)避開(kāi)常規(guī)流塊盒
- 常規(guī)流塊盒在排列時(shí)，無(wú)視浮動(dòng)盒子
- 行盒在排列時(shí)章鲤，會(huì)避開(kāi)浮動(dòng)盒子
- 外邊距合并不會(huì)發(fā)生
如果文字沒(méi)有在行盒中摊灭，瀏覽器會(huì)自動(dòng)生成一個(gè)行盒包裹文字，該行盒叫做匿名行盒败徊。
高度坍塌
高度坍塌的根源：常規(guī)流盒子的自動(dòng)高度帚呼，在計(jì)算時(shí)，不會(huì)考慮浮動(dòng)盒子
清除浮動(dòng)皱蹦，涉及css屬性：clear
- 默認(rèn)值：none
- left：清除左浮動(dòng)煤杀，該元素必須出現(xiàn)在前面所有左浮動(dòng)盒子的下方
- right：清除右浮動(dòng)，該元素必須出現(xiàn)在前面所有右浮動(dòng)盒子的下方
- both：清除左右浮動(dòng)沪哺，該元素必須出現(xiàn)在前面所有浮動(dòng)盒子的下方
定位
視覺(jué)格式化模型沈自，大體上將頁(yè)面中盒子的排列分為三種方式：
- 常規(guī)流
- 浮動(dòng)：float
- 定位：position
定位：手動(dòng)控制元素在包含塊中的精準(zhǔn)位置
涉及的CSS屬性：position
position屬性
- 默認(rèn)值：static，靜態(tài)定位（不定位）
- relative：相對(duì)定位
- absolute：絕對(duì)定位
- fixed：固定定位
一個(gè)元素凤粗，只要position的取值不是static酥泛，認(rèn)為該元素是一個(gè)定位元素。
定位元素會(huì)脫離文檔流（相對(duì)定位除外）
一個(gè)脫離了文檔流的元素：
- 文檔流中的元素?cái)[放時(shí)嫌拣，會(huì)忽略脫離了文檔流的元素
- 文檔流中元素計(jì)算自動(dòng)高度時(shí)柔袁，會(huì)忽略脫離了文檔流的元素
相對(duì)定位
不會(huì)導(dǎo)致元素脫離文檔流，只是讓元素在原來(lái)位置上進(jìn)行偏移异逐。
可以通過(guò)四個(gè)CSS屬性對(duì)設(shè)置其位置：
- left
- right
- top
- bottom
盒子的偏移不會(huì)對(duì)其他盒子造成任何影響捶索。
絕對(duì)定位
- 寬高為auto，適應(yīng)內(nèi)容
- 包含塊變化：找祖先中第一個(gè)定位元素灰瞻，該元素的填充盒為其包含塊腥例。若找不到，則它的包含塊為整個(gè)網(wǎng)頁(yè)（初始化包含塊）
固定定位
其他情況和絕對(duì)定位完全一樣酝润。
包含塊不同：固定為視口（瀏覽器的可視窗口）
定位下的居中
某個(gè)方向居中：
- 定寬（高）
- 將左右（上下）距離設(shè)置為0
- 將左右（上下）margin設(shè)置為auto
絕對(duì)定位和固定定位中燎竖，margin為auto時(shí)，會(huì)自動(dòng)吸收剩余空間
多個(gè)定位元素重疊時(shí)
堆疊上下文
設(shè)置z-index要销，通常情況下构回，該值越大，越靠近用戶
只有定位元素設(shè)置z-index有效
z-index可以是負(fù)數(shù)疏咐，如果是負(fù)數(shù)纤掸，則遇到常規(guī)流、浮動(dòng)元素浑塞，則會(huì)被其覆蓋
補(bǔ)充
- 絕對(duì)定位借跪、固定定位元素一定是塊盒
- 絕對(duì)定位、固定定位元素一定不是浮動(dòng)
- 沒(méi)有外邊距合并
透明
每個(gè)顏色都具有透明通道, 0 ~ 1
- rgba(紅, 綠, 藍(lán), alpha)
- hex： #紅綠藍(lán)透
更多的選擇器
更多偽類(lèi)選擇器
- first-child
選擇第一個(gè)子元素
first-of-type酌壕，選中子元素中第一個(gè)指定類(lèi)型的元素
- last-child
- nth-child
選中指定的第幾個(gè)子元素
even：關(guān)鍵字掏愁，等同于2n
odd: 關(guān)鍵字歇由，等同于2n+1
- nth-of-type
選中指定的子元素中第幾個(gè)某類(lèi)型的元素
更多的偽元素選擇器
- first-letter
選中元素中的第一個(gè)字母
- first-line
選中元素中第一行的文字
- selection
選中被用戶框選的文字
更多的樣式
透明度
- opacity，它設(shè)置的是整個(gè)元素的透明托猩，它的取值是0 ~ 1
- 在顏色位置設(shè)置alpha通道(rgba )
鼠標(biāo)
使用cursor設(shè)置
盒子隱藏
- display:none印蓖，不生成盒子
- visibility:hidden，生成盒子京腥，只是從視覺(jué)上移除盒子赦肃，盒子仍然占據(jù)空間。
背景圖
和img元素的區(qū)別
img元素是屬于HTML的概念
背景圖屬于css的概念
- 當(dāng)圖片屬于網(wǎng)頁(yè)內(nèi)容時(shí)公浪，必須使用img元素
- 當(dāng)圖片僅用于美化頁(yè)面時(shí)他宛，必須使用背景圖
涉及的css屬性
background-image
background-repeat
默認(rèn)情況下，背景圖會(huì)在橫坐標(biāo)和縱坐標(biāo)中進(jìn)行重復(fù)
- background-size
預(yù)設(shè)值：contain欠气、cover厅各，類(lèi)似于object-fit
數(shù)值或百分比
- background-position
設(shè)置背景圖的位置。
預(yù)設(shè)值：left预柒、bottom队塘、right、top宜鸯、center
數(shù)值或百分比
雪碧圖（精靈圖）（spirit）
- background-attachment
通常用它控制背景圖是否固定憔古。
背景圖和背景顏色混用
速寫(xiě)（簡(jiǎn)寫(xiě)）background
iframe元素
框架頁(yè)
通常用于在網(wǎng)頁(yè)中嵌入另一個(gè)頁(yè)面
iframe 可替換元素
- 通常行盒
- 通常顯示的內(nèi)容取決于元素的屬性
- CSS不能完全控制其中的樣式
- 具有行快盒的特點(diǎn)
在頁(yè)面中使用flash
object
embed
它們都是可替換元素
MIME(Multipurpose Internet Mail Extensions)
多用途互聯(lián)網(wǎng)郵件類(lèi)型：
比如，資源是一個(gè)jpg圖片淋袖，MIME：image/jpeg
表單元素
一系列元素鸿市，主要用于收集用戶數(shù)據(jù)
input元素
輸入框
- type屬性：輸入框類(lèi)型
type: text， 普通文本輸入框
type：password即碗，密碼框
type: date, 日期選擇框焰情，兼容性問(wèn)題
type: search, 搜索框，兼容性問(wèn)題
type: number剥懒，數(shù)字輸入框
type: checkbox内舟，多選框
type: radio，單選框
- value屬性：輸入框的值
- placeholder屬性：顯示提示的文本初橘，文本框沒(méi)有內(nèi)容時(shí)顯示
input元素可以制作按鈕
當(dāng)type值為reset验游、button、submit時(shí)壁却，input表示按鈕。
select元素
下拉列表選擇框
通常和option元素配合使用
textarea元素
文本域裸准，多行文本框
按鈕元素
button
type屬性：reset展东、submit、button炒俱，默認(rèn)值submit
表單狀態(tài)
readonly屬性：布爾屬性盐肃，是否只讀爪膊，不會(huì)改變表單顯示樣式
disabled屬性：布爾屬性，是否禁用砸王，會(huì)改變表單顯示樣式
配合表單元素的其他元素
label
普通元素推盛，通常配合單選和多選框使用
- 顯示關(guān)聯(lián)
可以通過(guò)for屬性，讓label元素關(guān)聯(lián)某一個(gè)表單元素谦铃，for屬性書(shū)寫(xiě)表單元素id的值
- 隱式關(guān)聯(lián)
datalist
數(shù)據(jù)列表
該元素本身不會(huì)顯示到頁(yè)面耘成，通常用于和普通文本框配合
form元素
通常，會(huì)將整個(gè)表單元素驹闰，放置form元素的內(nèi)部瘪菌，作用是當(dāng)提交表單時(shí)，會(huì)將form元素內(nèi)部的表單內(nèi)容以合適的方式提交到服務(wù)器嘹朗。
form元素對(duì)開(kāi)發(fā)靜態(tài)頁(yè)面沒(méi)有什么意義师妙。
fieldset元素
表單分組
美化表單元素
新的偽類(lèi)
- focus
元素聚焦時(shí)的樣式
- checked
單選或多選框被選中的樣式
常見(jiàn)用法
重置表單元素樣式
設(shè)置textarea是否允許調(diào)整尺寸
css屬性resize：
- both：默認(rèn)值，兩個(gè)方向都可以調(diào)整尺寸
- none：不能調(diào)整尺寸
- horizontal: 水平方向可以調(diào)整尺寸
- vertical：垂直方向可以調(diào)整尺寸
文本框邊緣到內(nèi)容的距離
控制單選和多選的樣式
表格元素
在css技術(shù)出現(xiàn)之前屹培，網(wǎng)頁(yè)通常使用表格布局默穴。
后臺(tái)管理系統(tǒng)中可能會(huì)使用表格。
前臺(tái)：面向用戶
后臺(tái)：面向管理員褪秀。對(duì)界面要求不高蓄诽，對(duì)功能性要求高。
表格不再適用于網(wǎng)頁(yè)布局溜歪？表格的渲染速度過(guò)慢若专。
其他元素
- abbr
縮寫(xiě)詞
- time
提供給瀏覽器或搜索引擎閱讀的時(shí)間
- b （bold）
以前是一個(gè)無(wú)語(yǔ)義元素，主要用于加粗字體
- q
一小段引用文本
- blockquote
大段引用的文本
- br
無(wú)語(yǔ)義
主要用于在文本中換行
- hr
無(wú)語(yǔ)義
主要用于分割
- meta
還可以用于搜索引擎優(yōu)化（SEO）
- link
鏈接外部資源（CSS蝴猪、圖標(biāo)）
rel屬性：relation调衰，鏈接的資源和當(dāng)前網(wǎng)頁(yè)的關(guān)系
type屬性：鏈接的資源的MIME類(lèi)型
@規(guī)則
at-rule: @規(guī)則、@語(yǔ)句自阱、CSS語(yǔ)句嚎莉、CSS指令
- import
@import "路徑";
導(dǎo)入另外一個(gè)css文件
- charset
@charset "utf-8";
告訴瀏覽器該CSS文件，使用的字符編碼集是utf-8沛豌，必須寫(xiě)到第一行
web字體和圖標(biāo)
web字體
用戶電腦上沒(méi)有安裝相應(yīng)字體趋箩，強(qiáng)制讓用戶下載該字體
使用@font-face指令制作一個(gè)新字體
字體圖標(biāo)
iconfont.cn
web字體和圖標(biāo)
web字體
用戶電腦上沒(méi)有安裝相應(yīng)字體，強(qiáng)制讓用戶下載該字體
使用@font-face指令制作一個(gè)新字體
字體圖標(biāo)
iconfont.cn
塊級(jí)格式化上下文
web字體
用戶電腦上沒(méi)有安裝相應(yīng)字體加派，強(qiáng)制讓用戶下
載該字體
全稱Block Formatting Context叫确，簡(jiǎn)稱BFC
它是一塊獨(dú)立的渲染區(qū)域，它規(guī)定了在該區(qū)域中芍锦，常規(guī)流塊盒的布局
1.常規(guī)流塊盒在水平方向上竹勉，必須撐滿包含塊
2.常規(guī)流塊盒在包含塊的垂直方向上依次擺放
3.常規(guī)流塊盒若外邊距無(wú)縫相鄰，則進(jìn)行外邊距合并
4.常規(guī)流塊盒的自動(dòng)高度和擺放位置娄琉，無(wú)視浮動(dòng)元素
BFC渲染區(qū)域：
這個(gè)區(qū)域由某個(gè)HTML元素創(chuàng)建次乓，以下元素會(huì)在其內(nèi)部創(chuàng)建BFC區(qū)域：
1.根元素
2.浮動(dòng)和絕對(duì)定位元素
3.overflow不等于visible的塊盒
不同的BFC區(qū)域吓歇，它們進(jìn)行渲染時(shí)互不干擾
創(chuàng)建BFC的元素，隔絕了它內(nèi)部和外部的聯(lián)系票腰，內(nèi)部的渲染不會(huì)影響到外部
具體規(guī)則：
創(chuàng)建BFC的元素城看，它的自動(dòng)高度需要計(jì)算浮動(dòng)元素
創(chuàng)建BFC的元素，它的邊框盒不會(huì)與浮動(dòng)元素重疊
創(chuàng)建BFC的元素杏慰，不會(huì)和它的子元素進(jìn)行外邊距合并
布局
多欄布局
兩欄布局
三欄布局
等高
- CSS3的彈性盒
- JS控制
- 偽等高
元素書(shū)寫(xiě)順序
后臺(tái)頁(yè)面的布局
盒子位置：
左浮動(dòng)的盒子向上向左排列
右浮動(dòng)的盒子向上向右排列
浮動(dòng)盒子的頂邊不得高于上一個(gè)盒子的頂邊
若剩余空間無(wú)法放下浮動(dòng)的盒子测柠，則該盒子向下移動(dòng)，直到具備足夠的空間能容納盒子逃默，然后再向左或向右移動(dòng)
行高的取值
line-height
- px, 像素值
- 無(wú)單位的數(shù)字
- em單位
- 百分比
body背景
畫(huà)布 canvas
一塊區(qū)域
特點(diǎn)：
- 最小寬度為視口寬度
- 最小高度為視口高度
HTML元素的背景
覆蓋畫(huà)布
BODY元素的背景
如果HTML元素有背景鹃愤，BODY元素正常（背景覆蓋邊框盒）
如果HTML元素沒(méi)有背景，BODY元素的背景覆蓋畫(huà)布
關(guān)于畫(huà)布背景圖
- 背景圖的寬度百分比完域，相對(duì)于視口
- 背景圖的高度百分比软吐，相對(duì)于網(wǎng)頁(yè)高度
- 背景圖的橫向位置百分比、預(yù)設(shè)值吟税，相對(duì)于視口
- 背景圖的縱向位置百分比凹耙、預(yù)設(shè)值，相對(duì)于網(wǎng)頁(yè)高度
行盒的垂直對(duì)齊
多個(gè)行盒垂直方向上的對(duì)齊
給沒(méi)有對(duì)齊元素設(shè)置vertical-align
預(yù)設(shè)值
數(shù)值
圖片的底部白邊
圖片的父元素是一個(gè)塊盒肠仪，塊盒高度自動(dòng)肖抱，圖片底部和父元素底邊之間往往會(huì)出現(xiàn)空白。
- 設(shè)置父元素的字體大小為0
- 將圖片設(shè)置為塊盒
參考線-深入理解字體
font-size异旧、line-height意述、vertical-align、font-family
文字
文字是通過(guò)一些文字制作軟件制作的吮蛹，比如fontforge
制作文字時(shí)荤崇，會(huì)有幾根參考線，不同的文字類(lèi)型潮针，參考線不一樣术荤。同一種文字類(lèi)型，參考線一致每篷。
font-size
字體大小瓣戚，設(shè)置的是文字的相對(duì)大小
文字的相對(duì)大小：1000焦读、2048子库、1024
文字頂線到底線的距離，是文字的實(shí)際大写；巍（content-area仑嗅，內(nèi)容區(qū)）
行盒的背景，覆蓋content-area
行高
頂線向上延申的空間，和底線向下延申的空間无畔，兩個(gè)空間相等，該空間叫做gap（空隙）
gap默認(rèn)情況下吠冤，是字體設(shè)計(jì)者決定
top到botoom（看ppt圖）浑彰，叫做virtual-area（虛擬區(qū)）
行高，就是virtual-area
line-height: normal拯辙，默認(rèn)值郭变，使用文字默認(rèn)的gap
文字一定出現(xiàn)一行的最中間——錯(cuò)誤
content-area一定出現(xiàn)在virtual-area的中間
vertical-align
決定參考線：font-size、font-family涯保、line-height
一個(gè)元素如果子元素出現(xiàn)行盒诉濒，該元素內(nèi)部也會(huì)產(chǎn)生參考線
baseline：該元素的基線與父元素的基線對(duì)齊
super: 該元素的基線與父元素的上基線對(duì)齊
sub：該元素的基線與父元素的下基線對(duì)齊
text-top: 該元素的virtual-area的頂邊，對(duì)齊父元素的text-top
text-bottom: 該元素的virtual-area的底邊夕春，對(duì)齊父元素的text-bottom
top：該元素的virtual-area的定邊未荒，對(duì)齊line-box的頂邊
bottom：該元素的virtual-area的底邊，對(duì)齊line-box的底邊
middle: 該元素的中線（content-area的一半）及志，與父元素的X字母高度一半的位置對(duì)齊
行盒組合起來(lái)片排，可以形成多行，每一行的區(qū)域叫做line-box速侈，line-box的頂邊是該行內(nèi)所有行盒最高頂邊率寡，底邊是該行行盒的最低底邊。
實(shí)際倚搬，一個(gè)元素的實(shí)際占用高度（高度自動(dòng)）冶共，高度的計(jì)算通過(guò)line-box計(jì)算。
行盒：inline-box
行框：line-box
數(shù)值：相對(duì)于基線的偏移量每界，向上為正數(shù)捅僵，向下為負(fù)數(shù)。
百分比：相對(duì)于基線的偏移量盆犁，百分比是相對(duì)于自身virtual-area的高度
line-box是承載文字內(nèi)容的必要條件命咐，以下情況不生成行框：
- 某元素內(nèi)部沒(méi)有任何行盒
- 某元素字體大小為0
可替換元素和行塊盒的基線
圖片：基線位置位于圖片的下外邊距。
表單元素：基線位置在內(nèi)容底邊
行塊盒：
- 行塊盒最后一行有l(wèi)ine-box谐岁，用最后一行的基線作為整個(gè)行塊盒的基線醋奠。
- 如果行塊盒內(nèi)部沒(méi)有行盒，則使用下外邊距作為基線
堆疊上下文
堆疊上下文（stack context）伊佃，它是一塊區(qū)域窜司，這塊區(qū)域由某個(gè)元素創(chuàng)建，它規(guī)定了該區(qū)域中的內(nèi)容在Z軸上排列的先后順序航揉。
創(chuàng)建堆疊上下文的元素
- html元素（根元素）
- 設(shè)置了z-index（非auto）數(shù)值的定位元素
同一個(gè)堆疊上下文中元素在Z軸上的排列
從后到前的排列順序：
- 創(chuàng)建堆疊上下文的元素的背景和邊框
- 堆疊級(jí)別(z-index, stack level)為負(fù)值的堆疊上下文
- 常規(guī)流非定位的塊盒
- 非定位的浮動(dòng)盒子
- 常規(guī)流非定位行盒
- 任何 z-index 是 auto 的定位子元素塞祈，以及 z-index 是 0 的堆疊上下文
- 堆疊級(jí)別為正值的堆疊上下文
每個(gè)堆疊上下文，獨(dú)立于其他堆疊上下文帅涂，它們之間不能相互穿插议薪。
svg
svg: scalable vector graphics尤蛮，可縮放的矢量圖
- 該圖片使用代碼書(shū)寫(xiě)而成
- 縮放不會(huì)失真
- 內(nèi)容輕量
怎么使用
svg可以嵌入瀏覽器，也可以單獨(dú)成為一個(gè)文件
xml語(yǔ)言斯议，svg使用該語(yǔ)言定義
書(shū)寫(xiě)svg代碼
矩形:rect
圓形：circle
橢圓：ellipse
線條：line
折線：polyline
多邊形：polygon
路徑：path
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
A
半徑1
半徑2
順時(shí)針旋轉(zhuǎn)角度
小徊獭（0）或大弧（1）
順時(shí)針（1）逆時(shí)針（0）
Z = closepath
例子
畫(huà)太極圖
數(shù)據(jù)鏈接
data url
如何書(shū)寫(xiě)
數(shù)據(jù)鏈接：將目標(biāo)文件的數(shù)據(jù)直接書(shū)寫(xiě)到路徑位置
語(yǔ)法：data:MIME,數(shù)據(jù)
意義
優(yōu)點(diǎn)：
- 減少了瀏覽器中的請(qǐng)求
請(qǐng)求
響應(yīng)
減少了請(qǐng)求中浪費(fèi)的時(shí)間
- 有利于動(dòng)態(tài)生成數(shù)據(jù)
缺點(diǎn)：
- 增加了資源的體積
導(dǎo)致了傳輸內(nèi)容增加哼御，從而增加了單個(gè)資源的傳輸時(shí)間
- 不利于瀏覽器的緩存
瀏覽器通常會(huì)緩存圖片文件睹逃、css文件休偶、js文件。
- 會(huì)增加原資源的體積到原來(lái)的4/3
應(yīng)用場(chǎng)景：
但請(qǐng)求單個(gè)圖片體積較小，并且該圖片因?yàn)楦鞣N原因坚弱，不適合制作雪碧圖妒蔚，可以使用數(shù)據(jù)鏈接承疲。
圖片由其他代碼動(dòng)態(tài)生成焰络，并且圖片較小，可以使用數(shù)據(jù)鏈接嗦哆。
base64
一種編碼方式
通常用于將一些二進(jìn)制數(shù)據(jù)辟宗，用一個(gè)可書(shū)寫(xiě)的字符串表示。
瀏覽器兼容性
問(wèn)題產(chǎn)生原因
- 市場(chǎng)競(jìng)爭(zhēng)
- 標(biāo)準(zhǔn)版本的變化
廠商前綴
比如：box-sizing吝秕， 谷歌舊版本瀏覽器中使用-webkit-box-sizing:border-box
- 市場(chǎng)競(jìng)爭(zhēng)泊脐，標(biāo)準(zhǔn)沒(méi)有發(fā)布
- 標(biāo)準(zhǔn)仍在討論中（草案），瀏覽器廠商希望先支持
IE： -ms-
Chrome烁峭，safari: -webkit-
opera： -o-
firefox: -moz-
瀏覽器在處理樣式或元素時(shí)容客，使用如下的方式：
當(dāng)遇到無(wú)法識(shí)別的代碼時(shí)，直接略過(guò)约郁。
- 谷歌瀏覽器的滾動(dòng)條樣式
實(shí)際上缩挑，在開(kāi)發(fā)中使用自定義的滾動(dòng)條，往往是使用div+css+JS實(shí)現(xiàn)的
- 多個(gè)背景圖中選一個(gè)作為背景
css hack
根據(jù)不同的瀏覽器（主要針對(duì)IE）鬓梅，設(shè)置不同的樣式和元素
- 樣式
IE中供置，CSS的特殊符號(hào)
- *屬性，兼容IE5绽快、IE6芥丧、IE7
- _屬性，兼容IE5~IE6
- 屬性值\9坊罢，兼容IE5~IE11
- 屬性值\0续担，兼容IE8~IE11
- 屬性值\9\0，兼容IE9~IE10
IE5活孩、6物遇、7的外邊距bug，浮動(dòng)元素的左外邊距翻倍
- 條件判斷
漸近增強(qiáng) 和 優(yōu)雅降級(jí)
兩種解決兼容性問(wèn)題的思路，會(huì)影響代碼的書(shū)寫(xiě)風(fēng)格
- 漸近增強(qiáng)：先適應(yīng)大部分瀏覽器询兴，然后針對(duì)新版本瀏覽器加入新的樣式
書(shū)寫(xiě)代碼時(shí)乃沙，先盡量避免書(shū)寫(xiě)有兼容性問(wèn)題的代碼，完成之后诗舰，再逐步加入新標(biāo)準(zhǔn)中的代碼崔涂。
- 優(yōu)雅降級(jí)：先制作完整的功能，然后針對(duì)低版本瀏覽器進(jìn)行特殊處理
書(shū)寫(xiě)代碼時(shí)始衅，先不用特別在意兼容性，完成整個(gè)功能之后缭保，再針對(duì)低版本瀏覽器處理樣式汛闸。
caniuse
查找css兼容性
[caniuse.com]
居中總結(jié)
居中：盒子在其包含塊中居中
行盒（行塊盒）水平居中
直接設(shè)置行盒（行塊盒）父元素text-align:center
常規(guī)流塊盒水平居中
定寬，設(shè)置左右margin為auto
絕對(duì)定位元素的水平居中
定寬艺骂，設(shè)置左右的坐標(biāo)為0（left:0, right:0）诸老，將左右margin設(shè)置為auto
實(shí)際上，固定定位（fixed）是絕對(duì)定位（absolute）的特殊情況
單行文本的垂直居中
設(shè)置文本所在元素的行高钳恕，為整個(gè)區(qū)域的高度
行塊盒或塊盒內(nèi)多行文本的垂直居中
沒(méi)有完美方案
設(shè)置盒子上下內(nèi)邊距相同别伏，達(dá)到類(lèi)似的效果。
絕對(duì)定位的垂直居中
定高忧额，設(shè)置上下的坐標(biāo)為0（top:0, bottom:0）厘肮，將上下margin設(shè)置為auto
樣式補(bǔ)充
display:list-item
設(shè)置為該屬性值的盒子，本質(zhì)上仍然是一個(gè)塊盒睦番，但同時(shí)該盒子會(huì)附帶另一個(gè)盒子
元素本身生成的盒子叫做主盒子类茂，附帶的盒子稱為次盒子，次盒子和主盒子水平排列
涉及的css：
list-style-type
設(shè)置次盒子中內(nèi)容的類(lèi)型
list-style-position
設(shè)置次盒子相對(duì)于主盒子的位置
- 速寫(xiě)屬性
list-style
清空次盒子
list-style:none
圖片失效時(shí)的寬高問(wèn)題
如果img元素的圖片鏈接無(wú)效托嚣，img元素的特性和普通行盒一樣巩检，無(wú)法設(shè)置寬高
行盒中包含行塊盒或可替換元素
行盒的高度與它內(nèi)部的行塊盒或可替換元素的高度無(wú)關(guān)
text-align:justify
text-align:
- left: 左對(duì)齊
- right：右對(duì)齊
- center：居中
- justify：除最后一行外，分散對(duì)齊
制作一個(gè)三角形
direction 和 writing-mode
開(kāi)始 start -> 結(jié)束 end
左 left -> 右 end
開(kāi)始和結(jié)束是相對(duì)的示启，不同國(guó)家有不同的習(xí)慣
左右是絕對(duì)的
direction設(shè)置的是開(kāi)始到結(jié)束的方向
writing-mode：設(shè)置文字書(shū)寫(xiě)方向
