CSS 常見小知識點，一網打盡！
BFC
塊狀格式化上下文（block formatting context）簡稱 BFC：是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。
如何觸發(fā)BFC？
根元素（
html）: 最大的BFCposition設置為fixed或者absolutedisplay 設置為
inline-block、table-block、table-captionoverflow的值不為visiblefloat的值不為noneMDN 格式化上下文
BFC的定位方案
內部的box會在 垂直方向上 一個接一個的擺放
屬于同一個BFC中的兩個相鄰元素的 垂直方向上 margin 會重疊
BFC中每個元素的左邊margin會與包含塊的左邊border相接觸
計算BFC的高度時，浮動元素也會參與計算
選擇器權重
Css選擇器優(yōu)先級
!important -> 最高
內聯style -> 1000
id -> 100
class -> 10
tag -> 1
繼承樣式
margin 屬性
margin屬性為給定元素設置所有四個（上下左右）方向的外邊距屬性。普通元素的 百分比margin 都是相對于容器的
寬度計算的絕對定位元素的 百分比margin 相對于其定位祖先元素的寬度計算的
上下margin會重疊：只會發(fā)生在
block元素上，（取最大值）解決重疊方法：
父元素設置
BFC（如overflow：hidden；如position：absolute等）父元素設置
border/padding當 margin 的值為
auto時。瀏覽器會自動選擇一個合適的margin來應用（自動分配剩余空間）需要元素是 塊狀元素
需要元素 設置寬度
margin 可以為 負值
水平居中 簡單版
內聯元素
????text-align:?center;
固定寬度的 塊狀元素
????//?設置?左右?margin?為?auto
????margin:?0?auto;
垂直居中 簡單版
單行文本 垂直居中 ->
line-height多行文本 垂直居中
????//?vertical-align?只對行內元素、表格單元格元素生效
????//?指定?行內元素/表格單元元素?基線相對于?塊狀元素基線的位置
????.center-table?{
????????display:?table;
????}
????.center-table?p?{
????????display:?table-cell;
????????vertical-align:?middle;
????}
元素居中（水平且垂直） 進階
固定寬高 居中
通過 絕對定位 + 負margin
????#main{
????????position:?relative;
????????//?...?略
????}
????#center{
????????position:?absolute;
????????width:?100px;
????????height:?100px;
????????left:?50%;
????????top:?50%;
????????margin:?-50px;
????}
通過 絕對定位 + margin: auto;
????#main{
????????position:?relative;
????????//?...?略
????}
????#center{
????????width:?100px;
????????height:?100px;
????????left:?0;
????????right:?0;
????????top:?0;
????????bottom:?0;
????????margin:?auto;
????????position:?absolute;
????}
不定寬高
transform 居中
????#main{
????????position:?relative;
????????//?...?略
????}
????#center{
????????position:?absolute;
????????left:?50%;
????????top:?50%;
????????transform:?translate(-50%,?-50%);
????}
flex 居中（一）
????#main{
????????display:?flex;?
????????justify-content:?center;?
????????align-items:?center;
????}
flex 居中（二）
????#main{
????????display:?flex;
????????//?...?略
????}
????#center{
????????margin:?auto;
????}
瀏覽器如何解析 css
css 的解析是從上往下
渲染順序也是從上往下
下載和渲染是同時進行的。
css的解析和js的解析是不能同時進行的
css選擇器的解析是從右向左解析（jQuery選擇器解析方式同理）
能先確定元素位置，減少匹配次數
CSS屬性支持判斷
利用屬性覆蓋原理
將高版本瀏覽器支持的特性寫在后面。利用瀏覽器的2個CSS解析特性：
后面的屬性覆蓋前面的屬性
遇到不認識的語法，CSS parser 不解析。
????div?{
????????background:?red;
????????background:?linear-gradient(90deg,?red,?yellow)
????}
使用
.css的@supports來判斷屬性支持情況
????//?支持特定屬性的處理
????@supports?(position:sticky)?{
????????div?{
????????????position:sticky;
????????}
????}
????//?不支持特定屬性：用not處理
????@supports?not?(background:?linear-gradient(90deg,?red,?yellow))?{
????????div?{
????????????background:?red;
????????}
????}
????//?如果是多個css屬性：用and處理
????@supports?(display:-webkit-box)?and?(-webkit-line-clamp:2)?and?(-webkit-box-orient:vertical)?{
????????p?{
????????????display:?-webkit-box;
????????????-webkit-line-clamp:?2;
????????????-webkit-box-orient:?vertical;
????????}
????}
使用 JS 判斷 CSS 屬性支持情況
作為 @supports 的另一種形式出現的，我們可以使用 javascript 的方式來獲得 CSS 屬性的支持情況。
CSS.supports('display', 'flex'); ?必須2個參數， 否則返回false，（目前不支持IE瀏覽器）
使用 JS 庫
modernizr
如果瀏覽器不支持@supports，可以通過調用ele.style來判斷屬性支持情況（庫：Modernizr）
通過判斷 賦值再查詢 來判斷是否支持
????var?root?=?document.documentElement;?//HTML
????for(var?key?in?root.style)?{
????????console.log(key);
????}
????//?將會打印
????//?alignContent
????//?alignItems
????//?alignSelf
????//?alignmentBaseline
????//?all
????//?animation
????//?...
元素可能有 background 屬性，但是不支持具體的 linear-gradinet() 屬性值。這個時候該如何檢測呢？只需要將具體的值賦值給某一元素，再查詢這個屬性值能否被讀取。
????var?root?=?document.documentElement;
????root.style.backgroundImage?=?'linear-gradient(90deg,?#888,?#ccc)';
????if(root.style.backgroundImage)?{
????//?支持
????}?else?{
????//?不支持
????}
簡單的 CSS 屬性支持封裝
通過頁面隱藏的元素進行測試。
????/**
????*?用于簡單的?CSS?特性檢測
????*?@param?[String]?property?需要檢測的?CSS?屬性名
????*?@param?[String]?value?樣式的具體屬性值
????*?@return?[Boolean]?是否通過檢查
????*/
????function?cssTest(property,?value)?{
????????//?CSS?&&?CSS.supports
????????//?CSS.supports('display',?'flex');??必須2個參數，?否則返回false
????????//?用于測試的元素，隱藏在頁面上
????????var?ele?=?document.getElementById('test-display-none');
????????//?只有一個參數的情況
????????if(arguments.length?===?1)?{
????????????if(property?in?ele.style)?{
????????????????return?true;
????????????}
????????//?兩個參數的情況
????????}else?if(arguments.length?===?2){
????????????ele.style[property]?=?value;
????????????if(ele.style[property])?{
????????????????return?true;
????????????}
????????}
????????return?false;
????}
position定位 細節(jié)
position: absolute;
相對于 非static的先輩元素定位
如果先輩元素全是
static，那么相對于視口定位
position：fixed
相對于視口定位
如果先輩元素有
非none的transform屬性，那么相對于該先輩元素定位（不注意容易產生BUG）
visibility:hidden、display:none、z-index=-1、opacity：0
清除浮動
浮動元素脫離了文檔流，不能撐開元素。需要清除浮動。
清除浮動的方法
偽元素 +
clear: both;
????//?全瀏覽器通用的clearfix方案
????//?引入了zoom以支持IE6/7
????.clearfix:after?{
????????display:?table;
????????content:?"?";
????????clear:?both;
????}
????.clearfix{
????????*zoom:?1;
????}
????//?全瀏覽器通用的clearfix方案【推薦】
????//?引入了zoom以支持IE6/7
????//?同時加入:before以解決現代瀏覽器上邊距折疊的問題
????.clearfix:before,
????.clearfix:after?{
????????display:?table;
????????content:?"?";
????}
????.clearfix:after?{
????????clear:?both;
????}
????.clearfix{
????????*zoom:?1;
????}
給父元素設置
overflow: hidden;空白元素 +
clear: both;（和偽元素實現原理一樣，不過 low 很多）
rem em px vw
px：(pixel 像素的縮寫)，相對于顯示器屏幕分辨率em：相對于父元素的font-sizerem：可想成root-em，相對于 root（html）的font-sizevw：相對視口（viewport）的寬度而定的，長度等于視口寬度的 1/100
偽類和偽元素的作用和區(qū)別
偽類：偽類選擇元素基于的是當前元素處于的狀態(tài)，或者說元素當前所具有的特性，功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類（:first-child ? :link ? :visitive ? :hover ? :focus ? :lang）
偽元素：偽元素控制的內容實際上和元素是相同的，但是它本身只是基于元素的抽象，不存在于文檔中，所以叫偽元素（:first-line ?:first-letter ? :befoe ? :after)
最后
如果你覺得這篇內容對你挺有啟發(fā)，我想邀請你幫我三個小忙：
點個「在看」，讓更多的人也能看到這篇內容（喜歡不點在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進技術群，長期交流學習...
關注公眾號「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時聊騷。
