Am I centered yet?
Center me, please!
資訊專欄INFORMATION COLUMN
摘要：與常人的直覺不符的是，實(shí)際上表示視口寬度的，而不是。與類似，表示視口高度的。存在問題它只適用于在視口中居中的場(chǎng)景基于的解決方案伸縮盒是專門針對(duì)這類需求所設(shè)計(jì)的。
相關(guān)基礎(chǔ)知識(shí)
1.內(nèi)部與外部尺寸模型：（w3c草案）親測(cè)google可支持。（http://w3.org/TR/css3-sizing ）
基于原有CSS尺寸特性，可以使CSS更容易描述內(nèi)容自適應(yīng)以及適應(yīng)固定上下文的盒模型： *min-content*:解析為這個(gè)容器內(nèi) 部最大的不可斷行元素的寬度(即最寬的單詞、圖片或具有固定寬度的盒元 素)； *max-content*:類似于我們?cè)谇懊婵吹降膁isplay: inline- block ； *fit-content*:行為與浮動(dòng)元素是相同的 。
2.可控表格布局：
*table-layout* （CSS2.1）屬性: 默認(rèn)值是 auto：其行為模式被稱作自動(dòng)表格布局算法，也就是我們最 為熟悉的表格布局行為 ； *fixed：*固定表格布局算法，這個(gè)值的行為要明顯可控一些。它把更多的控制權(quán)交給了網(wǎng)頁開 發(fā)者，只把較少的控制權(quán)留給渲染引擎 ；常見布局的實(shí)現(xiàn)
1.滿幅背景定寬內(nèi)容：
*常用辦法：*
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}
如何避免使用兩層結(jié)構(gòu)來實(shí)現(xiàn)；
footer {
padding: 1em ;//向下兼容不支持calc的瀏覽器
//max-width: 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
解釋：
CSS 值與單位(第三版)(http://w3.org/TR/css-values-3...定義了 個(gè) calc() 函數(shù)，它允許我們?cè)?CSS 中直接以這種簡(jiǎn)單的算式來指定屬性的值。 在這里可以取代內(nèi)層里margin:auto的效果。
2.水平居中
如果它是一個(gè)行內(nèi)元素， 就對(duì)它的父元素應(yīng)用text-align: center ；
如果它是一個(gè)塊級(jí)元素，就對(duì) 它自身應(yīng)用margin:auto。
3.垂直居中
兩種不太理想的方法：表格布局法、行內(nèi)塊法。這里不詳細(xì)說，想了解可參看：
http://css-tricks.com/centeri... 。
以如下結(jié)構(gòu)為例：
Am I centered yet?
Center me, please!
推薦方法：
基于絕對(duì)定位的解決方案：
對(duì)于固定寬高的元素進(jìn)行居中處理：
main {
position: absolute; top: calc(50% - 3em);
left: calc(50% - 9em); width: 18em;
height: 6em;
}
*解釋*：特點(diǎn)在與解決如何根據(jù)內(nèi)部元素自身的寬高來計(jì)算移動(dòng)比例。
對(duì)于絕大多數(shù) CSS 屬性(包括 margin)來說， 百分比都是以其父元素的尺寸為基準(zhǔn)進(jìn)行解析的 ；
translate() 變形函數(shù)中使用百分比值時(shí)，是以這個(gè)元素自身的寬度和高度 為基準(zhǔn)進(jìn)行換算和移動(dòng)的；
解決方法：
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
存在問題：
需要絕對(duì)定位，而且如果需要居中的元素已經(jīng)在高度上超過了視口，那它的頂部會(huì)被視 口裁切掉
基于適口單位的解決方案：
CSS 值 與 單 位( 第 三 版 )(http://w3.org/TR/css-values-3... relative-lengths)定義了一套新的單位，稱為視口相關(guān)的長(zhǎng)度單位 ：
vw 是與視口寬度相關(guān)的。與常人的直覺不符的是，1vw 實(shí)際上表示 視口寬度的 1%，而不是 100%。
與 vw 類似，1vh 表示視口高度的 1%。
當(dāng)視口寬度小于高度時(shí)，1vmin 等于 1vw，否則等于 1vh。
當(dāng)視口寬度大于高度時(shí)，1vmax 等于 1vw，否則等于 1vh。
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0; transform: translateY(-50%);
}
存在問題：它只適用于在視口中居中的場(chǎng)景
基于flexbox的解決方案：
Flexbox(伸縮盒)(http://w3.org/ TR/css-flexbox)是專門針對(duì)這類需求所設(shè)計(jì)的 。 *解決方法：*
body {
display: flex;
min-height: 100vh;
margin: 0; }
main {
margin: auto;
}
*解釋：* 當(dāng)我們使用 Flexbox 時(shí)，margin: auto 不僅在水平方向上將元 素居中，垂直方向上也是如此。 存在問題：兼容性不如前兩種廣泛。 未來可能將會(huì)普遍試用的方式：盒對(duì)齊模型http://w3.org/TR/css-align-3) 對(duì)于簡(jiǎn)單的居中不需要特殊的布局模式，只需要align-self:center;就夠了。
小科普：W3C標(biāo)準(zhǔn)從提起到正式寫入規(guī)范的流程：
https://www.zhihu.com/questio...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112239.html
摘要：現(xiàn)在回到我們這一章節(jié)的標(biāo)題，將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫基礎(chǔ)庫構(gòu)思為什么要做基礎(chǔ)庫我上一章節(jié)的末尾拋出了幾個(gè)問題假設(shè)你要做一個(gè)游戲單頁面，網(wǎng)頁上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié)，我們都說了哪些內(nèi)容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
摘要：現(xiàn)在回到我們這一章節(jié)的標(biāo)題，將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫基礎(chǔ)庫構(gòu)思為什么要做基礎(chǔ)庫我上一章節(jié)的末尾拋出了幾個(gè)問題假設(shè)你要做一個(gè)游戲單頁面，網(wǎng)頁上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié)，我們都說了哪些內(nèi)容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
摘要：此時(shí)，是不好用的，因?yàn)樗荒軕?yīng)用于清除左側(cè)或右側(cè)的浮動(dòng)。而是傲嬌的小公舉，有她自己的布局規(guī)則內(nèi)部的會(huì)在垂直方向，一個(gè)接一個(gè)地放置。用來在內(nèi)部元素超出時(shí)顯示進(jìn)度條。這樣在頁面高度變化，或者內(nèi)部的高度變化時(shí)，都始終可以保持正常的三行布局。 1.導(dǎo)航條垂直居中 導(dǎo)航條nav 從左到右分為 nav-left , nav-mid , nav-mid ，怎樣達(dá)到從左到右依次排列，且全部垂直居中的效...
摘要：此時(shí)，是不好用的，因?yàn)樗荒軕?yīng)用于清除左側(cè)或右側(cè)的浮動(dòng)。而是傲嬌的小公舉，有她自己的布局規(guī)則內(nèi)部的會(huì)在垂直方向，一個(gè)接一個(gè)地放置。用來在內(nèi)部元素超出時(shí)顯示進(jìn)度條。這樣在頁面高度變化，或者內(nèi)部的高度變化時(shí)，都始終可以保持正常的三行布局。 1.導(dǎo)航條垂直居中 導(dǎo)航條nav 從左到右分為 nav-left , nav-mid , nav-mid ，怎樣達(dá)到從左到右依次排列，且全部垂直居中的效...
閱讀 2820·2021-11-17 09:33
閱讀 3156·2021-10-25 09:44
閱讀 1266·2021-10-11 10:59
閱讀 2479·2021-09-27 13:34
閱讀 2961·2021-09-07 10:19
閱讀 2205·2019-08-29 18:46
閱讀 1594·2019-08-29 12:55
閱讀 982·2019-08-23 17:11
