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

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

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

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

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

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

經(jīng)典的上-中-下布局。 在上-中-下布局的基礎(chǔ)上，加了左側(cè)定寬 sidebar。 左邊是定寬 sidebar，右邊是上-中-下布局。 還是上-中-下布局，區(qū)別是 header 固定在頂部，不會(huì)隨著頁面滾動(dòng)。 左側(cè) sidebar 固定在左側(cè)且與視窗同高，當(dāng)內(nèi)容超出視窗高度時(shí)，在…

閱讀目錄

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

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

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

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

代碼示例來說明 h5 的一些高級(jí) api

本文思維導(dǎo)圖，歡迎補(bǔ)充 本文首發(fā)于我的個(gè)人網(wǎng)站：http://cherryblog.site 前言 溫馨提示：本文較長，圖片較多，本來是想寫一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實(shí)現(xiàn)方法太多，所以本文主要是介紹 flex 布局和 grid 布局，以及 C…

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

本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)lexbox 布局，等等。

一篇文章上手微信小程序

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

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

總結(jié)一下左邊固定，右邊自適應(yīng)的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。

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

前幾天在項(xiàng)目開發(fā)過程中需要實(shí)現(xiàn)一個(gè)列表兩端對(duì)齊，想著在頁面開發(fā)過程中也經(jīng)常會(huì)有需要用到兩端對(duì)齊布局的時(shí)候，就計(jì)劃總結(jié)一下常見實(shí)現(xiàn)方式，與諸位交流。

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

css設(shè)置垂直居中

CSS中如何完美做到居中，一直是令前端工程師頭疼的問題。最近讀到CSS-TRICKS中的一篇帖子，將居中問題的解決方案策略化。感覺收獲很大，翻譯過來供大家交流學(xué)習(xí)。 我認(rèn)為問題的關(guān)鍵，不在于怎么做，而在于我們?nèi)绾螐闹T多居中方法中選擇出適應(yīng)當(dāng)前情景的。 所以接下來，讓我們一起創(chuàng)建…

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

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

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

最簡單實(shí)用的 Flex 布局教程，30 分鐘讓你學(xué)會(huì) Flex 語法基礎(chǔ)。

圖解 Flexbox

基礎(chǔ)的 CSS 百分比介紹，可以當(dāng)做一篇 guide

border屬性是在實(shí)際的應(yīng)用中使用頻率比較高的一個(gè)屬性，除了作為邊框使用，利用border屬性的一些特征以及表現(xiàn)方式，可以在實(shí)現(xiàn)一些比較常見的效果（如等高布局，上下固定內(nèi)容滾動(dòng)布局和繪制CSS圖標(biāo)等），利用css3新增的屬性值（如使用圖片填充邊框）可以實(shí)現(xiàn)一些更復(fù)雜的效果。 …

CSS 深入理解 vertical-align 和 line-height 的基友關(guān)系

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

普及：瀏覽器的兼容性問題，往往是個(gè)別瀏覽器（沒錯(cuò)，就是那個(gè)與眾不同的瀏覽器）對(duì)于一些標(biāo)準(zhǔn)的定義不一致導(dǎo)致的。俗話說：沒有IE就沒有傷害。 貼士：內(nèi)容都是自己總結(jié)的，不免會(huì)出現(xiàn)錯(cuò)誤或者bug，歡迎更正和補(bǔ)充，本帖也會(huì)不斷更新。 Normalize.css 不同瀏覽器的默認(rèn)樣式存在差…

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

移動(dòng)端 web 開發(fā)技巧的小總結(jié)

Grid 布局是網(wǎng)站設(shè)計(jì)的基礎(chǔ)，CSS Grid 是創(chuàng)建網(wǎng)格布局最強(qiáng)大和最簡單的工具。在本文中，我將盡可能快速地介紹CSS網(wǎng)格的基本知識(shí)。我會(huì)把你不應(yīng)該關(guān)心的一切都忽略掉了，只是為了讓你了解最基礎(chǔ)的知識(shí)。

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

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