CSS解析規(guī)則

• 對(duì)空格不敏感，因此每個(gè)樣式后面都加一個(gè)分號(hào)，不然會(huì)把后面的css當(dāng)做整體解析，直到遇到分號(hào)為止
• 最后一個(gè)屬性的分號(hào)是可以不加的
• 當(dāng)遇見不認(rèn)識(shí)的屬性或?qū)傩灾档臅r(shí)候，將忽略此屬性繼續(xù)解析后面的屬性,瀏覽器只會(huì)解析認(rèn)識(shí)的屬性
• 為什么瀏覽器兼容的時(shí)候可以添加前綴?-webkit-box-sizing:border-box box-sizing:border-boxbox-sizeing 復(fù)制代碼

  當(dāng)瀏覽器認(rèn)識(shí) -webkit-box-sizing屬性時(shí)，就會(huì)使用此屬性，如果兩個(gè)屬性都認(rèn)識(shí)，那么box-sizing屬性就會(huì)覆蓋上面的(層疊掉)

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

---

替換元素和非替換元素

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

---

屬性值的計(jì)算規(guī)則

客戶端解析文檔并構(gòu)建文檔樹之后，會(huì)給文檔中的每一個(gè)元素的屬性分配一個(gè)屬性值，這個(gè)屬性值最終可能進(jìn)過指定值、計(jì)算值、使用值、實(shí)際值這四個(gè)步驟

繼承:存在繼承的時(shí)候，子元素繼承的是父元素的計(jì)算值

• 某些屬性會(huì)繼承父元素的值 如color

div{font-size:10px } .child{font-size:120% //實(shí)際計(jì)算后是 10px*120% } 復(fù)制代碼

可繼承或不可繼承都可以通過inherit屬性來繼承父元素的某個(gè)屬性繼承的值是父元素的計(jì)算值

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

---

可視化格式模型

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

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

---

包含塊(重點(diǎn)強(qiáng)調(diào):這只是一個(gè)概念)

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

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

包含塊創(chuàng)建

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

定位值為fixed時(shí)，包含塊有視口創(chuàng)建

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

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

---

控制框(記錄中...)

---

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。