.content
flex：1 充滿剩余空間，形成自適應效果，不設置的話默認為內容寬度
資訊專欄INFORMATION COLUMN
CSS-Layout
旨在打造詳盡的前端布局代碼學習庫（自從用了框架開發，CSS生疏了不少，所以開這個庫練練手）
SF不能正確解析含有中文的網址，所以某些預覽鏈接無法跳轉，請訪問我的博客閱讀此文
子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。
方案選擇基本思路：
子元素為
行內元素：對父元素設置text-align:center;
定寬塊狀元素: 設置左右margin值為auto;
不定寬塊狀元素: 設置子元素為display:inline,然后在父元素上設置text-align:center;
通用方案: flex布局，對父元素設置display:flex;justify-content:center;
常用方法舉例：
NOTE:為了統一展示效果，在以下實例代碼中對父子元素設置了固定寬高，實際可以不設置，由子元素內容來控制其寬度
方法一：text-align + inline-block
設置：對父元素設置text-align:center(將會對行內元素起作用)，子元素設置display:inline-block（兼容IE6、7 時，替換為display:inline;zoom:1;）;
優點：兼容性良好
缺點： 需要額外代碼修復因繼承父元素的text-align:center對子元素內容排列造成的影響，如需要添加.child{text-align:left}
方法二：table + margiin
設置：對子元素設置display:table(此元素會作為塊級表格來顯示，元素表現類似block，但是寬度跟隨內容寬度)（兼容IE6、7 時，替換div結構為table結構即可）;
優點： 只需要對子元素進行設置
缺點： 向下兼容IE6、7時，需要更改html結構
方法三：absolute + transform
設置：對父元素設置position:realatve(使其作為參照物)，對子元素設置position:absolute;left:50%(絕對定位元素的寬度也隨內容而定)，然后對子元素設置transform:translateX(-50%)（兼容IE6、7 時，替換div結構為table結構即可）;
優點： 居中元素不會對其他元素造成影響
缺點：transform不兼容低版本IE
方法四：flex + justify-content
設置：對父元素設置display:flex;justify-content:center(這樣其內部的元素會變為align-items)，align-items的寬度默認為auto，所以跟隨內容寬度變化，繼而justify-content:center屬性會使子元素居中
優點：只需要對父元素進行設置
缺點：flex不兼容低版本IE
垂直居中垂直居中對于子元素是單行內聯文本、多行內聯文本以及塊狀元素采用的方案是不同的。
常用方法舉例：父元素一定，子元素為單行內聯文本：設置父元素的height等于行高line-height
父元素一定，子元素為多行內聯文本：設置父元素的display:table-cell或inline-block，再設置vertical-align:middle;
塊狀元素:設置子元素position:absolute 并設置top、bottom為0，父元素要設置定位為static以外的值，margin:auto;
通用方案: flex布局，給父元素設置{display:flex; align-items:center;}
方法一：table-cell + vertical-align
設置：子容器高度不固定，對父元素設置display:table-cell(parent變為單元格，)，繼續設置vertical-align:center（使inline元素垂直居中）;
優點：兼容性好（支持 IE 8）
缺點：IE 8 以下版本需要調整頁面結構至 table
方法二：absolute + transform
設置：對父元素設置position:realatve(使其作為參照物)，對子元素設置position:absolute;left:50%(絕對定位元素的寬度也隨內容而定)，然后對子元素設置transform:translateY(-50%)（兼容IE6、7 時，替換div結構為table結構即可）;
優點： 居中元素不會對其他元素造成影響
缺點：transform不兼容低版本IE
方法三：flex + align-items
設置：對父元素設置display:flex(align-items默認屬性為stretch),繼而設置align-items:center即可;
優點： 只需要對父元素進行設置
缺點：flex align-items不兼容低版本IE
水平居中且垂直居中結合以上介紹到的水平和垂直居中方法進行設置
多列布局 一列定寬，一列自適應寬度方法一：text-align + inline-block + table-cell + vertical-align
方法二：absolute + transform
方法三：flex + justify-content + align-items
1.一列定寬，一列自適應寬度（float+margin）
預覽 源碼
2.一列定寬，一列自適應寬度（float+margin）fix 改良版
預覽 源碼
NOTE：此方法不會存在 IE 6 中3像素的 BUG，但 .left 不可選擇， 需要設置 .left {position: relative} 來提高層級。 此方法可以適用于多版本瀏覽器（包括 IE6）。缺點是多余的 HTML 文本結構。
3.一列定寬，一列自適應寬度( float + overflow )
預覽 源碼
4.一列定寬，一列自適應寬度( table + table-cell )
預覽 源碼
5.一列定寬，一列自適應寬度( flex )
預覽 源碼
多列定寬，一列自適應寬度基于上面對于一列定寬一列自適應的需求實現，多列定寬只需要在原有一列定寬的基礎上添加新的列即可，最后的列依然會自適應剩余寬度。
以 flex 的實現為基礎可以作如下改造：
多列不定寬，一列自適應寬度.left
左側定寬
.center
第二列定寬
.content
flex：1 充滿剩余空間，形成自適應效果，不設置的話默認為內容寬度
基于以上一列定寬一列自適應的實現，進行改造，左側不定寬區域的寬度任意（也可以由內部的內容來決定寬度就可以實現不定寬且自適應），繼續增加一列即可變為多列，都很方便實現
多列等分布局1.多列等分布局（float）
預覽 源碼
2.多列等分布局（table）
預覽 源碼
3.多列等分布局（flex）
預覽 源碼
多列等高布局1.多列等高布局（table）
預覽 源碼
2.多列等高布局（flex）
預覽 源碼
全屏布局1.彈性全屏布局（position）
預覽 源碼
2.彈性全屏布局（flex）
預覽 源碼
3.百分比布局，以上寬度設置更改為百分比即可
4.根據內容完全自適應，position有限制無法滿足，flex可以做到
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111772.html
摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅動學習，每天進步一點！ 讓努力成為一種習慣，讓奮斗成為一種享受！相信 堅持 的力量！！！ 項目...
摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅動學習，每天進步一點！ 讓努力成為一種習慣，讓奮斗成為一種享受！相信 堅持 的力量！！！ 項目...
摘要：每個列表項始于標簽。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。標簽的屬性應當與相關元素的屬性相同。姓名性別姓名性別單元格標簽可以定義表格中的一個單元格，表示一個單元格。 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位： web前端開發工程師 web網站架構師 自己創業 轉崗管理或其他 web前端開發的前景展望： 未來IT行業企業需求...
閱讀 1080·2021-11-25 09:43
閱讀 703·2021-11-22 14:45
閱讀 3830·2021-09-30 09:48
閱讀 1068·2021-08-31 09:41
閱讀 1977·2019-08-30 13:52
閱讀 1982·2019-08-30 11:24
閱讀 1351·2019-08-30 11:07
閱讀 958·2019-08-29 12:15
