摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警

尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由得感覺眼前一亮，順理成章的聯想到 Word 文檔排版中用到的的左對齊、右對齊和居中對齊，然而很快就失望的發現 CSS 中并不存…

前言 總括： CSS居中一直是一個比較敏感的話題，為了以后開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。 原文地址：CSS居中小談 知乎專欄&&簡書專題：前端進擊者（知乎）&&前端…

如果頁面內容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內容足夠長時，頁腳固定在頁面的最底部。但如果網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。 1. 將內容部分的底部外邊距設為負數 這是個比較主流的用法，把內容部分最小高度設為100%，再利用內容部分的負底部外邊距值來…

浮動。（注意：為了不影響其他元素，別忘了在父級上清除浮動） vw： viewport width。1vw = viewport 寬度的 1%, 100vw = viewport width, 同樣的還有 vh： viewport height。1vw = viewport 高度…

BFC為Block Formatting Context的簡寫，簡稱為“塊級格式化上下文”，BFC為瀏覽器渲染某一區域的機制，CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC。 float的值不為none。 overflow的值為auto,scroll或h…

經典的上-中-下布局。 在上-中-下布局的基礎上，加了左側定寬 sidebar。 左邊是定寬 sidebar，右邊是上-中-下布局。 還是上-中-下布局，區別是 header 固定在頂部，不會隨著頁面滾動。 左側 sidebar 固定在左側且與視窗同高，當內容超出視窗高度時，在…

閱讀目錄

方法一：position 加 margin
方法二： diaplay:table-cell
方法三：position 加 transform
方法四：flex;align-items: center;justify-content: center
方法五：display:flex;margin:auto
方法六：純 position
方法七：兼容低版本瀏覽器，不固定寬高

熟悉水平居中和垂直居中的方法, 不為別的, 就為用的時候能夠信手拈來. 下面直接步入正題.原文：16種方法實現水平居中垂直居中 水平居中 1) 若是行內元素, 給其父元素設置 text-align:center,即可實現行內元素水平居中. 2) 若是塊級元素, 該元素設置 ma…

flex 屬性值的組合，最終情況是不同的.

在 Viewport 等比適配始末 說過使用 Viewport 來實現等比適配的例子，本文詳解等比適配的另一種方式 推導 拿到一個寬度為 vWidth 的視覺稿設設備屏幕寬度為 dWidth 在視覺稿上量得一個元素的寬度為 eleVWidth 那么要實現按照寬度等比適配，在各種設備…

代碼示例來說明 h5 的一些高級 api

本文思維導圖，歡迎補充 本文首發于我的個人網站：http://cherryblog.site 前言 溫馨提示：本文較長，圖片較多，本來是想寫一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實現方法太多，所以本文主要是介紹 flex 布局和 grid 布局，以及 C…

本文講了什么是BFC，BFC的概念是什么；咋樣才能生成新的BFC; BFC的約束規則；BFC在布局中的應用：防止margin重疊； 清除內部浮動；自適應兩（多）欄布局的

本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Flexbox 布局，等等。

一篇文章上手微信小程序

原文地址：11 things I learned reading the flexbox spec 原文作者：David Gilbertson 譯文出自：掘金翻譯計劃 譯者：XatMassacrE 校對者：zaraguo，reid3290 讀完 flexbox 細則之后學到的 …

默認全屏 在 viewport 的 meta 屬性中，添加 viewport-fit=cover 即可。 viewport-fit 默認值為 auto/contain，全屏值為cover，是不是感覺很熟悉？嗯，和 background-size 以及 object-fit…

總結一下左邊固定，右邊自適應的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。

CSS的選擇器除了根據id、class、屬性等從DOM中獲取元素的以外，還有很重要的一類，用來獲取元素的特別內容或特別狀態，這就是 偽元素(Pseudo-elements) 和 偽類(Pseudo-classes)

前幾天在項目開發過程中需要實現一個列表兩端對齊，想著在頁面開發過程中也經常會有需要用到兩端對齊布局的時候，就計劃總結一下常見實現方式，與諸位交流。

css3這個相信大家不陌生了，是個非常有趣，神奇的東西！有了css3，js都可以少寫很多！我之前也寫過關于css3的文章，也封裝過css3的一些小動畫。個人覺得css3不難，但是很難用得好，用得順手，最近我也在過一遍css3的一些新特性（不是全部，是我在工作上常用的，或者覺得有…

css設置垂直居中

CSS中如何完美做到居中，一直是令前端工程師頭疼的問題。最近讀到CSS-TRICKS中的一篇帖子，將居中問題的解決方案策略化。感覺收獲很大，翻譯過來供大家交流學習。 我認為問題的關鍵，不在于怎么做，而在于我們如何從諸多居中方法中選擇出適應當前情景的。 所以接下來，讓我們一起創建…

Flex 布局，也稱為彈性布局，是為了適應不同的屏幕尺寸和不同的設備類型二提出的一種布局方式。

在介紹postion之前，有必要先了解下文檔流。 簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。HTML的布局機制就是用文檔流模型的，即塊元素（block）獨占一行，內聯元素（inline），不獨占一行。 一般使用margin是用來隔開元素與元素的間距；padd…

line-height（行高） : 指的是兩行文字間基線之間的距離，而實際撐開div高度的不是height，而是line-height。 line box : 每一行稱為一條line box，它又是由這一行的許多inline box組成，它的高度可以直接由最大的line-hei…

最簡單實用的 Flex 布局教程，30 分鐘讓你學會 Flex 語法基礎。

圖解 Flexbox

基礎的 CSS 百分比介紹，可以當做一篇 guide

border屬性是在實際的應用中使用頻率比較高的一個屬性，除了作為邊框使用，利用border屬性的一些特征以及表現方式，可以在實現一些比較常見的效果（如等高布局，上下固定內容滾動布局和繪制CSS圖標等），利用css3新增的屬性值（如使用圖片填充邊框）可以實現一些更復雜的效果。 …

CSS 深入理解 vertical-align 和 line-height 的基友關系

如果在閱讀本篇文章之前，浮動讓你感覺到很困惑，那么開始閱讀吧。

普及：瀏覽器的兼容性問題，往往是個別瀏覽器（沒錯，就是那個與眾不同的瀏覽器）對于一些標準的定義不一致導致的。俗話說：沒有IE就沒有傷害。 貼士：內容都是自己總結的，不免會出現錯誤或者bug，歡迎更正和補充，本帖也會不斷更新。 Normalize.css 不同瀏覽器的默認樣式存在差…

和一步聊聊布局神器flexbox。
本文涉及內容如下： flexbox的基本概念、容器屬性學習、項目屬性學習、實戰演練。 flexbox 堪稱布局神器，但屬性實在太多讓人無從下手，因此將自己所學的知識做個總結。
flexbox是Flexible Box的縮寫，譯為彈性布局。fl…

移動端 web 開發技巧的小總結

Grid 布局是網站設計的基礎，CSS Grid 是創建網格布局最強大和最簡單的工具。在本文中，我將盡可能快速地介紹CSS網格的基本知識。我會把你不應該關心的一切都忽略掉了，只是為了讓你了解最基礎的知識。

學習前端方向也有一段時間了，起初做過一些項目，總是發現做完之后自己的邊框會變得比較粗，后面翻閱了部分資料慢慢的才了解了這個問題，大致列舉了幾種解決的辦法。
在window對象中有一個devicePixelRatio屬性，他可以反應css中的像素與設備的像素比。然而1px在不同的…

純 CSS 制作各種圖形 (多圖預警)