CSS解析規則

• 對空格不敏感，因此每個樣式后面都加一個分號，不然會把后面的css當做整體解析，直到遇到分號為止
• 最后一個屬性的分號是可以不加的
• 當遇見不認識的屬性或屬性值的時候，將忽略此屬性繼續解析后面的屬性,瀏覽器只會解析認識的屬性
• 為什么瀏覽器兼容的時候可以添加前綴?-webkit-box-sizing:border-box box-sizing:border-boxbox-sizeing 復制代碼

  當瀏覽器認識 -webkit-box-sizing屬性時，就會使用此屬性，如果兩個屬性都認識，那么box-sizing屬性就會覆蓋上面的(層疊掉)

• 復合屬性border:1px solid #dedede 如果其中有一個值是錯誤的，那么整個屬性都不會解析
• 最后一對css規則的大括號可以不閉合
• 后代選擇器中間必須加空格 div p
• 換行會被當成一個空格 div.box{width:200px}//解析后div .box{ width:200px} 復制代碼
• 關鍵字不可以用引號 color:"orange"
• 多組選擇器中，只要有一個選擇器是錯誤，其他的都不會執行 如:#app 0box
• @import 'style.css'只能寫在樣式表的前面，寫在后面的話會被忽略

---

替換元素和非替換元素

• 替換元素是指瀏覽器根據元素的標簽和屬性來決定元素的具體內容 img:src input:checkbox ...
• 非替換元素是指內容直接顯示在瀏覽器的元素 h1 p span

---

屬性值的計算規則

客戶端解析文檔并構建文檔樹之后，會給文檔中的每一個元素的屬性分配一個屬性值，這個屬性值最終可能進過指定值、計算值、使用值、實際值這四個步驟

繼承:存在繼承的時候，子元素繼承的是父元素的計算值

• 某些屬性會繼承父元素的值 如color

div{font-size:10px } .child{font-size:120% //實際計算后是 10px*120% } 復制代碼

可繼承或不可繼承都可以通過inherit屬性來繼承父元素的某個屬性繼承的值是父元素的計算值

div{width:100px;height:200px;border:1px solid #dedede; } .child{width:50px;height:inherit;border:inherit } 復制代碼

---

可視化格式模型

我們熟知的盒子模型是由自身元素產生的，主要是對width、height、padding、border、margin的解釋，而可視化格式模型規則是將這些盒子按照一定的規則拜訪到頁面上也就是規定每個盒子應該怎么去布局，所以可視化格子模型與一個元素的布局息息相關

• 文檔樹：html中每個元素都是由子元素，祖先元素，兄弟元素等組成，這種結構非常像樹裝
• 視口viewport: 也叫作可視窗口，根據屏幕百分比布局，可視區域改變，布局也會改變。每個頁面只可能有一個可是窗口，并提供滾動條機制，但是iframe可以嵌入多個頁面

---

包含塊(重點強調:這只是一個概念)

元素的位置和尺寸都相對于一個父元素(矩形),那么這個矩形就是一個包含塊。每個元素都會產生一個包含塊，但是這個包含塊是虛無的，只是個概念

• 如div>p>span，div生成一個包含塊來包含p和span,p也會有一個包含塊來包含span,主要作用是給他里面的元素做一個位置上的參照(應該從哪里開始擺放)
• 包含塊不會限制里面元素的大小，若里面的元素超出，則超出的部分溢出,使用overflow:hidden

包含塊創建

根元素的包含塊叫做初始包含塊,具體有客戶端創建

定位值為fixed時，包含塊有視口創建

定位值為relative,static或者沒有設置定位屬性，包含塊由最近的父元素或組件元素創建

定位值為absolute 則包含塊有最近的定位值relative,absolute,fixed創建，如果沒有定位的祖先元素，則包含塊是初始包含塊 5.祖先元素是行內元素時，包含塊取決于父元素或祖元素的direction屬性

---

控制框(記錄中...)

---

格式化上下文BFC/IFC(記錄中...)

總結

以上是生活随笔為你收集整理的CSS核心技术详解-核心概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。