CSS 2020 - 簡書

CSS三大知識點(diǎn)

盒子模型
浮動
定位

標(biāo)簽顯示模式

塊級元素 block-level 常見元素（div ）寬度默認(rèn)100% 高度為0
- 獨(dú)自占一行
- 寬度张峰，高度泪蔫、外邊距以及內(nèi)邊距都可以控制
- 寬度默認(rèn)100%
- 是一個(gè)容器盒子，里面可以放行內(nèi)元素或者塊元素
行內(nèi)元素 inline-level 常用（span）
- 一行可以顯示多個(gè)
- 高寬設(shè)置無效
- 行內(nèi)元素只能容納行內(nèi)元素或文本
- 默認(rèn)寬度就是它本身內(nèi)容的寬度
行內(nèi)塊元素 inline-block (input img)
- 中間有白色縫隙
- 和相鄰元素放置一行喘批，一行可以顯示多個(gè)
- 默認(rèn)寬度就是本身內(nèi)容的寬度
- 寬度撩荣，高度、外邊距以及內(nèi)邊距都可以控制

標(biāo)簽顯示模式轉(zhuǎn)換 display

塊轉(zhuǎn)行內(nèi) display:inline
行內(nèi)轉(zhuǎn)塊 display:block
塊行內(nèi)轉(zhuǎn)行內(nèi)塊 display:inline-block

CSS布局方式

普通流

// 就是默認(rèn)布局 塊級元素自上而下饶深，行內(nèi)元素自左到右
display:block;
display:inline

浮動

脫離標(biāo)準(zhǔn)流 / 浮動在標(biāo)準(zhǔn)流的上方 / 不占用標(biāo)準(zhǔn)流的位置
移動到指定位置
讓多個(gè)盒子水平排成一行
實(shí)現(xiàn)盒子左右對齊
實(shí)現(xiàn)文字圍繞圖片效果

// 特 浮動特性：默認(rèn)相當(dāng)于行內(nèi)塊 display:inline-block 
// 多個(gè)浮動元素的話 自左向右 一次排開 一行顯示不下 就另起一行顯示
float:left/right

// 使用時(shí) 建議使用父布局包裹 父布局處于標(biāo)準(zhǔn)流
* {
    margin:0,
    padding:0
}

浮動元素與父盒子的關(guān)系

子盒子的浮動參照父盒子對齊
不會與盒子的邊框重疊餐曹，也不會超過父盒子的內(nèi)邊距

浮動元素與兄弟盒子的關(guān)系

浮動只會影響后面的盒子，不會影響錢前邊的盒子
如果一個(gè)盒子里面敌厘，有一個(gè)盒子浮動了台猴，建議其他盒子全浮動

清除浮動本質(zhì)

父級沒高度 && 子盒子浮動 && 影響下面布局就需要清除浮動了
清除浮動主要為了解決父級元素因?yàn)樽蛹壴馗右鸬母叨葹?的問題，清除浮動后，父級會根據(jù)浮動的子盒子自動檢測高度饱狂，父級有了高度曹步，就不會影響下面的標(biāo)準(zhǔn)流了。
子元素浮動后嗡官，不屬于標(biāo)準(zhǔn)流箭窜，所以父元素的高度為0

1. 選擇器 { clear:屬性值} clear 清除 / left / right / both 
2. 父級增加 overflow 為 hidden | auto | scroll 都可以實(shí)現(xiàn)

CSS屬性書寫順序

樣式書寫順序

布局定位屬性 display position float
自身屬性 width margin padding border
文本屬性 color font text-align
其他屬性 content cursor border-radius

定位

將盒子定位，標(biāo)準(zhǔn)流在最底層衍腥，浮動的盒子在中間層磺樱，定位的盒子在最上層

定位 = 定位模式(static relative absolute fixed) + 邊偏移（top bottom left right）

static 靜態(tài)定位

靜態(tài)定位是元素的默認(rèn)定位方式從來不用標(biāo)準(zhǔn)流就是
標(biāo)準(zhǔn)流的子盒子總是以父盒子為準(zhǔn)

relative 相對定位

相對于原來在標(biāo)準(zhǔn)流的位置進(jìn)行移動
原來在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有，后面的盒子依然以標(biāo)準(zhǔn)流的方式對待它

absolute 絕對定位

絕對位置是元素以帶有定位的父級元素來移動位置
如果父級有定位婆咸，那么以父級為準(zhǔn)進(jìn)行定位竹捉，一級一級往上找
如果父級沒有定位，那么以瀏覽器為準(zhǔn)進(jìn)行定位
不保留原來的位置（標(biāo)準(zhǔn)流的位置）
子級使用絕對定位父級使用相對定位日常固定搭配

flxed 固定定位

完全脫標(biāo) 完全不占位置

定位改變display屬性

使用dispaly:inline-block 轉(zhuǎn)換為行內(nèi)塊
使用浮動float默認(rèn)轉(zhuǎn)為行內(nèi)塊
絕對定位和固定定位也和浮動類似尚骄，可以轉(zhuǎn)為行內(nèi)塊兒

垂直外邊距

浮動元素块差、絕對定位的元素都不會觸發(fā)外邊距問題

定位模式	是否脫標(biāo)	移動位置基準(zhǔn)	模式轉(zhuǎn)換（行內(nèi)塊）	使用情況
相對定位relative	不脫標(biāo)，占位位置	相對自身位置移動	不能	基本單獨(dú)使用
絕對定位absolute	完全脫標(biāo)倔丈，不占有位置	相對于定位父級移動位置	能	要和定位父級元素配合使用
固定定位fixed	完全脫標(biāo)	相對于瀏覽器的移動位置	能	單獨(dú)使用憨闰，不需要父級

注意

邊偏移需要和定位模式配合使用
top和bottom不要同時(shí)使用
left和right不要同時(shí)使用

CSS高級技巧

元素的顯示和隱藏

display:none 隱藏元素不占有位置
display:blocl 顯示元素
visibility: hiddin 隱藏依然占有位置
visibility: visible 顯示元素
overflow 溢出
- visible 顯示
- hidden 溢出隱藏（超出部分隱藏）
- scroll 不管超出內(nèi)容與否總會顯示滾動條
- auto 超出自動顯示滾動條，不超出不顯示滾動條