本文為作者學(xué)習(xí)時(shí)所記自用筆記辩块， 有很多不足，有錯(cuò)的地方煩請(qǐng)指出葱轩，圖片來自360前端講師課件征峦，禁止轉(zhuǎn)載。
塊級(jí)元素與行級(jí)元素
display屬性設(shè)置為inline/inline-block/inline-table表示設(shè)置為行級(jí)元素呆贿，設(shè)置為block/list-item/table表示設(shè)置為塊級(jí)元素
<p></p>和<a></a>都會(huì)折行嚷兔，<p></p>是塊級(jí)元素，<a></a>是行級(jí)元素
<p></p>,<div></div>,<section></section>等默認(rèn)是塊級(jí)元素
每一個(gè)行級(jí)元素生成一個(gè)行級(jí)盒子做入，inline設(shè)置的行級(jí)盒子的margin-top和margin-bottom不會(huì)產(chǎn)生效果冒晰，padding-top和padding-bottom不影響行布局
- 塊級(jí)盒子中可以包含多個(gè)塊級(jí)或者行級(jí)盒子，一個(gè)塊級(jí)盒子中不能同時(shí)包含塊級(jí)元素或者行級(jí)元素竟块，否則瀏覽器會(huì)自動(dòng)生成匿名塊級(jí)盒子去包含行級(jí)盒子
- 不在行級(jí)元素中的文字壶运，瀏覽器會(huì)自動(dòng)生成一個(gè)匿名的行級(jí)盒子包含文字
- 行級(jí)盒子中可以包含行級(jí)盒子，當(dāng)行級(jí)盒子中包含塊級(jí)盒子時(shí)浪秘，會(huì)拆成兩個(gè)行級(jí)蒋情，并分別被兩個(gè)匿名塊級(jí)包含
inline-block生成行級(jí)元素埠况，并為其內(nèi)容生成塊級(jí)盒子
visibility:hidden和display:none都可以隱藏元素，后者不占排版
hi::after{ }和h1::before{ }可以在css中（而不是html）生成一個(gè)盒子并對(duì)其屬性做操作
例如content:'\2693'和content:'('attr(herf)')'分別表示生成一個(gè)字符和鏈接
定位模式
常規(guī)流（Normal flow）
塊級(jí)格式化上下文（BFC）
- 可以通過
overflow:hidden創(chuàng)建BFC
除此之外還有inline-block等可以創(chuàng)建BFC - 盒子在元素內(nèi)由上到下依次擺放
- 兩個(gè)盒子之間的間距由
margin確定 - 同一個(gè)快內(nèi)上下
margin會(huì)合并 - 盒子左外邊緣挨著容器
- BFC內(nèi)的浮動(dòng)不會(huì)影響外部
- BFC高度會(huì)包含浮動(dòng)元素
- BFC不會(huì)和浮動(dòng)元素重疊
- BFC可以清除浮動(dòng)棵癣，防止margin折疊辕翰，簡(jiǎn)單雙欄布局
行級(jí)格式化上下文
- 盒子之間
margin,padding,border屬性均有效 - 行盒內(nèi)水平分布由
text-algin決定 - 當(dāng)一個(gè)行盒放不下所有元素時(shí)會(huì)進(jìn)行拆分
- 若行級(jí)塊不能拆分（單詞，inline-block）會(huì)整體移入下一行盒
浮動(dòng)（Float）
浮動(dòng)元素從常規(guī)流中脫離狈谊，被漂浮在容器的左邊或者右邊
浮動(dòng)元素不會(huì)影響后面的流內(nèi)塊級(jí)元素喜命，但后面的流內(nèi)行級(jí)元素會(huì)變短以避開浮動(dòng)元素
高度計(jì)算時(shí)，浮動(dòng)元素的高度不會(huì)被加入計(jì)算
img{float:left;}河劝，將圖片設(shè)置為浮動(dòng)模式壁榕，制作文字環(huán)繞效果
clear屬性可以指定某一邊框不與浮動(dòng)元素相連,消除浮動(dòng)產(chǎn)生的一些負(fù)面影響
clear:both和overflow:hidden都能清除浮動(dòng)
絕對(duì)定位（Absolute positioning）
position屬性：
-
static默認(rèn)值 -
relative相對(duì)定位，相對(duì)于自己本應(yīng)該在的位置使用top,bottom,left,right進(jìn)行定位 -
absolute絕對(duì)定位赎瞎，相對(duì)于最近的非static祖先進(jìn)行定位（relative,absolute）如果沒有牌里，則相對(duì)于根節(jié)點(diǎn)，對(duì)流內(nèi)其他元素?zé)o任何影響 -
fixed相對(duì)于視口的絕對(duì)定位务甥，不會(huì)隨網(wǎng)頁滾動(dòng)而變化牡辽，相對(duì)于整個(gè)頁面定位
堆疊（Stacking context）
z-index屬性，默認(rèn)為auto=0,可以為負(fù)值/正值缓呛，只適用于定位元素（position為非默認(rèn)值）催享，非定位元素?zé)o法設(shè)置此屬性
- border,background最下層
- z-index為負(fù)值的子堆疊上下文
- 常規(guī)塊級(jí)非浮動(dòng)子元素
- 非定位浮動(dòng)子元素
- 非定位行級(jí)子元素
- z-index為0的子元素
- z-index為正的子元素最上層
堆疊上下文：
root/z-index不為auto的元素以及設(shè)置了opacity,transform,animation屬性的元素
視覺格式化細(xì)節(jié)（Visual detail）
行級(jí)格式化上下文
vertical-align屬性設(shè)置行盒的垂直對(duì)齊關(guān)系，數(shù)值均以base-line為基準(zhǔn)
list-style
display:list-item生成一個(gè)列表哟绊，包含兩個(gè)盒子因妙，marker box和principle block box
list-style-position調(diào)整列表元素位置
list-style-type調(diào)整列表前點(diǎn)的樣式
list-style-image將列表前點(diǎn)變?yōu)橹付▓D片
back-ground
background-color背景顏色
background-image背景圖片
backgroud-repeat背景重復(fù)模式
background-size背景圖片大小
background-position背景圖位置
background-attachment背景圖是否隨頁面滾動(dòng)
border-radius
圓角設(shè)置，可用百分比和像素表示票髓。
height:100px;width:100px;border-radius:100px;產(chǎn)生一個(gè)直徑100px的圓
box-shadow
陰影設(shè)置
box-shadow: h-shadow v-shadow blur spread color inset;
前兩個(gè)為陰影偏移量攀涵，必填。后依次為模糊度洽沟，尺寸以故，顏色，內(nèi)部陰影
box-shadow還可以用作元素的復(fù)制裆操，例如：
#one{ background-color:#404040; height:100px; width:100px; box-shadow: 200px 0px 0px #888888,400px 0px 0px #777777; }
布局
居中
- 水平居中
行級(jí)元素：text-align:center
塊級(jí)元素：margin:auto - 垂直居中
單行文字：line-height屬性設(shè)置高度
行級(jí)盒子：vertical-align:middle常用于圖標(biāo)居中
絕對(duì)定位：top:50%,left:50%
table用于布局
- table元素屬性設(shè)置
- table可以用于導(dǎo)航欄布局怒详，不使用
<table></table>而使用display:table - table可以用于制作居中效果
flexbox----為解決布局而生
display:flex定義flexbox
-
flex-direction：row|row-reverse|colum|column-reverse設(shè)置子元素排列方向
-
flex-grow彈性盒子，表示占富余空間能力踪区，默認(rèn)0 -
flex-shink彈性盒子昆烁，空間不夠時(shí)壓縮自身能力，默認(rèn)1 -
flex-wrap定義寬度不夠時(shí)是否換行 -
justify-content不伸縮時(shí)子元素在主軸方向分布 -
align-item子元素在側(cè)軸方向分布 align-self-
align-content多行元素側(cè)軸方向分布 -
order定義元素順序缎岗，默認(rèn)為0静尼，從小到大排列
Grid格子布局
display:grid定義grid
不同布局屬性瀏覽器兼容性
