摘要：當(dāng)元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。詳見浮動與清除浮動浮動相關(guān)知識屬性的取值元素向左浮動。是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。

這些個知識點(diǎn)是我個人認(rèn)為的，下面我們就來看看這些個知識點(diǎn)。

使用Flex

只需要在父盒子設(shè)置：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

父盒子設(shè)置:display:relative

Div 設(shè)置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

父盒子設(shè)置:display:table-cell; text-align:center;vertical-align:middle;

Div 設(shè)置: display:inline-block;vertical-align:middle;

position 的常見四個屬性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。

static:默認(rèn)位置。 在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，從而可以用Position:static取消繼承，即還原元素定位的默認(rèn)值。設(shè)置為 static 的元素，它始終會處于頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。

relative:相對定位。 相對定位是相對于元素默認(rèn)的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置為基準(zhǔn)偏移，而不管其他元素會怎么 樣。注意 relative 移動后的元素在原來的位置仍占據(jù)空間。

absolute:絕對定位。 設(shè)置為 absolute 的元素，如果它的 父容器設(shè)置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會依據(jù)父容器進(jìn)行偏移。如果其父容器沒有設(shè)置 position 屬性，那么偏移是以 body 為依據(jù)。注意設(shè)置 absolute 屬性的元素在標(biāo)準(zhǔn)流中不占位置。

fixed:固定定位。 位置被設(shè)置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標(biāo)。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 為依據(jù)的。 注意設(shè)置 fixed 屬性的元素在標(biāo)準(zhǔn)流中不占位置。

position新增的屬性“sticky”：
設(shè)置了sticky的元素，在屏幕范圍（viewport）時該元素的位置并不受到定位影響（設(shè)置是top、left等屬性無效），當(dāng)該元素的位置將要移出偏移范圍時，定位又會變成fixed，根據(jù)設(shè)置的left、top等屬性成固定位置的效果。

sticky屬性有以下幾個特點(diǎn)：

該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。

當(dāng)元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。亦即如果你設(shè)置了top: 50px，那么在sticky元素到達(dá)距離相對定位的元素頂部50px的位置時固定，不再向上移動。

比較蛋疼的是這個屬性的兼容性還不是很好，目前仍是一個試驗性的屬性，并不是W3C推薦的標(biāo)準(zhǔn)。它之所以會出現(xiàn)，也是因為監(jiān)聽scroll事件來實(shí)現(xiàn)粘性布局使瀏覽器進(jìn)入慢滾動的模式，這與瀏覽器想要通過硬件加速來提升滾動的體驗是相悖的。

詳見：https://blog.csdn.net/sinat_37390744/article/details/77479239

float屬性的取值：

left：元素向左浮動。

right：元素向右浮動。

none：默認(rèn)值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。

浮動的特性：

浮動元素會從普通文檔流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進(jìn)行環(huán)繞。

不管一個元素是行內(nèi)元素還是塊級元素，如果被設(shè)置了浮動，那浮動元素會生成一個塊級框，可以設(shè)置它的width和height，因此float常常用于制作橫向配列的菜單，可以設(shè)置大小并且橫向排列。

浮動元素的展示在不同情況下會有不同的規(guī)則：

浮動元素在浮動的時候，其margin不會超過包含塊的padding。PS：如果想要元素超出，可以設(shè)置margin屬性

如果兩個元素一個向左浮動，一個向右浮動，左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。

如果有多個浮動元素，浮動元素會按順序排下來而不會發(fā)生重疊的現(xiàn)象。

如果有多個浮動元素，后面的元素高度不會超過前面的元素，并且不會超過包含塊。

如果有非浮動元素和浮動元素同時存在，并且非浮動元素在前，則浮動元素不會高于非浮動元素

浮動元素會盡可能地向頂端對齊、向左或向右對齊

重疊問題

行內(nèi)元素與浮動元素發(fā)生重疊，其邊框，背景和內(nèi)容都會顯示在浮動元素之上

塊級元素與浮動元素發(fā)生重疊時，邊框和背景會顯示在浮動元素之下，內(nèi)容會顯示在浮動元素之上

clear屬性
clear屬性：確保當(dāng)前元素的左右兩側(cè)不會有浮動元素。clear只對元素本身的布局起作用。
取值：left、right、both

為什么要清除浮動，父元素高度塌陷
解決父元素高度塌陷問題：一個塊級元素如果沒有設(shè)置height，其height是由子元素?fù)伍_的。對子元素使用了浮動之后，子元素會脫離標(biāo)準(zhǔn)文檔流，也就是說，父級元素中沒有內(nèi)容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。

方法1：給父級div定義 高度
原理：給父級DIV定義固定高度（height），能解決父級DIV 無法獲取高度得問題。
優(yōu)點(diǎn)：代碼簡潔
缺點(diǎn)：高度被固定死了，是適合內(nèi)容固定不變的模塊。（不推薦使用）

方法二：使用空元素，如

方法三：讓父級div 也一并浮起來
這樣做可以初步解決當(dāng)前的浮動問題。但是也讓父級浮動起來了，又會產(chǎn)生新的浮動問題。 不推薦使用

