Css中部分知識點整理【筆記整理】

CSS中塌陷現象：
兩個盒模型中未設置行內屬性或者浮動 當上方元素指定了margin-bottom ，下方元素指定了margin-top時
這兩個margin就會發生合併，塌陷尺寸是兩個值中較大的一個
發生塌陷現象不止在兄弟元素中出現，父子關係中也會發生，當父級元素沒有設定padding-top或者border-top時（等於0同於沒有設定），子元素margin-top和父級元素的margin-top合併，margin最終取決於最大值

佈局模型
流動模型： 默認狀態下頁面HTML元素是按流動模型佈局網頁內容
特徵：款及元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，默認狀態下塊狀元素寬度100%，也就是每一塊塊狀元素佔據一行空間【div ,p,li,h1,table,ul,hr】
流動模式下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示【span,img,a,input,button,textarea】

浮動模型：任何元素默認狀態下都是不浮動，能夠經過float設定，此時元素會在父級元素內浮動展現
此狀況避免了塊狀元素獨佔一行的狀況，惟一缺點，父級元素的高度沒法根據內容的大小自適應高度，由於設置float以後元素是脫離當前文檔流的

層佈局模型：
層模型主要有三種形式，其中absolute和fixed能夠使元素脫離文檔流

 

用 CSS 隱藏頁面元素有許多種方法

能夠將 opacity 設爲 0、將 visibility 設爲 hidden、將 display 設爲 none 或者將 position 設爲 absolute 而後將位置設到不可見區域

Opacity

該屬性的意思是檢索或設置對象的不透明度當他的透明度爲0的時候,視覺上它是消失了,可是他依然佔據着那個位置,並對網頁的佈局起做用

Visibility
該屬性相似opacity屬性，該屬性值爲hidden的時候，元素將會隱藏，也會佔據着本身的位置，並對網頁的佈局起做用，與 opacity 惟一不一樣的是它不會響應任何用戶交互

Position
該屬性的意義就是把元素脫離文檔流移出視覺區域，添加該屬性後既不會影響佈局，又能讓元素保持能夠操做。應用該屬性後，主要就是經過控制方向（top,left,right,bottom），達到必定的值，離開當前但是頁面。

 

//TODO 

整理 聖盃佈局//CSS3中 display:flex 用法 及圖文示例對比描述等...