資訊專(zhuān)欄INFORMATION COLUMN
摘要：頭部主要內(nèi)容左邊欄右邊欄尾部顯示為頭部主要內(nèi)容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。
====== 樣例代碼不能顯示，請(qǐng)看原文https://magicly.me/css-layout/ ======
布局是CSS中一個(gè)很重要的部分，甚至我覺(jué)得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結(jié)一下使用過(guò)的CSS常用布局，包括水平居中、垂直居中、單列布局、多列布局等，以及最新的flex布局，希望能給前端小伙伴一些幫助，也作為自己的知識(shí)總結(jié)。
在后面的例子中，我特意將各個(gè)塊背景顏色調(diào)出來(lái)方便大家“欣賞”。
水平居中 子元素為inline直接對(duì)父元素設(shè)置
text-align: center
如：
顯示為：
對(duì)子元素設(shè)置左右margin為auto
margin: 0 auto;
如：
magicly
顯示為：
magicly
設(shè)置子元素
display: inline
以及設(shè)置父元素
text-align: center;
如：
顯示為：
設(shè)置父元素的height和line-height相等， 如：
顯示為：
設(shè)置子元素position:absolute 并設(shè)置top、bottom為0（如果還要左右居中的話，可以設(shè)置left: 0; right: 0;），父元素要設(shè)置定位為static以外的值（如relative），margin:auto;
如：
顯示為：
主要有兩種:
header, content, footer寬度相同，有一個(gè)max-width
header和footer占滿瀏覽器100%寬度，content有一個(gè)max-width
第一種：
頭部 內(nèi)容
顯示為：
第二種：
頭部 內(nèi)容
顯示為：
用float將邊欄與主要內(nèi)容拉到一行，然后設(shè)置主要內(nèi)容的margin。
左邊欄:
主要內(nèi)容
右邊欄
主要內(nèi)容
左邊欄:
主要內(nèi)容
右邊欄
主要內(nèi)容
比較經(jīng)典有圣杯布局，以及據(jù)說(shuō)是淘寶UED（玉伯）提出的雙飛翼布局。
圣杯布局頭部 主要內(nèi)容 尾部
顯示為：
傳統(tǒng)的雙飛翼布局不是這樣的， 只是我發(fā)現(xiàn)直接在section用padding也可以達(dá)到效果。
頭部 主要內(nèi)容 尾部
顯示為：
圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。
flex布局flex布局目前已經(jīng)很常用了，瀏覽器支持得也很好，甚至連[React Native]()也是用flex布局的，這么重要想想也覺(jué)得應(yīng)該多帶帶成篇啦。后續(xù)再寫(xiě)，有興趣的可以看看阮老師的下面兩篇文章。
http://www.ruanyifeng.com/blo...
http://www.ruanyifeng.com/blo...
refershttps://zhuanlan.zhihu.com/p/...
http://www.cnblogs.com/star91...
http://www.zhangxinxu.com/wor...絕對(duì)定位-水平垂直居中/
https://www.w3schools.com/htm...
http://coolshell.cn/articles/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112283.html
摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺(jué)自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺(jué)自己知道，可是實(shí)際上自己并不是真的理解了...
摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來(lái)實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。所以我們先來(lái)看看什么是正常的文檔流。 正常文...
摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來(lái)實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。所以我們先來(lái)看看什么是正常的文檔流。 正常文...
摘要：與常人的直覺(jué)不符的是，實(shí)際上表示視口寬度的，而不是。與類(lèi)似，表示視口高度的。存在問(wèn)題它只適用于在視口中居中的場(chǎng)景基于的解決方案伸縮盒是專(zhuān)門(mén)針對(duì)這類(lèi)需求所設(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)固定上下文的盒模型： ...
摘要：常用模式片段之摘要第一次看到這個(gè)字眼是在中，即。之后也見(jiàn)到一些別人的代碼里有，它和頁(yè)面的有什么關(guān)系，以及和有何淵源。以前都見(jiàn)過(guò)這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個(gè)完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質(zhì)...
閱讀 3870·2021-09-10 11:22
閱讀 2325·2021-09-03 10:30
閱讀 3660·2019-08-30 15:55
閱讀 1873·2019-08-30 15:44
閱讀 840·2019-08-30 15:44
閱讀 582·2019-08-30 14:04
閱讀 3042·2019-08-29 17:18
閱讀 1262·2019-08-29 15:04
