小編給大家分享一下CSS中float和margin混合使用的案例,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供廣陵網(wǎng)站建設(shè)、廣陵做網(wǎng)站、廣陵網(wǎng)站設(shè)計、廣陵網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、廣陵企業(yè)網(wǎng)站模板建站服務(wù),10多年廣陵做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。float屬性
float: left | right | none | inherit
當(dāng)然最常用的還是前面兩個:向左浮動和向右浮動
浮動最主要的特點(diǎn):脫標(biāo)。
脫離標(biāo)準(zhǔn)流,處于更加高級的層面,影響父元素和后面元素的布局,這里就不具體介紹了。
margin屬性
這里主要講margin-left和margin-right
margin-left: 設(shè)置元素的左外邊距。
margin-right: 設(shè)置元素的右外邊距。
總的來說,這個兩個屬性的字面理解還是很容易的,但是越簡單的東西越不要小看。
重點(diǎn)
以下代碼:
html:
<div class="box"> <div class="zi_box1">1</div> <div class="zi_box2">2</div> <div class="zi_box3">3</div> <div class="clear"></div> </div>
CSS:
.box { background-color: #555555; width: 600px; height: 200px; } .zi_box1 { float: left; background-color: #c23232; width: 200px; height: 100px; } .zi_box2 { float: left; background-color: chartreuse; width: 200px; height: 100px; } .zi_box3 { float: left; background-color: blue; width: 200px; height: 100px; } .clear { clear: both; }
最后實(shí)現(xiàn)的效果圖:
三個子盒子充滿父盒子,因?yàn)榈麄儗挾瓤梢栽诟负凶永锩鎿伍_。
如果父盒子撐不開呢?
加大一個子盒子的寬度,序號為3的盒子
zi_box3 { width: 300px; }
效果圖如下:
那么第三個盒子則會另外起一行。
結(jié)合margin使用時
在第一代碼的基礎(chǔ)上,增加一個margin值
zi_box1 { margin-left: 20px; }
這時候,由于三個盒子的寬度加上margin值大于父盒子的寬度,所以盒子3就會另起一行
反之,給盒子3設(shè)置一個外邊距的值,盒子1和盒子2不設(shè)置外邊距,是不是盒子3也會另外起一行呢?答案是肯定的,因?yàn)樗麄兊膶挾纫呀?jīng)超過父盒子的值了。
實(shí)現(xiàn)三列布局
在不改變DOM的順序的情況下,使盒子3,盒子1,盒子2的順序呢?是不是就可以充分使用margin這個屬性了。最開始白癡的我(很少練習(xí)布局吧,大神就不要噴我了,我只是個菜鳥)
白癡代碼
.zi_box1 { margin-left: 200px; } .zi_box2 { margin-left: 200px; } .zi_box3 { margin0left: -400px; } //這里很天真的想法,以為每個元素是單獨(dú)行動
這樣寫的效果圖:
我當(dāng)時就傻了,這是什么玩意。
但是在最后的摸索中,我知道原因了,最最最最重要的就是DOM的執(zhí)行順序
造成這樣的原因就是:盒子1先解析,margin-left: 200px,那么這樣盒子3也就去了第二行; 再盒子2解析,margin-left:200px,那么盒子2也去了第二行,因?yàn)榈谝恍幸呀?jīng)有600px這么寬的長度了。最后解析盒子3,margin-left:-400px,盒子向前移動400px,不就造成了這樣的效果圖嘛。
這樣想的,就是指考慮片面的,而不是全局的
實(shí)現(xiàn)三列布局的最終代碼
.zi_box1 { margin-left: 200px; } .zi_box2 { margin-left: 0px; } .zi_box3 { margin0left: -600px; }
效果圖
可以簡單的這樣理解
盒子1向右移動200px,那么盒子2和盒子3也會向右移動200px,具體的效果圖如下
那么盒子3移動到前面去,是不是需要600px的距離啊(是不是很容易懂,嘻嘻),當(dāng)然這只是我的片面理解,也不完全是對的。
那么float: right和margin-right是一樣的道理。
以上是“CSS中float和margin混合使用的案例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文題目:CSS中float和margin混合使用的案例-創(chuàng)新互聯(lián)
本文來源:http://www.muchs.cn/article46/deoehg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、網(wǎng)站策劃、定制網(wǎng)站、云服務(wù)器、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容