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