CSS核心技術詳解-核心概念

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

---

屬性值的計算規則

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

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

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

   div{
       font-size:10px
   }
   .child{
       font-size:120%  //實際計算後是 10px*120%
   }
   複製代碼

2. 可繼承或不可繼承均可以經過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

包含塊建立

1. 根元素的包含塊叫作初始包含塊,具體有客戶端建立
2. 定位值爲fixed時，包含塊有視口建立
3. 定位值爲relative,static或者沒有設置定位屬性，包含塊由最近的父元素或組件元素建立
4. 定位值爲absolute 則包含塊有最近的定位值relative,absolute,fixed建立，若是沒有定位的祖先元素，則包含塊是初始包含塊 5.祖先元素是行內元素時，包含塊取決於父元素或祖元素的direction屬性

---

控制框(記錄中...)

---

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