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

Eastboat 發布于2019-05-23 17:34 / 3333人閱讀

摘要：每個頁面只可能有一個可是窗口，并提供滾動條機制，但是可以嵌入多個頁面包含塊重點強調這只是一個概念元素的位置和尺寸都相對于一個父元素矩形那么這個矩形就是一個包含塊。

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(記錄中...)

GPU云服務器云服務器核心技術 linux核心技術 java核心技術大數據核心技術

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7384.html

性能優化

摘要：如果你的運行緩慢，你可以考慮是否能優化請求，減少對的操作，盡量少的操，或者犧牲其它的來換取性能。在認識描述這些核心元素的過程中，我們也會分享一些當我們構建的時候遵守的一些經驗規則，一個應用應該保持健壯和高性能來維持競爭力。一個開源的前端錯誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團隊最近開發了一款前端錯誤收集工具，名叫 frontend-tracker ，這款...

liangzai_cool 2019-08-22 13:45 評論0 收藏0
那些年，我的前端/Java后端書單

摘要：全文為這些年，我曾閱讀深入理解過或正在閱讀學習即將閱讀的一些優秀經典前端后端書籍。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。全文為這些年，我曾閱讀、深入理解過（或正在閱讀學習、即將閱讀）的一些優秀經典前端/Java后端書籍。全文為純原創，且將持續更新，未經許可，不得進行轉載。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。基礎基礎書籍進階進階階段，深入學習的書...

fxp 2019-08-02 16:03 評論0 收藏0
那些年，我的前端/Java后端書單

摘要：全文為這些年，我曾閱讀深入理解過或正在閱讀學習即將閱讀的一些優秀經典前端后端書籍。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。全文為這些年，我曾閱讀、深入理解過（或正在閱讀學習、即將閱讀）的一些優秀經典前端/Java后端書籍。全文為純原創，且將持續更新，未經許可，不得進行轉載。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。基礎基礎書籍進階進階階段，深入學習的書...

Tecode 2019-08-22 18:11 評論0 收藏0
那些年，我的前端/Java后端書單

摘要：全文為這些年，我曾閱讀深入理解過或正在閱讀學習即將閱讀的一些優秀經典前端后端書籍。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。全文為這些年，我曾閱讀、深入理解過（或正在閱讀學習、即將閱讀）的一些優秀經典前端/Java后端書籍。全文為純原創，且將持續更新，未經許可，不得進行轉載。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。基礎基礎書籍進階進階階段，深入學習的書...

VPointer 2019-08-16 12:32 評論0 收藏0
那些年，我的前端/Java后端書單

摘要：全文為這些年，我曾閱讀深入理解過或正在閱讀學習即將閱讀的一些優秀經典前端后端書籍。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。全文為這些年，我曾閱讀、深入理解過（或正在閱讀學習、即將閱讀）的一些優秀經典前端/Java后端書籍。全文為純原創，且將持續更新，未經許可，不得進行轉載。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。基礎基礎書籍進階進階階段，深入學習的書...

idealcn 2019-08-30 15:53 評論0 收藏0