css整理之-----------佈局相關

時間 2021-02-19

標籤 css html git github iphone 佈局 flex spa 3d code 欄目 CSS 简体版

原文原文鏈接

文檔流

　　文檔流指的是元素排版佈局過程當中，元素會默認自動從左往右，從上往下的流式排列方式佈局，文檔流能夠分爲定位流、浮動流、普通流三種css

普通流(Normal flow)

在常規流中，盒一個接着一個排列，也就是常說的默認的文檔流
在塊級格式化上下文裏面，它們豎着排列
在行內格式化上下文裏面，它們橫着排列
當position爲static或relative，而且float爲none時會觸發常規流
對於靜態定位(static positioning)，position: static，盒的位置是常規流佈局裏的位置
對於相對定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right屬性定義。即便有偏移，仍然保留原有的位置，其它常規流不能佔用這個位置
能夠經過display 改變元素類型

浮動(Floats)

左浮動元素儘可能靠左、靠上，右浮動同理
這致使常規流環繞在它的周邊，除非設置 clear 屬性
浮動元素不會影響塊級元素的佈局
但浮動元素會影響行內元素的佈局，讓其圍繞在本身周圍，撐大父級元素，從而間接影響塊級元素佈局
最高點不會超過當前行的最高點、它前面的浮動元素的最高點
不超過它的包含塊，除非元素自己已經比包含塊更寬
行內元素出如今左浮動元素的右邊和右浮動元素的左邊，左浮動元素的左邊和右浮動元素的右邊是不會擺放浮動元素的

絕對定位(Absolute positioning)

絕對定位方案，盒從常規流中被移除，不影響常規流的佈局
它的定位相對於它的包含塊，相關CSS屬性：top、bottom、left、right；
若是元素的屬性position爲absolute或fixed，它是絕對定位元素
對於position: absolute，元素定位將相對於上級元素中最近的一個relative、fixed、absolute，若是沒有則相對於body

塊格式化上下文（BFC）

　　BFC(Block formatting context)直譯爲"塊級格式化上下文"。是用於佈局塊級盒子的一塊渲染區域，它是一個獨立的渲染區域、容器，簡單的能夠理解把BFC理解爲是css頁面渲染的一種機制、有一套渲染規則，規定內部元素如何佈局。也能夠理解爲這個獨立的區域與外部之間的元素互不影響。html

BFC佈局規則

內部元素中的塊級元素 Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由外邊距margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)，即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算（浮動的元素會被父級計算高度）。

BFC 做用

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。git

注意：一個BFC的範圍包含建立該上下文元素的全部子元素，但不包括建立了新BFC的子元素的內部元素。即一個元素不能同時存在於兩個BFC中。由於若是一個元素可以同時處於兩個BFC中，那麼就意味着這個元素能與兩個BFC中的元素髮生做用，就違反了BFC的隔離做用。github

BFC運用

清除內部浮動，形成的高度坍塌（產生一個新的BFC時，浮動元素的高度也參與計算）
防止邊距摺疊
佈局

BFC建立

根元素（<html>）
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 爲 absolute 或 fixed）
行內塊元素（元素的 display 爲 inline-block）
表格單元格（元素的 display 爲 table-cell，HTML表格單元格默認爲該值）
表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
匿名錶格單元格元素（元素的 display 爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot 的默認屬性）或 inline-table）
overflow 計算值(Computed)不爲 visible 的塊元素
display 值爲 flow-root 的元素
contain 值爲 layout、content 或 paint 的元素
彈性元素（display 爲 flex 或 inline-flex 元素的直接子元素）
網格元素（display 爲 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中（標準變動，Chrome bug）。

除了BFC 還有IFC、GFC、FFC原理都相似都有本身的佈局規則。iphone

Flex 彈性盒子佈局

採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱」容器」。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱」項目」。這種佈局就是上面說的FFC。佈局

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。flex

項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。spa

容器屬性3d

六個屬性分別爲：flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-contentcode

項目屬性

六個屬性分別爲：order，flex-grow，flex-shrink，flex-basis，flex，align-self

Grid 網格佈局

