資訊專欄INFORMATION COLUMN
摘要：做了后有一些不好的影響。設置值不能正確顯示由于浮動導致父級子級之間設置了屬性的值不能正確表達。只有左側設置為，右側設置，右側將會占據整個右側剩余寬度。
float
做了float后有一些不好的影響。
1、背景不能顯示 由于浮動產生，如果對父級設置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，所以導致CSS背景不能顯示。 2、邊框不能撐開 如上圖中，如果父級設置了CSS邊框屬性（css border），由于子級里使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開。 3、margin padding設置值不能正確顯示 由于浮動導致父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。 故需清除浮動1 、父div設置合適高度
2 、在要做float的div后，可以在html加一個空的div，或者在css在其父元素用after中?content:";，
而后寫
clear:both;（有一些瀏覽器不寫這句就不作用
display:block;
（最好再寫上width:0;height:0;visibility:hidden;保證這個元素看不見，不影響布局）
（建議是用after）
3、父級div定義overflow:hidden（或overflow：auto）
（注意：給導航欄多帶帶每一項加下劃線時不要用3，因為會把下劃線隱藏）
（還有一些奇奇怪怪不好用的方法，比如把父元素也設置浮動，就不提了）
?
div
默認一個div占一行，那么如何讓多個個div同一行？
1、用float
如果分兩列，可以先把兩列的div分別包含在兩個div里面
如果分三列，要都float：left，或者兩個float：left一個float：right；
缺點：如果右邊div沒有設置寬度，右邊div的寬度會根據div里的內容自動調整，不易控制。
2、只有左側div設置為float:left，右側div設置overflow:auto;，右側div將會占據整個右側剩余寬度。
缺點：如果有多個div 比如三個及以上了？
3、使用display的inline-block屬性(不用inline，inline高度不可控)
（會上下錯位，原因：
①同一行的行內元素對齊方式默認是底部對齊，即vertical-align：baseline
②對于內容為空的inline-block元素而言，該元素的基線就是它的margin底邊緣，否則就是元素的內部最后一行內聯元素的基線
解決方案：
改變vertical-align屬性（右側div設置vertical-align: top;）
4、①對于兩個div并排，左邊為絕對寬度，右邊為相對寬度的，需要用到這種布局的情況比較多見，如左邊為導航，右邊為內容的頁面
? ? ? ②左邊固定寬度，使用position:absolute
? ? ? ③右邊margin-left為左邊一塊的固定寬度
?
(此處暫時不考慮彈性盒子，我先練習不用彈性盒子的)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1774.html
摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應。博客園的很多主題也是這樣設計的，我的博客園博客也是右側固定寬度，左側自適應屏幕的布局方式。與配合使用首先我們調整一下結構自適應區固定寬度區代碼這樣實現，的實際寬度就是屏幕寬度。 我在前面有一篇文章《CSS基礎篇--可擴展性的頁面布局》中介紹了如下三種布局方式：1.左右結構，左邊100%；右邊寬度固定2.左右結構，左邊固定，右邊100%...
摘要：所有權保留，請勿用于商業目的。年月日補充寫過這篇博客之后，又陸續讀過幾篇關于布局的文章。移動開發在必要情況的下，可以適當使用來調整字體大小，但做成完全自適應則是一種存在問題的做法。 本文作者: 文藺本文地址: http://www.wemlion.com/2015/a...本文由 @文藺 創作，轉載請保留此聲明。 所有權保留，請勿用于商業目的。 【資源一】基礎知識恕不回顧 基礎知識參考...
摘要：常用模式片段之摘要第一次看到這個字眼是在中，即。之后也見到一些別人的代碼里有，它和頁面的有什么關系，以及和有何淵源。以前都見過這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質...
摘要：常用模式片段之摘要第一次看到這個字眼是在中，即。之后也見到一些別人的代碼里有，它和頁面的有什么關系，以及和有何淵源。以前都見過這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質...
摘要：左右結構，左邊右邊寬度固定代碼代碼左右結構，左邊固定，右邊代碼代碼左中右結構，左邊固定，右邊固定，中間代碼代碼這里是左邊這里是中間這里是右邊 1.左右結構，左邊100%；右邊寬度固定 showImg(http://segmentfault.com/img/bVbSYw); css代碼： #header{height:80px; background:#CCC;} #center{ov...
閱讀 2993·2021-10-13 09:39
閱讀 2694·2021-09-27 13:34
閱讀 2031·2019-08-30 15:55
閱讀 3260·2019-08-30 15:43
閱讀 3631·2019-08-30 11:16
閱讀 1748·2019-08-26 18:28
閱讀 1284·2019-08-26 13:56
閱讀 915·2019-08-26 13:35
