摘要:總結了幾種常見的頁面架構布局方案居中布局水平居中垂直居中水平垂直多列布局自適應布局等寬布局等高布局居中布局水平居中水平居中布局垂直居中水平垂直居中多列布局自適應布局定寬自適應
總結了幾種常見的頁面架構布局方案
1.居中布局
a.水平居中 b.垂直居中 c.水平垂直
2.多列布局
a.自適應布局 b.等寬布局 c.等高布局居中布局 水平居中
demo
1. inline-block + text-align
.parent{ text-align:center; } .children{ display:inline-block; }
2. table + margin
.children{ display: table; margin:0 auto; }
3. absolute + transform
.parent{ position: relative; } .children{ position: absolute; left: 50%; transform: translateX(-50%); }
4. flex + justify-content/margin
/* 4.flex + justify-content */ .parent{ display: flex; justify-content: center; } /* 5.flex + margin */ .parent{ display: flex; } .children{ margin: 0 auto; }垂直居中
1. table-cell + vertical-align
.parent{ display: table-cell; vertical-align: middle; }
2. absolute + transform
.parent{ position: relative; } .children{ position: absolute; top: 50%; transform: translateY(-50%); }
3. flex + align-items
.parent{ display: flex; } .children{ align-items: center; }水平垂直居中
1.inline-block + text-align + table-cell + vertical-algin
.parent{ text-align: center; display: table-cell; vertical-align: middle; } .children{ display: inline-block; }
2.absolute + transform
.parent{ position: relative; } .children{ position: absolute; top: 50%; height: 50% transform: translate(-50%, -50%); }
3. flex + justify-content + align-items
.parent{ display: flex; justify-content: center; align-items: center; }多列布局 自適應布局
1. 定寬 + 自適應
/* 1. float + margin */ .left{ float: left; width: 100px; } .right{ margin-left: 120px; } /* 2. float + overflow BFC */ .left{ float: left; width: 100px; margin-right: 20px; } .right{ overflow: hidden; } /* 3.table */ .parent{ display: table; width: 100%; table-layout: fixed; } .left, .right{ display: table-cell; } .left{ width: 100px; padding-right: 20px; } /* 4. flex */ .parent{ display: flex; } .left{ width: 100px; margin-right: 20px; } .right{ flex: 1; } /* 5. 三列: 兩列定寬 + 一列自適應 */ .left, .center{ width: 100px; float: left; } .right{ overflow: hidden; }
2. 不定寬 + 自適應
/* float + overflow:hidden BFC */ .left{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p{ width: 100px; } /* table */ .parent{ display: table; width: 100%; } .left, .right{ display: table-cell; } .left{ width: 0.1%; padding-right: 20px; } /* flex */ .parent{ display: flex; } .left{ margin-right: 20px; } .right{ flex: 1; } .left p{ width: 100px; } /* 三列 */ .left, .center{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p, .center p{ width: 100px; }等寬布局
.column{ background-color: #2aabd2;} /* float */ .parent{ margin-left: -20px; } .column{ width: 25%; float: left; padding-left: 20px; box-sizing: border-box; } /* table */ .parent-fix{ margin-left: -20px; } .parent{ display: table; width: 100%; table-layout: fixed; } .column{ display: table-cell; padding-left: 15px; } /* flex */ .parent{ display: flex; } .column{ flex: 1; } .column+ .column{ margin-left: 20px; }等高布局
.left{ background-color: #2aabd2;} .right{ background-color: #00B83F;} /* flex */ .parent{ display: flex; } .left{ width: 100px; margin-right: 15px; } .right{ flex: 1; } /* table */ .parent{ display: table; width: 100%; table-layout: fixed; } .left, .right{ display: table-cell; } .left{ width: 100px; border-right: 15px solid transparent; background-clip: padding-box; } /*float 偽等高,不好*/ .left{ float: left; width: 100px; margin-right: 15px; } .right{ overflow: hidden; } .left, .right{ padding-bottom: 9999px; margin-bottom: -9999px; } .parent{ overflow: hidden; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116797.html
摘要:高度模型淺識為的簡寫,簡稱為塊級格式化上下文,為瀏覽器渲染某一區域的機制,中只有和中還增加了和。并非所有的布局都會在開發中使用,但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 float 屬性不...
摘要:不過幸運的是所有面試的公司都給了,在這里總結下經驗吧。這里推薦下我當時看的一篇的面經,木易楊老師寫的大廠高級前端面試題匯總。 前言 本人畢業一年,最近陸續面試了頭條、瓜子、360、猿輔導、中信銀行、老虎等公司,由于最近比較寒冬而且招1-3年的并不多,再加上自己對公司規模和位置有一定要求,所以最后合適的也就這幾家了。不過幸運的是所有面試的公司都給了offer,在這里總結下經驗吧。掘金:h...
摘要:常見布局方法總結水平居中布局使用場景頁面整體水平居中,有具體寬度要求。 常見布局方法總結 水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用場景:頁面整體水平居中,有具體寬度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...
摘要:常見布局方法總結水平居中布局使用場景頁面整體水平居中,有具體寬度要求。 常見布局方法總結 水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用場景:頁面整體水平居中,有具體寬度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...
閱讀 1292·2023-04-26 01:03
閱讀 1907·2021-11-23 09:51
閱讀 3299·2021-11-22 15:24
閱讀 2662·2021-09-22 15:18
閱讀 1010·2019-08-30 15:55
閱讀 3457·2019-08-30 15:54
閱讀 2232·2019-08-30 15:53
閱讀 2387·2019-08-30 15:44