一冗美、CSS布局
主要使用：
- normal flow
- float + clear
- position relative + absolute
- display inline-block
- 負(fù)margin
1. Float布局
2. Flex布局
全屏里居中：
height: 100vh;
box-sizing: border-box;
/*!!!*/
display: flex;
justify-content: center;
align-items: center;
/*!!!*/
3. 水平居中
- child寬不確定
margin-left: 20px;
margin-right:20px;
- child寬度確定
margin-left: auto;
margin-right: auto;
- parent
.parent{
text-align: center;
}
.child{
display: inline;
}
4. 垂直居中
- child高確定
.parent{
padding-top: 20px;
padding-bottom: 20px;
}
- child高不確定（同上）
盡量避免parent高確定的情況
-
parent高度確定：
IE——table檀何、div(table)布局
chrome、移動(dòng)端——flex布局
二萧豆、文檔流
div高度由其內(nèi)部文檔流元素的高度的總和決定
脫離文檔流：
float: leftposition: absoluteposition: fixed
position: relative不會(huì)脫離文檔流，可相對原位置設(shè)置定位以偏離原始位置谜酒。
文字省略溢出
text-overflow:ellipsis;
overflow:hidden;
文字垂直居中
設(shè)置line-height與上下padding
margin合并
border本姥、padding可以有效取消margin合并的問題
overflow:hidden 同樣有效但不推薦使用
內(nèi)聯(lián)元素
可用padding margin影響寬度，高度由行高決定
一比一div
僅用padding-top: 100%就可實(shí)現(xiàn)
三焦辅、堆疊
堆疊順序
由底到頂：定位元素（負(fù)z-index）< background < border < div / 塊級元素 < 浮動(dòng)元素 < 文字 / 內(nèi)聯(lián)元素 < 定位元素（正z-index）
z-index：只有定位元素可加博杖，默認(rèn)為0
堆疊上下文
- 根元素 (HTML),
- z-index 值不為 "auto"的 絕對/相對定位，
- 一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)筷登，即：父元素 display: flex|inline-flex欧募，
- opacity 屬性值小于 1 的元素（參考 the specification for opacity），
- transform 屬性值不為 "none"的元素仆抵，
- mix-blend-mode 屬性值不為 "normal"的元素，
- filter值不為“none”的元素种冬，
- perspective值不為“none”的元素镣丑，
- isolation 屬性被設(shè)置為 "isolate"的元素，
- position: fixed
- 在 will-change 中指定了任意 CSS 屬性娱两，即便你沒有直接指定這些屬性的值（參考 這篇文章）
- -webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
四莺匠、圖標(biāo)（icon）
- 切圖，使用photoshop十兢。
- background-image：背景圖不會(huì)因div大小變形
- CSS sprites（雪碧圖趣竣、精靈圖）
- iconfont-HTML
- iconfont-CSS
- SVG-icon
- CSS畫圖標(biāo)：https://cssicon.space/
五、移動(dòng)端頁面（響應(yīng)式）
媒體查詢（media query）
@media (max-width: 800px){
body{
background: red;
}
}/*媒體查詢旱物，滿足最大寬度不超過800px時(shí)執(zhí)行其中內(nèi)容*/
?
@media (min-width:321px) and (max-width: 375px){
body{
background: red;
}
}/*321~375*/
<link rel="stylesheet" href="style.css" media="(max-width: 320px)"><!--在符合該媒體查詢條件時(shí)對應(yīng)css文件才會(huì)生效-->
手機(jī)端所需meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
移動(dòng)端特點(diǎn)
- 沒有hover
- 有touch事件
- 沒有resize
- 沒有滾動(dòng)條
六遥缕、FLEX
Flex布局特點(diǎn)：
- 塊級布局側(cè)重垂直方向、行內(nèi)布局側(cè)重水平方向宵呛，flex布局與反向無關(guān)
- flex布局可以實(shí)現(xiàn)空間自動(dòng)分配单匣、自動(dòng)補(bǔ)齊
- flex適用于簡單的線性布局，復(fù)雜布局要使用grid布局
-
flex container的屬性
- flex-direction：方向
- flex-wrap：換行
- flex-flow：上面兩個(gè)的縮寫
- justify-content：主軸方向?qū)R方式
- align-items：側(cè)軸對齊方式
- align-content：多行/列內(nèi)容對齊方式（使用頻率少）
-
flex item的屬性
- flex-grow：增長比例（空間過多時(shí)）
- flex-shrink：收縮比例（空間不夠時(shí)）
- flex-basis：默認(rèn)大小（一般不用）
- flex：上面三個(gè)的縮寫
- order：順序（代替雙飛翼）
- align-self：自身的對齊方式
七户秤、Grid（網(wǎng)格布局）
-
grid container的屬性
- display: grid | inline-grid | subgrid
- grid-template-columns(rows) ：設(shè)置各列（行）名稱和寬度（高度）
- grid-template-areas：設(shè)置區(qū)域組成码秉，搭配grid-area
- grid-template：一次性使用以上三屬性
- grid-colomn(row)-gap：列（行）之間空隙
- justify-items：start | end | center | stretch 水平軸
- align-items：start | end | center | stretch 縱軸
- justify-content：設(shè)置網(wǎng)格行軸對齊方式
- align-content：設(shè)置網(wǎng)格列軸對齊方式
- grid-column(row)：以行列第 n / m 條線之間來定位網(wǎng)格
-
grid items的屬性
- grid-column(row)-start(end)：定位網(wǎng)格
八、BFC
塊格式化上下文（Block Formatting Context）是塊級盒布局出現(xiàn)的區(qū)域鸡号，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域转砖。
BFC元素特性表現(xiàn)原則：內(nèi)部子元素?zé)o論如何不會(huì)影響外部元素。
display: flow-root鲸伴，一個(gè)特殊CSS3新屬性府蔗，專用于觸發(fā)BFC。
- 同一個(gè)BFC中的相鄰塊級盒之間的豎直margin會(huì)合并
- 一個(gè)BFC包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容挑围，除了被包含于創(chuàng)建新的BFC的后代元素內(nèi)的元素
CSS規(guī)范中對 BFC 的描述
9.4.1 塊格式化上下文
浮動(dòng)礁竞，絕對定位元素，非塊盒的塊容器（例如杉辙，inline-blocks模捂，table-cells和table-captions）和'overflow'不為'visible'的塊盒會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文
在一個(gè)塊格式化上下文中，盒在豎直方向一個(gè)接一個(gè)地放置蜘矢，從包含塊的頂部開始狂男。兩個(gè)兄弟盒之間的豎直距離由'margin'屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級盒之間的豎直margin會(huì)合并
在一個(gè)塊格式化上下文中品腹，每個(gè)盒的left外邊（left outer edge）挨著包含塊的left邊（對于從右向左的格式化岖食，right邊挨著）。即使存在浮動(dòng)（盡管一個(gè)盒的行盒可能會(huì)因?yàn)楦?dòng)收縮）舞吭，這也成立泡垃。除非該盒建立了一個(gè)新的塊格式化上下文（這種情況下，該盒自身可能會(huì)因?yàn)楦?dòng)變窄）
MDN 對 BFC 的描述
一個(gè)塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分羡鸥。它是塊級盒布局出現(xiàn)的區(qū)域蔑穴，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。
一個(gè)塊格式化上下文由以下之一創(chuàng)建：
- 根元素或其它包含它的元素
- 浮動(dòng)元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell惧浴，HTML表格單元格默認(rèn)屬性)
- 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
- 具有overflow 且值不是 visible 的塊元素存和，
- display: flow-root
- column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中衷旅。
一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容捐腿，除了被包含于創(chuàng)建新的塊級格式化上下文的后代元素內(nèi)的元素。
塊格式化上下文對于定位 (參見 float) 與清除浮動(dòng) (參見 clear) 很重要柿顶。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素茄袖。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局，并且清除浮動(dòng)只能清除同一塊格式化上下文中在它前面的元素的浮動(dòng)九串。
九绞佩、動(dòng)態(tài)REM
手機(jī)專用的自適應(yīng)方案
什么是REM
em: 一個(gè)m的寬度 / 一個(gè)漢字寬度 rem: root em 根元素的font-size vh: viewport height 視口高度 vw: viewport width 視口寬度
REM和EM的區(qū)別
em：所在子元素的font-size rem：根元素的font-size
手機(jī)端方案的特點(diǎn)
屏幕比例多寺鸥，不可能記住每一種及做出每一種對應(yīng)頁面，要保證不同屏幕中網(wǎng)頁的視覺比例效果相同品山，可響應(yīng)不同手機(jī)胆建。
使用JS動(dòng)態(tài)調(diào)整REM
使用JS設(shè)置font-size與頁面寬度相聯(lián)系、對應(yīng)肘交，使rem可用于移動(dòng)端頁面效果的響應(yīng)笆载。
var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth/10 + '}')
rem使用不能小于1px，或比例下1rem不可小于瀏覽器所設(shè)最小font-size涯呻。
在SCSS里使用PX2REM
@function px2rem($px){
@return $px / $desighWidth + rem
}
IFC
內(nèi)聯(lián)格式化上下文(inline formatting content)
HTML 元素的 content-area（內(nèi)容區(qū)域）就是 background 作用的區(qū)域
每個(gè) HTML 元素實(shí)際上都是由多個(gè) line-box 的容器組成凉驻，每一行都叫做一個(gè) line-box。line-box 的高度是由它所有子元素的高度計(jì)算得出的复罐。
所有的內(nèi)聯(lián)元素都有兩個(gè)高度：
- 基于字體度量的 content-area
- virtual-area（實(shí)際高度涝登，也就是 line-height ）
- 兩個(gè)高度都無法看到
vertical-align不靠譜，僅以下 4 個(gè)值有可能有點(diǎn)用
- vertical-align: top / bottom效诅，表示與 line-box 的頂部或底部對齊
- vertical-align: text-top / text-bottom胀滚，表示與 content-area 的頂部或底部對齊
