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