將網頁劃分紅一個個網格，定義行、列能夠任意組合不一樣的網格，作出各類各樣的佈局，這種佈局就是上面說的GFC。

Grid 佈局與 Flex 佈局有必定的類似性，均可以指定容器內部多個項目的位置。可是，它們也存在重大區別。 Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，能夠看做是一維佈局。Grid 佈局則是將容器劃分紅"行"和"列"，產生單元格，而後指定"項目所在"的單元格，能夠看做是二維佈局。

css中的px

css 中的px是一個相對邏輯單位，相對的是設備像素比(DPR) ，其中DPR 能夠經過window.devicePixelRatio，簡單的能夠理解爲使用多少物理像素繪製單個CSS邏輯像素。

window.devicePixelRatio DPR = 物理像素(設備像素) / 邏輯像素(css像素/設備獨立像素) dips

CSS中的 1px 並不等於設備的1px

從iphone4開始，推出了所謂的Retina屏（一種新型高分辨率屏），分辨率提升了一倍，變成640*960，但屏幕尺寸卻沒變化，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，1個CSS像素是等於4個物理像素的。

對於桌面設備，一個css邏輯像素一般就等同於物理像素，不用考慮縮放問題。

css 是一個相對單位，是一個邏輯像素相對於設備像素
pc端默認一個像素等於一個物理設備上的像素
分辨率越高顯示的圖像越清晰，由於有更多的點來描述這個圖像
用多少個物理像素渲染1個css 邏輯像素，不少概念都是高分屏出來以後爲了解決佈局、顯示體驗的問題提出的解決方案，以前都是一個css 邏輯像素顯示一個物理像素

備註：dpr 涉及到的相關概念比較多可自行查找如css像素、設備像素比dpr等

常見分辨率

屏幕分辨率是指縱橫向上的像素點數，單位是px。顯示分辨率就是屏幕上顯示的像素個數，分辨率160×128的意思是水平方向含有像素數爲160個，垂直方向像素數128個。屏幕尺寸同樣的狀況下，分辨率越高，顯示效果就越精細和細膩。

1024*600 （常見八、9寸電腦使用)

1024*768 （常見10.四、12.一、14.一、15寸電腦使用）

1280*1024 (常見14.一、15寸電腦使用）

1280*800 （常見10.八、12.一、15.4寸電腦使用）

1280*854 （不常見)

1366*768 （常見15.2寸電腦使用)（主流）

1440*1050 (常見1五、16.1寸電腦使用)

1440*900 （蘋果17寸電腦)

1600 * 900 (非主流)

1600*1200 (常見1五、16.1寸電腦使用)

1600*1024 (不常見)

1680*1050 (常見15.四、20寸電腦使見)

1920*1080 (主流)

1920*1200 (常見20寸電腦使見)

 1 @media (min-width: 1024px){
 2      body{font-size: 18px}
 3     } /*>=1024的設備*/
 4 
 5     @media (min-width: 1100px) {
 6      body{font-size: 20px}
 7     } /*>=1100的設備*/
 8     
 9     @media (min-width: 1280px) {
10      body{font-size: 22px;}
11     } /*>=1280的設備*/
12 
13     @media (min-width: 1366px) {
14      body{font-size: 24px;}
15     }  
16 
17     @media (min-width: 1440px) {
18      body{font-size: 25px !important;}
19     } 
20 
21     @media (min-width: 1680px) {
22      body{font-size: 28px;}
23     }
24     
25     @media (min-width: 1920px) {
26      body{font-size: 33px;}
27     }

@media (min-width: 1024px){  body{font-size: 18px}  } /*>=1024的設備*/  @media (min-width: 1100px) {  body{font-size: 20px}  } /*>=1100的設備*/  @media (min-width: 1280px) {  body{font-size: 22px;}  } /*>=1280的設備*/  @media (min-width: 1366px) {  body{font-size: 24px;}  }  @media (min-width: 1440px) {  body{font-size: 25px !important;}  }  @media (min-width: 1680px) {  body{font-size: 28px;}  }  @media (min-width: 1920px) {  body{font-size: 33px;}  }