資訊專欄INFORMATION COLUMN
摘要：前言本文將帶你重新認識布局，帶你解剖布局原理，前提是你要有基礎本文將解除你在布局方面的疑惑。以下將對布局元素和文檔流進行詳細講解。而且還能保持文檔流，這是其他元素做不到的。
前言
本文將帶你重新認識CSS布局，帶你解剖布局原理，前提是你要有基礎！本文將解除你在布局方面的疑惑。認識每個布局元素，了解他們的特性，你才知道為什么會是這樣的結(jié)果。本文內(nèi)容純屬個人理解，不代表官方。
此文主要為理論部分，實際例子可以看我另外一篇文章 PC端CSS布局匯總
學習CSS布局前你需要了解這些首先了解下盒子模型
上圖是一個盒子模型，每個html標簽都會轉(zhuǎn)化成一個盒子模型，每個盒子都有自己的position、margin、border、padding、width、height，這些屬性決定著盒子的大小和位置。盒子的大小由border、padding、width、height共同決定。盒子的位置是我們接下來要探討的問題。
瀏覽器審查元素都能看到每一個標簽的盒子模型?？春凶幽Ｐ陀行┮⒁獾?/p>
圖中的數(shù)值都是px單位的，其他單位都會換算成px。填橫線-的表示默認值，有可能是0，也有可能是auto；
圖中的藍色區(qū)域820 x 26表示寬度 x 高度，是最終計算出來的實際寬高，而不是css里設置的width和height。如果設置了box-sizing:border-box，系統(tǒng)會自動減去padding和border的大小，計算后的顯示在藍色區(qū)域，這個區(qū)域是實際可用空間。
圖中的position表示top、bottom、left、right的值，定位元素才有這項。
html的標簽結(jié)構(gòu)是屬于樹形結(jié)構(gòu)，轉(zhuǎn)化成盒子模型就變成一個套一個，最外層是document，再往里一層是，里面放置兩個盒子head和body，以此類推。CSS布局就是在探究盒子在父容器（上一級盒子）里的放置位置。
盒子的放置位置與盒子大小、盒子之間的間距有關(guān)，也就是盒子模型上的那幾個屬性有關(guān)。每種標簽對盒子模型的處理方式有些差異，我把這些盒子歸為這幾類：內(nèi)聯(lián)元素、塊級元素、內(nèi)聯(lián)塊元素、表格元素、彈性盒子元素、浮動元素、定位元素。這些元素我統(tǒng)稱他們?yōu)椴季衷亍?/p>
盒子的放置位置還與盒子的排列方式有關(guān)，是從左到右排呢？還是從右到左排呢？是否允許重疊？盒子的排列方式就是所謂的文檔流，文檔流一般分為三種：常規(guī)文檔流、BFC、脫離文檔流。
以下將對布局元素和文檔流進行詳細講解。
布局元素CSS把這些布局元素分為三大類，分別用display、float、position來聲明。其中display用來聲明：內(nèi)聯(lián)元素、塊級元素、內(nèi)聯(lián)塊元素、表格元素、彈性盒子元素。float用來聲明浮動元素。position用來聲明定位元素。這三大類可以混合使用，其中display為必須項，你不設置它也有默認值。
1. 內(nèi)聯(lián)（行內(nèi)）元素display: inline;
寬高大小由子元素決定，不能手動修改寬高，子元素一般放置文本元素，與其他內(nèi)聯(lián)元素并排在同一行
內(nèi)聯(lián)元素不能改變寬高，導致有些屬性無效，比如：width系列、height系列、margin-top、margin-bottom、padding-top、padding-bottom、line-height。
常用的內(nèi)聯(lián)標簽：、、、、
使用內(nèi)聯(lián)元素你可能會遇到這種情況，
內(nèi)聯(lián)元素 內(nèi)聯(lián)元素
內(nèi)聯(lián)元素之間有空白區(qū)域
空白區(qū)域的形成是因為之間有回車，在html中，空格、制表符、回車都屬于空白符，多個空白符都會視為一個空格，空格的大小由父級 解決空白區(qū)域的方案有以下四種 給 將空白符注釋掉 把span排列在同一行，并緊貼在一起 使用浮動float，有些場合不允許使用浮動，這條就不適用 默認高度等于子元素高度，寬充滿父級元素，塊級元素之間縱向排列 常用的塊級標簽： 、 塊級元素之間如果不浮動或定位，永遠是縱向排列，不管寬度多少。 塊級元素寬高默認為auto,有自適應伸縮的特性。例如： 塊級元素的文檔流不被破壞的情況下，寬度為auto時會永遠充滿容器寬度，遇到有東西擋住，文本流會自動往后移，但實際區(qū)域沒變，只是被遮住了?？梢越柚@個特性做圖文排版，或者做自適應寬度布局。注意：塊級元素一旦脫離的文檔流，這個特性將會失效 塊級元素還有另一大特性，文檔流不被破壞的情況下，外邊距margin會自動填充橫向剩余部分 橙色部分表示margin，margin默認是0，卻能充滿剩余部分，這就解釋了為什么塊級元素永遠是縱向排列。如果margin的值設置為auto，它就會左右平分掉，形成了區(qū)塊橫向居中的現(xiàn)象。 塊級元素處理盒子模型較為靈活，通常優(yōu)先使用塊級元素布局，塊級元素無法實現(xiàn)的情況才采用其他元素布局，它擅長于處理自身與父元素和兄弟元素之間的布局，不擅長對子元素布局 與內(nèi)聯(lián)元素一樣，默認寬高由子元素決定，但它可以設置寬高、邊距。內(nèi)聯(lián)塊之間橫向排列 內(nèi)聯(lián)塊元素是內(nèi)聯(lián)元素與塊級元素的結(jié)合體，擁有內(nèi)聯(lián)元素的特和塊級元素的靈活性，但它沒有塊級元素的特性。它也會有元素間出現(xiàn)空白區(qū)域的問題，解決方案一樣。 內(nèi)聯(lián)塊元素有自己的一大特性，就是它可以將自身(包括子元素)當成一個文本元素去操作，像操作文本一樣去操作一塊區(qū)域，如下例子： 給文本設置居中，設置文本向左縮進40px，文字間距30px。這些都是對文字的設置，但內(nèi)聯(lián)塊卻生效了，兩個內(nèi)聯(lián)塊被看成兩個單詞，所以間距才會生效。 有了這個特性，就能完成一些很細微的布局操作，在實際開發(fā)中也是挺常用的，通常被當成一個容器結(jié)合其他元素一起使用。 與標簽 使用CSS定義可以將普通的標簽變成表格元素，tr不能設置width，所以一般不使用tr，也就是CSS中的table-row，所以通常使用table和td，不需要tr，td也是可以平分table寬度的，結(jié)構(gòu)關(guān)系一定要是父子關(guān)系。 子元素并沒有設置寬高，卻能填充高度，平分寬度，這就是表格元素的一大特性。用過table布局的人應該都清楚，如果td內(nèi)容太多，寬度會自動撐開，占用周圍的td寬度，table-cell也一樣，不過不想讓它自動撐開，就在table層設置 表格元素比較擅長于做居中布局，因為table-cell元素支持vertical-align和text-align這兩個屬性，對子元素進行橫向縱向居中，把子類設置為inline-block就可以區(qū)域居中，而且不需要知道子類寬高。 表格元素也可以讓自身橫向居中，設置方式跟塊級元素一樣，設置margin: 0 auto，不同的是表格元素不需要知道寬度。 彈性盒子是CSS3引入布局方式，它將更加有效的對一個容器中的元素進行排列、對齊和分配空白空間。本文章的講解不涉及彈性盒子元素，因為其他布局能做的，彈性盒子元素絕大部分都能做，只是兼容性較差，不適用于PC端，有人已經(jīng)做了詳細講解，推薦看這篇文章 阮一峰Flex布局教程 float不為none的屬于浮動元素 浮動元素強制讓元素向左或向右貼近，如果同一個方向有多個元素，則會橫向排列，并緊貼在一起，若空間不夠，則會換行，如下圖所示。 浮動元素會讓元素脫離文檔流，其他元素將無視浮動元素，把浮動元素的位置給占了，如下例子 脫離文檔流的元素的層級會比較高，會疊在上面。 浮動元素脫離文檔脫離的不夠徹底，屬于部分脫離，可以將它拉回文檔流，讓.box位于.child下面。有兩種方式： 第一種是使用清除浮動clear，有的人可能會在.box上寫clear: both來清除浮動，這樣是可以達到效果，但會引起一個問題，margin-top無效。應該在.box之前插入一個空元素，使用一個空元素專門用來清除浮動，這個空元素可以使用CSS偽元素代替。所以清除浮動的代碼應該是這樣 第二種方式是將浮動元素的父元素轉(zhuǎn)化為BFC，BFC是什么后面會講解，現(xiàn)在先看看實現(xiàn)代碼 一般使用最多的是第一種，因為在空元素設置不會受到任何影響。在PC端清除浮動較為常用，一般會把清除浮動的代碼放在.clearfix上，頁面上需要清除浮動再使用這個class，或者sass繼承。 浮動元素在PC端非常受歡迎，它可以將塊級元素橫向排列。書寫簡單，只要一個float: left就好 浮動元素最大的特點是它可以讓一個元素多帶帶居左或居右，而不影響其他元素。而且還能保持文檔流，這是其他元素做不到的。 position不為static的屬于定位元素。定位元素分為三種：相對定位、絕對定位、固定定位。三種都有top、bottom、left、right、z-index屬性，都是基于某個參照物進行定位，不同的是定位參照物不同和文檔流不同，以下是各自的特點和用法。 相對定位屬于常規(guī)文檔流的，與塊級元素一樣的排列，它的定位參照物是自身，設置left就會向右移，設置bottom會向上移，right和top同理，它不像margin，它位移只對自身有影響，不會影響其他元素，所以可能會導致覆蓋其他元素的現(xiàn)象。相對定位可以用來設置定位參照物，方便絕對定位操作。 絕對定位是脫離文檔流的，而且脫離得很徹底，跟浮動元素不一樣，它無法拉回文檔流，它也屬于BFC。它的定位參照物不固定，如果父元素是個定位元素，就優(yōu)先使用父元素作為定位參照物，不是定位元素就往上一級找，直到檢測到定位元素，如果到達還是沒有，就以瀏覽器第一視口作為定位參照物。 瀏覽器視口指藍色區(qū)域區(qū)域，瀏覽器第一視口指滾動條置頂狀態(tài)下的視口。 固定定位跟絕對定位一樣，唯一的差別是固定定位的定位參照物固定是瀏覽器視口。 絕對定位和固定定位有個特性，設置left和right，會鎖定這兩點之間的空間。如果沒設置width或width: auto，就會填充這個空間。如果設置了width，margin為auto就會生效，會在鎖定空間內(nèi)居中。這個特性在縱向的height、top、bottom會有同樣的效果。 從左到右一個一個盒子以指定間距排列，排不下就跳到下一行繼續(xù)排列。此文檔流的特性將在BFC進行對比詳解。 BFC全稱塊級格式化上下文(Block Formatting Context)，屬于常規(guī)文檔流的改進版，在此文檔流下的盒子將是一個獨立的盒子，什么意思？難道常規(guī)文檔流還能共享盒子不成？還真是了。其實我們用的最多的是BFC，如果你不了解BFC，實際開發(fā)中可能會一不小心用了常規(guī)文檔流，出現(xiàn)了某些的現(xiàn)象會覺得是bug，其實那是文檔流的特性。接下來列舉幾個常規(guī)文檔流現(xiàn)象： 1. 邊距折疊 大多時候，我們要的是30px的間距，但實際卻是20px，那是因為邊距被折疊了，只會取最大的邊距。這種的情況解決方案是把他們放在不同的BFC內(nèi)，這個這樣改 BFC是獨立的盒子，自身的margin不會與其他盒子融合，所以外邊距只會疊加，不會折疊。 2. 邊距側(cè)漏 常規(guī)文檔流里的塊級元素會有這樣的問題 這段代碼應該是把文字把往下移20像素，結(jié)果應該是這樣的 然而并不是，其實結(jié)果是這樣 塊級元素的第一個子元素的margin-top會穿過父元素的屏障，漏出去了，變成是父元素的margin-top。你可能會想到給父元素加一層屏障，設置border-top，但這樣會無故多出一個邊框的空間。最好的方式是把父元素轉(zhuǎn)化為BFC，這樣這樣改 BFC內(nèi)部元素怎么折騰怎么改都不會影響父容器。 BFC除了糾正常規(guī)文檔流的問題外，還有一些對浮動元素的糾正。 3. 清除浮動 還是拿之前浮動元素的例子來講，當時沒講為什么BFC可以清除浮動，現(xiàn)在來講下原理。細心的同學應該可以發(fā)現(xiàn)，.child有設置寬高，可身為父元素的.parent卻沒有高度，所以才導致.box無視浮動元素占了它的位置。如果.parent能得到子元素的高度就符合了常規(guī)文檔流，就達到清除浮動浮動的效果。給.parent設置為BFC就能做到 因為BFC的子元素怎么變化都不會影響父容器，子元素做了浮動，那是子元素的事，你所占有的寬高還是會把父容器撐開。 4. 防止文字環(huán)繞 有些場合并不想讓它文字環(huán)繞，如下代碼 把.text設置為BFC可以防止文字環(huán)繞 以上是BFC常見的運用場合，可能有些人沒遇到這些場合，因為你們正無形中在使用BFC，上面的例子都是用overflow:hidden設置BFC，其實設置方式有很多，滿足以下條件的任何一條都是BFC
float不為none
position 的值不為 static 或者 relative
display 的值為 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個
overflow 的值不為 visible
除了BFC外其他都是常規(guī)文檔流。 脫離文檔流是基于BFC進行改造去除一些常規(guī)文檔流的東西。脫離文檔流又分為兩種：部分脫離和完全脫離。 部分脫離是對常規(guī)文檔流的排列順序進行改造，不再只是從左到右排列，還可以從右到左，也可以一左一右，為了不影響常規(guī)文檔流的排列，默認會脫離文檔流，但還是會受父容器束縛。屬于部分分離的是float:left和float:right。 完全脫離是完全放棄常規(guī)文檔流，不受任何束縛，根據(jù)left、right、top、bottom去定位。屬于完全脫離的是position:absolute和position:fixed。 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111916.html 摘要：因為端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對端的布局進行講解，以下代碼只寫關(guān)鍵代碼。為了提高網(wǎng)頁性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。
前言
此文章是 解剖CSS布局原理 的續(xù)集，之前那篇文章講的都是理論，本文章講具體的實例，根據(jù)自己對布局的理解與開發(fā)經(jīng)驗分為以下幾類。
因為PC端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對P... 摘要：前端日報精選未來布局之星更快地構(gòu)建使用預解析以及深入的虛擬原理原來與是這樣阻塞解析和渲染的怎樣把網(wǎng)站升級到中文視頻從談函數(shù)式與響應式編程葉俊星系列三之煙花效果實現(xiàn)掘金的故事解剖表情動圖的構(gòu)成設計系列傳統(tǒng)遞歸和尾調(diào)用的實現(xiàn)前端架構(gòu)經(jīng)
2017-09-24 前端日報
精選
未來布局之星Grid更快地構(gòu)建DOM: 使用預解析, async, defer 以及 preload_JavaScri... 摘要：方法中，，當為，并且不等于上一次的值，會增加的計數(shù)。鎖住當前沒有人在處理任務處理完畢之后將置為首先，采用同步機制，通過有沒有人在處理任務。說在前面
本次推出 Android Architecture Components 系列文章，目前寫好了四篇，主要是關(guān)于 lifecycle，livedata 的使用和源碼分析，其余的 Navigation， Paging library，Room，Wo... 摘要：我把這個領域的東西寫成了一個系列，以后還會繼續(xù)完善下去安全一同源策略與跨域安全二攻擊安全三攻擊
上文說完了CSRF攻擊，本文繼續(xù)研究它的兄弟XSS攻擊。
什么是XSS攻擊
XSS攻擊全名（Cross-Site-Script）跨域腳本攻擊，為了跟CSS（Cascading-Style-Sheet）區(qū)分開來，所以縮寫是XSS。
XSS攻擊的原理
上一節(jié)說道的CSRF攻擊是利用的是偽請求，這... 摘要：我把這個領域的東西寫成了一個系列，以后還會繼續(xù)完善下去安全一同源策略與跨域安全二攻擊安全三攻擊
上文說完了CSRF攻擊，本文繼續(xù)研究它的兄弟XSS攻擊。
什么是XSS攻擊
XSS攻擊全名（Cross-Site-Script）跨域腳本攻擊，為了跟CSS（Cascading-Style-Sheet）區(qū)分開來，所以縮寫是XSS。
XSS攻擊的原理
上一節(jié)說道的CSRF攻擊是利用的是偽請求，這... 閱讀 487·2021-11-22 12:05 閱讀 1547·2021-11-17 09:33 閱讀 3594·2021-11-11 16:54 閱讀 2687·2021-10-14 09:49 閱讀 4069·2021-09-06 15:01 閱讀 1837·2019-08-29 17:23 閱讀 710·2019-08-29 14:09 閱讀 730·2019-08-29 12:28的font-size決定。
注意：只有內(nèi)聯(lián)(內(nèi)聯(lián)塊)與內(nèi)聯(lián)(內(nèi)聯(lián)塊)之間的空白符才會形成一個空格，文本元素(除空白符)也是屬于內(nèi)聯(lián)元素。
設置font-size: 0;，在上把font-size設置回去
display: block;
、 to
、 ~
、 ~
浮動元素
塊級元素塊級元素
display: inline-block;
.parent {
width: 400px;
height: 80px;
font-size: 0; /* 防止空白區(qū)域 */
text-align: center;
text-indent: -40px; /* 文本縮進 */
letter-spacing: 30px; /* 文字之間的間距 */
background: #ccc;
}
.box {
display: inline-block;
width: 100px;
height: 80px;
background: #fcc;
font-size: 16px;
}
display: table; /*對應
*/
display: table-cell; /*對應
*/
系列一樣，
的寬度會充滿 ,而
寬度會平分 ， 內(nèi)容超出寬度默認會撐開。當然你也可以設置讓它不撐開。
1111
2222
3333
.parent {
display: table;
width: 200px;
height: 40px;
background: #ccc;
}
.child {
display: table-cell;
}
.child1 { background: #0cc; }
.child2 { background: #c0c; }
.child3 { background: #cc0; }
table-layout: fixed;
float: none; /* 取消浮動 */
float: left; /* 左浮動 */
float: right; /* 右浮動 */
浮動元素
浮動元素
塊級元素.child{
float: left;
width: 100px;
height: 40px;
}
.child1 {background: #fcc;}
.child2 {background: #ccf;}
.box{
height: 60px;
background: #ccc;
}
.parent:after {
content: "";
display: table;
clear: both;
}
.parent {
overflow: hidden;
}
position: static; /* 取消定位 */
position: relative; /* 相對定位 */
position: absolute; /* 絕對定位 */
position: fixed; /* 固定定位 */
box1
box2.box1 {
height: 60px;
background: #fcc;
margin-bottom: 10px;
}
.box2 {
height: 60px;
background: #ccf;
margin-top: 20px;
}
box1
box2.wrap {
overflow: hidden;
}
.box1 {
height: 60px;
background: #fcc;
margin-bottom: 10px;
}
.box2 {
height: 60px;
background: #ccf;
margin-top: 20px;
}
box
.parent {
height: 60px;
background: #ccf;
}
.box {
margin-top: 20px;
}
.parent {
height: 60px;
background: #ccf;
overflow: hidden;
}
浮動元素
浮動元素
塊級元素.child{
float: left;
width: 100px;
height: 40px;
}
.child1 {background: #fcc;}
.child2 {background: #ccf;}
.box{
height: 60px;
background: #ccc;
}
.parent {
overflow: hidden;
}
這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本.float {
width: 50px;
height: 50px;
float: left;
background: #fcc;
}
.text {
height: 100px;
background: #ccf;
}
.text {
height: 100px;
background: #ccf;
overfloat: hidden;
}
相關(guān)文章
PC端CSS布局匯總
2017-09-24 前端日報
Android livedata 源碼解剖
web安全三，XSS攻擊
web安全三，XSS攻擊
發(fā)表評論
0條評論
李文鵬
男|高級講師
TA的文章
閱讀更多
Java設計模式之（五）——代理模式
Python數(shù)據(jù)分析入門：比特幣價格漲幅趨勢分布
【正點原子FPGA連載】第三十六章雙路高速DA實驗 -摘自【正點原子】新起點之FPGA開發(fā)指南_V2
Vultr第19個機房墨西哥城數(shù)據(jù)中心路由去程回程和綜合速度測試
5G/NR 網(wǎng)絡切片之NSSAI包含模式
【CSS】BFC - 塊級格式化上下文
論一種基于JS技術(shù)的WEB前端動態(tài)生成框圖的方法
解剖CSS布局原理
最新活動
<
閱讀需要支付1元查看
