2. 程式人生 > >css整理之-----------佈局相關

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

阿新 • • 發佈：2021-02-19

文件流

　　文件流指的是元素排版佈局過程中，元素會預設自動從左往右，從上往下的流式排列方式佈局，文件流可以分為定位流、浮動流、普通流三種

普通流(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頁面渲染的一種機制、有一套渲染規則，規定內部元素如何佈局。也可以理解為這個獨立的區域與外部之間的元素互不影響。

BFC佈局規則

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

BFC 作用

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

注意：一個BFC的範圍包含建立該上下文元素的所有子元素，但不包括建立了新BFC的子元素的內部元素。即一個元素不能同時存在於兩個BFC中。因為如果一個元素能夠同時處於兩個BFC中，那麼就意味著這個元素能與兩個BFC中的元素髮生作用，就違反了BFC的隔離作用。

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原理都類似都有自己的佈局規則。

具體Demo

Flex 彈性盒子佈局

採用Flex佈局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱”專案”。這種佈局就是上面說的FFC。

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

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

容器屬性

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

專案屬性

六個屬性分別為：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            （常見8、9寸電腦使用)

1024*768            （常見10.4、12.1、14.1、15寸電腦使用）

1280*1024            (常見14.1、15寸電腦使用）

1280*800            （常見10.8、12.1、15.4寸電腦使用）

1280*854            （不常見)

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

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

1440*900            （蘋果17寸電腦)

1600 * 900            (非主流)

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

1600*1024            (不常見)

1680*1050            (常見15.4、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     }

&n

相關推薦

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

文件流 　　文件流指的是元素排版佈局過程中，元素會預設自動從左往右，從上往下的流式排列方式佈局，文件流可以分為定位流、浮動流、普通流三種 普通流(Normal flow) 在常規流中，盒一個接著一個排列，也就是常說的預設的文件流 在塊級格式化上下文裡面， 它們豎著排列 在行內格式化上下文裡面， 它們橫著排列

css整理之-----------選擇器

背景 在20年初時總感覺自己的css 不夠用，想把css 相關的東西整理下，去年一整年都比較忙，忙著就到2021了，今天趁著有點時間，先從選擇器開始吧。   聽說圖片可以提升顏值....  選擇器 CSS選擇器用於選擇你想要的元素的樣式。簡單劃分為簡單選擇器、組合選擇器、偽類選擇器。 簡

CSS之屬相相關

-c 瀏覽器 爸爸 區分 允許 參考 遮蓋 解決問題 利用 一、padding與margin 　　 　　　　padding：就是內邊距的意思，它是邊框到內容之間的距離 　　　　另外padding的區域是有背景顏色的。並且背景顏色和內容的顏色一樣。也就是說background

css三欄佈局之左右寬度固定中間自適應

1.利用浮動解決三欄佈局問題 <style lang=""> html *{ padding: 0; margin:0; } .layout .left-center-right>div { h

大資料入門之hadoop相關概念知識點整理

Hadoop是一個開源框架，允許使用簡單的程式設計模型在跨計算機叢集的分散式環境中儲存和處理大資料。它的設計是從單個伺服器擴充套件到數千個機器，每個都提供本地計算和儲存。今天整理了一些關於hadoop相關概念的知識點，覺得文章有用的小夥伴可以直接收藏~ 我還是要推薦下我自己建立的大資料資料分享群14

CSS響應式佈局之清除浮動

在很多前端工程師日常工作中，在使用到float佈局時，總會有一點需要去考慮的，那就是清除浮動問題。 那這個問題怎麼會發生的呢？ 當float子元素高度超出父級元素高度時，父級元素高度塌縮，因為float元素脫離文件流，其佈局不受父元素控制 這個情況如下圖所示 高度塌

CSS——響應式佈局之@media

語法格式： @media mediaType and|not|only (media feature) { /CSS-Code;/ } 如： @media screen and (max-width: 300px) { body

前端面試題答案整理之CSS

介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？ css盒子模型由4部分構成，margin、border、padding、content。標準盒子模型和IE盒子模型的主要區別是在於width的計算，標準盒子模型中，width = cont

css之flex相關屬性集合以及應用

由於在日常工作中使用css或者bootstrap的柵格系統已經能很好的滿足業務需求，所以一直以來對css3的彈性佈局不是很感冒。近日有幸在一篇文章中領略了flex的魅力--簡潔優雅。隨試之。 /*容器*/ .flex{ displa

CSS基礎之盒子模型及浮動佈局

盒模型      談到盒模型，有經驗的小夥伴一定滾瓜爛熟，無非就是 內容(content)、填充(padding)、邊框(border)、邊界(margin)； 這些屬性我們可以把它轉移到我們日常生活中

Docker整理之Docker映象相關(三)

在主機上列出映象 docker images：     $ sudo docker images     REPOSITORY       TAG      IMAGE ID      CREATED      VIRTUAL SIZE     training/webap

css重構之旅（一）

rdquo lan set 變化 部分 網站 一個 寬度 lang css重構之旅 >前言： 今年我大一,馬上就要大二了。從高三畢業暑假到大學的這一年馬上過去，馬上迎來大二生活.學習前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術，反而忽略了最基礎

saltstack模塊之pkg相關模塊

saltstack 模塊 pkg 軟件 pkgs pkg.install 1、pkg.available_version模塊pkg.available_version: 返回所查詢軟件包可供安裝或更新的最新版本。如果指定多個軟件包，則以字典的形式輸出返回結果。[[email 

saltstack模塊之file相關模塊

saltstack file 模塊 文件 操作 1、file.access模塊file.access：測試salt進程是否有對指定文件的對應訪問權限。[[email protected]/* */ ~]# salt ‘*‘ file.access /etc/passwd f s

Linux之時間相關操作20170607

命令集 linux fail max deb 推薦 time_t 利用 ucc 一、Linux常用時間相關函數 -asctime,ctime,getttimeofday,gmtime,localtime,mktime,settimeofday,time

盒子模型之margin相關技巧！

images 水平居中 color 邊框 pan 一個 ron ble 居中 廢話不多說，直接進入主題，margin相關技巧。 1、設置元素水平居中：margin:x auto; 2、margin負值讓元素位移及邊框合並。 外邊距合並 　　指當兩個垂直外邊距相遇時，它們將形

連表查詢（3）之根據相關條件，查詢另外一個表或多個表的某字段

兩個 mode object 添加 就會 resultmap control var 多個 1、送檢單位 代理商是從代理商表中取得數據 銷售人員從銷售表中取得數據 說一個簡單的思路： sql語句找到連接兩個表的條件，把另外一個表要用到的字段 寫一個 <re

算法整理之動態規劃

getc 程序 span bool hid 沒有 知識 else 多好 我現在介紹的這個版本，是從算法愛好者中看到的一個別人的漫畫版本。題目：有一座高度是10級臺階的樓梯，從下往上走，每跨一步只能向上1級或者2級臺階。要求用程序來求出一共有多少種走法。比如，每次走1級臺階，

CSS學習之首頁簡單布局

black jquery ack span lac 跟著 code header contain 作為一個PHPer，在前端方面javascript、jquery這些的日常工作還搞的定。可對於div+css這些東西可就頭疼了，所以現在開始學習CSS 跟著燕十八的教程開始從

CSS屬性之display

css idt 列表 table lex list style footer 文檔 display屬性用來設置或檢索對象是否及如何顯示 默認值：對於HTML文檔來說，這取決於你使用的標簽 繼承性：不繼承 支持動畫：否 display是一個很重要的CSS屬性，設定的值會對一個