資訊專欄INFORMATION COLUMN
摘要：當(dāng)你想要做成這種布局效果的時候紫色框里面的內(nèi)容那樣它是一個列表元素是塊級元素默認(rèn)大小是父元素的寬并且換行如果沒有背景的話那就不用管了可是問題來了它不但有背景而且是根據(jù)文字自適應(yīng)的寬高這就是類型的功能了那么想讓是設(shè)置隱
當(dāng)你想要做成這種布局效果的時候
?
紫色框里面的內(nèi)容那樣
它是一個列表
li元素是塊級元素? 默認(rèn)大小是父元素ul的寬 并且換行
如果li沒有背景的話那就不用管了
可是問題來了它不但有背景 而且是根據(jù)文字自適應(yīng)的寬高
這就是inline-block類型的功能了
那么想讓li是inline-block 設(shè)置float? 隱形改變
可是浮動的話 就不會換行了呀
問題又來了
沒事滴? 給li folat:left? 然后在clear:both 清除浮動不就好了
?
?
?
清除浮動一共四個屬性
clear:both|left|right|none;
我都測試了一下
首先box1 設(shè)置右clear:right 來達(dá)到不在同一行的目的
嗯 難道博主翻車了嗎? 怎么沒有達(dá)到理想的效果呢？？
那么我們把第二個元素box2設(shè)置clear:left; 看看結(jié)果
?
嗯 box1 box2 不在同一行了 實現(xiàn)了目的?
那為什么box1設(shè)置clear:right 不好使呢
因為呢box1 只能通過改變自己的位置來讓自己右邊沒有浮動的元素
就像生活中 你改變不了別人 但是你可以改變自己
但是 box1就算改變了自己位置 box2 還會緊跟著box1的 因為浮動元素都是脫離文檔流的
并且脫離文檔流的理應(yīng)去找脫離文檔流的元素? 因為元素變成了特殊的inline-block類型
有寬高 并且不換行? ?inline 和 block 特征合體? 很牛逼
這里box1? 就算清除右浮動? box2還是會跟著它 最終結(jié)果 box1 box2 box3 還是在一行
ps 可能你會想 那box1 跑到下一行? 讓box2 box3 不動就好了 那不行的? 清除浮動? 不是float:none 都是浮動 并且 在html
中box1? box2 box3 是依次創(chuàng)建的? 憑什么你在我前面? 你以為你是定位呢呢？？瞎TM跑
?
但是box2清除左浮動? 通過改變自身位置 換行
順序還是不變的 box1? box2? box 3??
box3跟著box2? 驗證了前面說的
通過這次理解 對浮動又有了一個深刻的認(rèn)知
?
?
所以你把需要換行的元素 都設(shè)置成clear:both
一點問題都沒有了
左邊不行 右邊? ? 右邊也不行? 那就靠下一個元素
對吧
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1967.html
摘要：關(guān)于內(nèi)聯(lián)元素之前討論的多是塊級元素，而沒有考慮到內(nèi)聯(lián)元素的情況。但巧合的是，在普通流定位中，內(nèi)聯(lián)元素寬度和高度規(guī)則卻和塊級元素絕對定位差不多，都只受內(nèi)容大小影響。 我們知道，元素在沒有設(shè)置寬高的情況下，默認(rèn)的寬高值都為auto。而這個auto到底是如何讓元素自動擁有寬高的呢，也就是說，元素的寬度和高度到底會受到什么因素的影響？本文將通過一個例子來對這一問題一探究竟，HTML結(jié)構(gòu)和初始c...
摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...
摘要：為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點 A + B - 下一個兄弟節(jié)點 A...
摘要：標(biāo)準(zhǔn)文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動浮動的特點脫離標(biāo)準(zhǔn)文檔流，元素一旦脫離標(biāo)準(zhǔn)文檔流脫標(biāo)，后面的元素會占據(jù)浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內(nèi)元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產(chǎn)生字圍效果。 CSS 盒子模型 （點擊查看官方解釋） 實際上網(wǎng)頁中的每一個標(biāo)簽都可以看成一個盒子模型，而這個盒子模型從內(nèi)到外有以下這幾個元素組成 conten...
摘要：標(biāo)準(zhǔn)文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動浮動的特點脫離標(biāo)準(zhǔn)文檔流，元素一旦脫離標(biāo)準(zhǔn)文檔流脫標(biāo)，后面的元素會占據(jù)浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內(nèi)元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產(chǎn)生字圍效果。 CSS 盒子模型 （點擊查看官方解釋） 實際上網(wǎng)頁中的每一個標(biāo)簽都可以看成一個盒子模型，而這個盒子模型從內(nèi)到外有以下這幾個元素組成 conten...
閱讀 3066·2023-04-26 00:23
閱讀 3481·2021-09-13 10:28
閱讀 2260·2021-08-31 14:18
閱讀 2970·2019-08-30 15:54
閱讀 2015·2019-08-30 15:43
閱讀 1383·2019-08-29 16:56
閱讀 2869·2019-08-29 14:16
閱讀 2129·2019-08-28 17:51
