CSS常見問題歸納與整理（收集了30多個）

塊級元素，寬度佔滿窗口，自動換行，inline-block搭配vertical-align實現垂直居中
內聯元素，寬度爲元素本身的寬度，設置width，height屬性無效，line-height調整父元素行高，元素vertical-align實現垂直居中
容器級的標籤，裏面可以放置任何東西；文本級的標籤裏面，只能放置文字、圖片、表單元素
inline-block與block的區別，前者將對象呈現爲inline，讓block元素不再獨佔一行，多個block元素可以同排一行，且元素具有block的屬性，可設置寬高，是block和inline元素的綜合體
img、input、textarea和select等屬於行內替換元素，height/width/padding/margin均可用，效果等於塊元素。當設定了width但未設置height時，img的height會根據比列縮放
一個div中包含一個img和a標籤時佈局的情況是怎麼樣的，考慮vertical-align和line-height的影響：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

文檔流：元素排版佈局過程中，元素會默認自動從左往右，從上往下的流式排列方式。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素
包裹性：block元素不指定width的話，默認是100%，一旦讓該div浮動起來，立刻會像inline元素一樣產生包裹性，寬度會跟隨內容自適應，這也是通常float元素需要手動指定width的原因

relative，相對它自己的正常位置的定位，未脫離文檔流，原來在文檔流中佔據的位置還存在。
left：50px，現在的位置在原來位置左邊的+50px處；
bottom：-20px，現在位置在原來位置下邊的-20px處；
absolute，脫離文檔流，通過top / left來設定位置，這需要判斷父元素是否設置了相對定位，如果沒有，一直往上尋找至body
https://www.cnblogs.com/wlqh/p/6170135.html
fixed，https://www.cnblogs.com/iflygofy/archive/2016/08/08/5748719.html
z-index只能影響設置了position值的元素

float + margin
absolute + margin
聖盃 / 雙飛翼
flex
網格，display爲grid或者inline-grid，屬性grid-template-rows和grid-template-columns分別用於定義網格的行軌道和列軌道，單位fr用於表示軌道尺寸配額，表示按配額比例分配可用空間。更多屬性點擊：https://www.imooc.com/article/28513?block_id=tuijian_wz
垂直三列布局可以用grid-template-rows：100px 1fr 100px；
https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/
響應式，依靠媒體查詢實現，< link media="(max-width:600px)" rel=“stylesheet” href=“mobile.css” >，也是bootstrap柵格系統的底層實現原理
媒體查詢：https://www.cnblogs.com/fozero/p/6096266.html
居中：https://louiszhai.github.io/2016/03/12/css-center/#%E5%85%83%E7%B4%A0%E9%AB%98%E5%BA%A6%E4%B8%8D%E5%AE%9A

可以把 BFC 理解爲一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。

產生條件：浮動 / 絕對定位 / overflow / inline-block(flex)
https://zhuanlan.zhihu.com/p/25321647
詳解：https://segmentfault.com/a/1190000006740129

em，參照父元素
rem，參照html元素（根元素），轉化成的像素大小取決於頁根元素的字體大小，會被瀏覽器中字體大小的設置影響。如html { font-size:16px }，使用rem 單位的主要目的是確保無論用戶如何設置自己的瀏覽器，我們的佈局都能調整到合適大小
視口單位：
vw : 1vw 等於視口寬度的1% ；
vh : 1vh 等於視口高度的1% ；
vmin : 選取 vw 和 vh 中最小的那個；
vmax : 選取 vw 和 vh 中最大的那個

transform，轉換，包括縮放scale(1.2， 0.5)、移動translate(-50%, -50%)、旋轉rotate(45deg)
transition，補間動畫，需要通過hover等僞類來觸發
http://www.cnblogs.com/smyhvae/p/8435182.html
animation，關鍵幀keyframe，動畫屬性。https://blog.csdn.net/mogoweb/article/details/80182338
其中 transform 描述了元素靜態樣式。而transition 和 animation 卻都能實現動畫效果。所以transform 常常配合後兩者使用
二者區別在於：觸發條件不同，transition通常和hover等事件配合使用，由事件觸發，animation則立即播放；循環， animation可以設定循環次數；精確性， animation可以設定每一幀的樣式和時間。transition 只能設定頭尾。 animation中可以設置每一幀需要單獨變化的樣式屬性， transition中所有樣式屬性都要一起變化。
動畫庫：Hover.css / Animate.css
https://www.cnblogs.com/xiaohuochai/p/5347930.html
https://www.cnblogs.com/xiaohuochai/p/5391663.html