成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

html+css 布局篇

caozhijian / 2539人閱讀

摘要：做了后有一些不好的影響。設(shè)置值不能正確顯示由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了屬性的值不能正確表達(dá)。只有左側(cè)設(shè)置為，右側(cè)設(shè)置，右側(cè)將會(huì)占據(jù)整個(gè)右側(cè)剩余寬度。

float

做了float后有一些不好的影響。

1、背景不能顯示 由于浮動(dòng)產(chǎn)生，如果對(duì)父級(jí)設(shè)置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級(jí)不能被撐開，所以導(dǎo)致CSS背景不能顯示。 2、邊框不能撐開 如上圖中，如果父級(jí)設(shè)置了CSS邊框?qū)傩裕╟ss border），由于子級(jí)里使用了float屬性，產(chǎn)生浮動(dòng)，父級(jí)不能被撐開，導(dǎo)致邊框不能隨內(nèi)容而被撐開。 3、margin padding設(shè)置值不能正確顯示 由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)。特別是上下邊的padding和margin不能正確顯示。 故需清除浮動(dòng)

1 、父div設(shè)置合適高度

2 、在要做float的div后，可以在html加一個(gè)空的div，或者在css在其父元素用after中?content:";，

而后寫

clear:both;（有一些瀏覽器不寫這句就不作用

display:block;

（最好再寫上width:0;height:0;visibility:hidden;保證這個(gè)元素看不見，不影響布局）

（建議是用after）

3、父級(jí)div定義overflow:hidden（或overflow：auto）

（注意：給導(dǎo)航欄多帶帶每一項(xiàng)加下劃線時(shí)不要用3，因?yàn)闀?huì)把下劃線隱藏）

（還有一些奇奇怪怪不好用的方法，比如把父元素也設(shè)置浮動(dòng)，就不提了）

?

div

默認(rèn)一個(gè)div占一行，那么如何讓多個(gè)個(gè)div同一行？

1、用float

如果分兩列，可以先把兩列的div分別包含在兩個(gè)div里面

如果分三列，要都float：left，或者兩個(gè)float：left一個(gè)float：right；

缺點(diǎn)：如果右邊div沒(méi)有設(shè)置寬度，右邊div的寬度會(huì)根據(jù)div里的內(nèi)容自動(dòng)調(diào)整，不易控制。

2、只有左側(cè)div設(shè)置為float:left，右側(cè)div設(shè)置overflow:auto;，右側(cè)div將會(huì)占據(jù)整個(gè)右側(cè)剩余寬度。

缺點(diǎn)：如果有多個(gè)div 比如三個(gè)及以上了？

3、使用display的inline-block屬性(不用inline，inline高度不可控)

（會(huì)上下錯(cuò)位，原因：

①同一行的行內(nèi)元素對(duì)齊方式默認(rèn)是底部對(duì)齊，即vertical-align：baseline

②對(duì)于內(nèi)容為空的inline-block元素而言，該元素的基線就是它的margin底邊緣，否則就是元素的內(nèi)部最后一行內(nèi)聯(lián)元素的基線

解決方案：

改變vertical-align屬性（右側(cè)div設(shè)置vertical-align: top;）

4、①對(duì)于兩個(gè)div并排，左邊為絕對(duì)寬度，右邊為相對(duì)寬度的，需要用到這種布局的情況比較多見，如左邊為導(dǎo)航，右邊為內(nèi)容的頁(yè)面

? ? ? ②左邊固定寬度，使用position:absolute

? ? ? ③右邊margin-left為左邊一塊的固定寬度

?

(此處暫時(shí)不考慮彈性盒子，我先練習(xí)不用彈性盒子的)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1774.html

相關(guān)文章

  • CSS基礎(chǔ)篇--頁(yè)面實(shí)現(xiàn)兩列布局，一列固定寬度，一列寬度自適應(yīng)方法

    摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應(yīng)。博客園的很多主題也是這樣設(shè)計(jì)的，我的博客園博客也是右側(cè)固定寬度，左側(cè)自適應(yīng)屏幕的布局方式。與配合使用首先我們調(diào)整一下結(jié)構(gòu)自適應(yīng)區(qū)固定寬度區(qū)代碼這樣實(shí)現(xiàn)，的實(shí)際寬度就是屏幕寬度。 我在前面有一篇文章《CSS基礎(chǔ)篇--可擴(kuò)展性的頁(yè)面布局》中介紹了如下三種布局方式：1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定2.左右結(jié)構(gòu)，左邊固定，右邊100%...

    RichardXG 評(píng)論0 收藏0

  • 關(guān)于移動(dòng)端 rem 布局的一些總結(jié)

    摘要：所有權(quán)保留，請(qǐng)勿用于商業(yè)目的。年月日補(bǔ)充寫過(guò)這篇博客之后，又陸續(xù)讀過(guò)幾篇關(guān)于布局的文章。移動(dòng)開發(fā)在必要情況的下，可以適當(dāng)使用來(lái)調(diào)整字體大小，但做成完全自適應(yīng)則是一種存在問(wèn)題的做法。 本文作者: 文藺本文地址: http://www.wemlion.com/2015/a...本文由 @文藺 創(chuàng)作，轉(zhuǎn)載請(qǐng)保留此聲明。 所有權(quán)保留，請(qǐng)勿用于商業(yè)目的。 【資源一】基礎(chǔ)知識(shí)恕不回顧 基礎(chǔ)知識(shí)參考...

    2shou 評(píng)論0 收藏0

  • JS / CSS 常用實(shí)戰(zhàn)代碼片段

    摘要：常用模式片段之摘要第一次看到這個(gè)字眼是在中，即。之后也見到一些別人的代碼里有，它和頁(yè)面的有什么關(guān)系，以及和有何淵源。以前都見過(guò)這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個(gè)完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質(zhì)...

    sutaking 評(píng)論0 收藏0

  • JS / CSS 常用實(shí)戰(zhàn)代碼片段

    摘要：常用模式片段之摘要第一次看到這個(gè)字眼是在中，即。之后也見到一些別人的代碼里有，它和頁(yè)面的有什么關(guān)系，以及和有何淵源。以前都見過(guò)這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個(gè)完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質(zhì)...

    stackfing 評(píng)論0 收藏0

  • CSS基礎(chǔ)篇--可擴(kuò)展性的頁(yè)面布局

    摘要：左右結(jié)構(gòu)，左邊右邊寬度固定代碼代碼左右結(jié)構(gòu)，左邊固定，右邊代碼代碼左中右結(jié)構(gòu)，左邊固定，右邊固定，中間代碼代碼這里是左邊這里是中間這里是右邊 1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定 showImg(http://segmentfault.com/img/bVbSYw); css代碼： #header{height:80px; background:#CCC;} #center{ov...

    CarlBenjamin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<