資訊專欄INFORMATION COLUMN
摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因為浮動會導致元素脫離文檔流，所以下面的元素會占據浮動元素原來的位置。代碼左浮動實現兩列布局絕對定位實現兩列布局這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右的就能實現布局。
因為最近心血來潮，就總結了一下css中的幾種常見的多列布局。
兩列自適應布局
兩列自適應布局算是css布局里面最基礎的一種布局了，不少網站在使用。
這種布局通常是左側固定，右邊自適應，當然也有反過來的，道理一樣，這里有好幾種方法。
(張鑫旭老師的博客是左邊流式布局，右邊固定寬度）
左浮動+margin
因為浮動會導致元素脫離文檔流，所以下面的元素會占據浮動元素原來的位置。 這個時候只要對右邊元素設置margin-left:左邊div寬度 就可以實現自適應布局。
代碼:左浮動實現兩列布局
絕對定位實現兩列布局
這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右div的margin-left就能實現布局。
代碼:絕對定位實現兩列布局
flex實現兩列布局
flex布局一直挺好用，無奈兼容性捉急，ie10+才支持。 注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。 flex布局默認項目是主軸為水平方向，最主要的是flex屬性。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。 大概就是給左邊的div一個固定值，然后給右邊設置flex:auto;來實現兩列布局。 這里不多對flex布局介紹，有興趣的可以看一下
阮一峰老師的這篇博客:flex布局
這里是代碼鏈接:flex布局實現兩列布局
calc實現兩列布局
這是css3里面的新屬性，兼容性還可以，在ie9+、FF4.0+、Chrome19+、Safari6+都得到了支持。 通過calc可以使用百分比、em、px和rem單位值計算出其寬度或者高度，這樣就不用考慮div值到底是多少。所以可以對右邊div設置width:calc(100%-100px);來實現自適應布局。
代碼鏈接:calc實現兩列布局
浮動+margin負值來實現
這是之前寫ife任務的時候在一篇博客上看到的。 實現方法是給右邊的div外面再套上一個父div，然后讓父div的寬度設為100%。 對父div和左邊的div都設置左浮動，再讓左div的margin-left:-100%,右div設置margin-left:左div的寬度。 這樣就實現了自適應布局，當然左右div的前后順序要反過來。
具體看代碼:margin負值實現自適應
三列自適應布局
除了常見的兩列布局，我們也經常能夠見到三列布局，左右固定，中間自適應。
（這里只是拿這張圖舉個例子，w3school官網是三列固定布局）
浮動實現三列布局
這個類似兩列布局的浮動，對左右div分別設置左右浮動，中間div設置margin-left和margin-right來實現，當然在html中的順序應該是左右中。
代碼鏈接：浮動實現三列布局
margin負值實現三列布局
原理同margin負值實現兩列布局，不多說了。
直接上代碼:margin負值實現三列布局
flex實現三列布局
和flex兩列布局一個原理，對兩邊設置flex:0 0 100px,中間設置flex:auto。
代碼代碼：flex實現三列布局
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111357.html
摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現今自己了解的居中布局方法作個小總結。水平居中行內元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點進行實現。 前言 居中布局，是前端頁面最常見的一種布局需求。剛開始學習前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現今自己了解的居...
摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...
摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...
摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...
閱讀 1961·2021-09-09 09:33
閱讀 1107·2019-08-30 15:43
閱讀 2644·2019-08-30 13:45
閱讀 3297·2019-08-29 11:00
閱讀 845·2019-08-26 14:01
閱讀 3558·2019-08-26 13:24
閱讀 471·2019-08-26 11:56
閱讀 2682·2019-08-26 10:27