方法四：父級div定義 display:table
原理：將div屬性強(qiáng)制變成表格
優(yōu)點(diǎn)：不解
缺點(diǎn)：會產(chǎn)生新的未知問題。（不推薦使用）

方法五：父元素設(shè)置 overflow：hidden、auto；
原理：這個方法的關(guān)鍵在于觸發(fā)了BFC。在IE6中還需要觸發(fā) hasLayout（zoom：1）
優(yōu)點(diǎn)：代碼簡介，不存在結(jié)構(gòu)和語義化問題
缺點(diǎn)：無法顯示需要溢出的元素（亦不太推薦使用）

方法六：父級div定義 偽類:after 和 zoom

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {zoom:1;}

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點(diǎn)：結(jié)構(gòu)和語義化完全正確,代碼量也適中，可重復(fù)利用率（建議定義公共類）
缺點(diǎn)：代碼不是非常簡潔（極力推薦使用）

經(jīng)益求精寫法

.clearfix:after {
    content:”200B”; 
    display:block; 
    height:0; 
    clear:both;
 }
.clearfix { *zoom:1; } 照顧IE6，IE7就可以了

詳細(xì)關(guān)于浮動的知識請參看這篇文章：[
http://luopq.com/2015/11/08/C...](http://luopq.com/2015/11/08/C...

定義：BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨(dú)立的渲染區(qū)域，只有 Block-level box 參 與， 它規(guī)定了內(nèi)部的 Block-level Box 如何布局，并且與這個區(qū)域外部毫不相干。

BFC布局規(guī)則
BFC 就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

BFC這個元素的垂直方向的邊距會發(fā)生重疊，垂直方向的距離由margin決定，取最大值

BFC 的區(qū)域不會與浮動盒子重疊（清除浮動原理）。

計算 BFC 的高度時，浮動元素也參與計算。

哪些元素會生成 BFC

根元素

float 屬性不為 none

position 為 absolute 或 fixed

display 為 inline-block， table-cell， table-caption， flex， inline-flex

overflow 不為 visible

設(shè)置CSS盒模型為標(biāo)準(zhǔn)模型或IE模型。標(biāo)準(zhǔn)模型的寬度只包括content，二IE模型包括border和padding
box-sizing屬性可以為三個值之一：

content-box，默認(rèn)值，只計算內(nèi)容的寬度，border和padding不計算入width之內(nèi)

padding-box，padding計算入寬度內(nèi)

border-box，border和padding計算入寬度之內(nèi)

px 像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算 機(jī)系統(tǒng)的數(shù)字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。
em 是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置， 則相對于瀏覽器的默認(rèn)字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 為元素設(shè)定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。

有四種：內(nèi)聯(lián)(元素上的style屬性)、內(nèi)嵌(style標(biāo)簽)、外鏈(link)、導(dǎo)入(@import)
link和@import的區(qū)別：

link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。

link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。

link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

link支持使用Javascript控制DOM去改變樣式；而@import不支持。

流式布局
使用非固定像素來定義網(wǎng)頁內(nèi)容，也就是百分比布局，通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進(jìn)
行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。

響應(yīng)式開發(fā)
利用CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局。

超小屏幕(移動設(shè)備) 768px 以下

小屏設(shè)備 768px-992px

中等屏幕 992px-1200px

寬屏設(shè)備 1200px 以上

由于響應(yīng)式開發(fā)顯得繁瑣些，一般使用第三方響應(yīng)式框架來完成，比如 bootstrap 來完成一部分工作，當(dāng)然也 可以自己寫響應(yīng)式。

區(qū)別

關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容，以及這種不同造成的工作流程的差異

優(yōu)雅降級一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。。

漸進(jìn)增強(qiáng)針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。

區(qū)別：

優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

漸進(jìn)增強(qiáng)則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要

降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時保證其根基處于安全地帶

display:none

元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導(dǎo)致瀏覽器的重排和重繪。

不會觸發(fā)其點(diǎn)擊事件

visibility:hidden

和display:none的區(qū)別在于，元素在頁面消失后，其占據(jù)的空間依舊會保留著，所以它只會導(dǎo)致瀏覽器重繪而不會重排。

無法觸發(fā)其點(diǎn)擊事件

適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景

opacity:0

將元素的透明度設(shè)置為0后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。

和visibility:hidden的一個共同點(diǎn)是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁面中。

可以觸發(fā)點(diǎn)擊事件

設(shè)置height，width等盒模型屬性為0

簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。

如果元素設(shè)置了border，padding等屬性不為0，很顯然，頁面上還是能看到這個元素的，觸發(fā)元素的點(diǎn)擊事件完全沒有問題。如果全部屬性都設(shè)置為0，很顯然，這個元素相當(dāng)于消失了，即無法觸發(fā)點(diǎn)擊事件。

這種方式既不實(shí)用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的，比如jquery的slideUp動畫，它就是設(shè)置元素的overflow:hidden后，接著通過定時器，不斷地設(shè)置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom為0，從而達(dá)到slideUp的效果。

其他腦洞方法

設(shè)置元素的position與left，top，bottom，right等，將元素移出至屏幕外

設(shè)置元素的position與z-index，將z-index設(shè)置成盡量小的負(fù)數(shù)

圖片塊狀化 - 無基線對齊：img { display: block; }

圖片底線對齊：img { vertical-align: bottom; }

行高足夠小 - 基線位置上移：.box { line-height: 0; }

“nth-child”選擇的是父元素的子元素，這個子元素并沒有指定確切類型，同時滿足兩個條件時方能有效果：其一是子元素，其二是子元素剛好處在那個位置；“nth-of-type”選擇的是某父元素的子元素，而且這個子元素是指定類型。參考

參考

所謂“寬度分離”原則，就是CSS中的width屬性不與影響寬度的 pading/border（有時候包括margin）屬性共存，width 獨(dú)立占用一層標(biāo)簽，而padding、border、margin 利用流動性在內(nèi)部自適應(yīng)呈現(xiàn)。

舉例：元素邊框內(nèi)有20px的留白問題

.father { width:102px; }
.son {
    border:1px solid;
    padding:20px;
}

超越!important：max-width會覆蓋width，而且這種覆蓋是超級覆蓋，比!important的權(quán)重還要高

超越最大：min-width覆蓋max-width，此規(guī)則發(fā)生在min-width和max-width沖突的時候，如下：

.container{
    min-width:1400px;
    max-width:1200px;
}

使用 height + overflow:hidden 實(shí)現(xiàn)會比較生硬。好的方式是使用max-height。

.element{
    max-height:0;
    overflow:hidden;
    transition: height .25s;
}
.element.active {
    max-height: 666px; /* 一個足夠大的最大高度值 */
}

需求：圖片還沒加載時就把 alt 信息呈現(xiàn)出來。

實(shí)現(xiàn)：圖片沒有 src ，因此，::before和::after 可以生效，我們可以通過 content 屬性呈現(xiàn) alt 屬性值。

img::after{
    /* 生成 alt 信息 */
    content: attr(alt);
    /* 尺寸和定位 */
    postion:absolute; bottom: 0;
    width:100%;
    background-color:rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .2s;
}
img:hover::after{
    transform: translateY(0);
}    

當(dāng)我們給圖片添加src 屬性時圖片從普通元素變成替換元素，原本還支持的::before和::after 此時全部無效，此時再hover圖片，是不會有任何信息出現(xiàn)的。

img:hover{
    content: url(laugh-tear.png);
}

content 改變的僅僅是視覺呈現(xiàn)，當(dāng)我們鼠標(biāo)右鍵或其他形式保存這張圖片時，所保存的還是原來 src 對應(yīng)的圖片。這種方法還可以用在官網(wǎng)標(biāo)志上。

由于使用 conetnt 生成圖片無法設(shè)置圖片的尺寸，要想在移動端使用該技術(shù)，建議使用SVG圖片。

我們使用 content生成的文本是無法選中、無法復(fù)制的，好像設(shè)置了user-select:none聲明一般，而普通元素的文本可以被輕松選中。content生成的文本無法被屏幕閱讀設(shè)備讀取，也無法被搜索引擎抓取，因此，千萬不要自以為是地把重要的文本信息使用 content屬性生成， 因為這對可訪問性和SEO都不友好，content屬性只能用來生成一些無關(guān)緊要的內(nèi)容，如裝飾性圖形或者序號之類；同樣，也不要擔(dān)心原本重要的文字信息會被 content替換，替換的僅僅是視覺層。

content 動態(tài)生成值無法獲取。content是一個非常強(qiáng)大的CSS屬性，其中一個強(qiáng)大之處就是計數(shù)器效果，可以自動累加數(shù)值。如：

.total::after{
    content: counter(icecream);
}

示例：https://jsrun.net/6VyKp

正在加載中...

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: "...A..A.";
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

在線demo

margin:auto的填充規(guī)則：

如果一側(cè)定值，一側(cè)auto，則 auto 為剩余空間大小

如果兩側(cè)均是 auto，則平分剩余空間

塊級元素垂直方向居中：
使用 writing-mode 改變文檔流方向

.father{
    height200px;
    writing-mode:vertical-lr;
}
.son{
    height:100px;
    margin:auto;
}

絕對定位下的margin:auto居中

.father{
    width:300px; height150px;
    position: relative;
}
.son{
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    width:200px; height:100px;
    margin:auto;
}

在線效果：https://demo.cssworld.cn/4/3-5.php

thin：薄薄的，等同于1px

medium：（默認(rèn)值）薄厚均勻，等同于3px

thick：厚厚的，等同于4px

border-color 默認(rèn)顏色就是color色值，就是當(dāng)沒有指定border-color顏色值的時候，會使用當(dāng)前元素的color計算值作為邊框色，如：

.box{
    border: 10px solid;
    color: red;
}

此時，.box 元素的 10px 邊框顏色就是紅色。

(持續(xù)更新)

歡迎在留言區(qū)補(bǔ)充或提出不同的見解

延伸閱讀

你必須知道的HTTP基本概念

JavaScript ES5+ES6繼承總結(jié)

JavaScript面向?qū)ο蠛诵闹R歸納