国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端面試重點之——多列布局

lei___ / 3417人閱讀

摘要:重點以需求為例說明。三左邊不定寬,右邊自適應布局需求左側不定寬,右側自適應,間距。五等寬布局解決方案需求多列等寬,并保留間距。

在頁面開發中,當我們拿到設計師給出的UI圖后,首先考慮的就是布局問題,而多列布局會是我們碰到最多的布局問題,個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局,三列布局,多列布局,其中布局方法中的原理都有類似之處。

目錄

一、定寬+自適應兩列布局

二、兩列定寬,一列自適應布局

三、左邊不定寬,右邊自適應布局

四、多列不定寬,一列自適應

五、等寬布局解決方案

六、等高布局解決方案

(文中Css代碼中顏色需自行添加)

一、定寬+自適應兩列布局

left

right

需求:實現左側100px,右側自適應,且間距20px

方法一:左側浮動,右側寬度通過margin調整
.left {
    float: left;
    width: 100px;
}
.right {
    margin-left: 120px; //相差的20px是左右之間的間距
}
方法二:左側浮動,右側BFC
.left {
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
方法三:table

單元格默認會等寬,但是table-layout: fixed能夠讓table元素布局優先,。

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 100px;
    padding-right: 20px;
}
方法四:flex
.parent {
    display: flex;
}
.left {
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1
}
方法五:css3 calc()計算屬性
.left {
    display: inline-block;
    width: 100px;
    margin-right: 20px;
}
.right {
    display: inline-block;
    width: calc(100% - 120px);
}
二、兩列定寬,一列自適應布局

多列布局用到的屬性原理基本都一樣,上面的方法也同樣適用于此。

left

center

right

需求1:left和center定寬100px,right自適應。

需求2:left和right定寬100px,center自適應。

需求1使用的方法跟上面有相同之處,不做贅述。重點以需求2為例說明。

方法一:父元素相對布局,子元素絕對布局
.parent {
    position: relative;
}
.left{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
}
.right {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100px;
}
.center {
    margin: 0 120px;
}
方法二:flex布局
.parent {
    display: flex;
}
.left, .right {
    width: 100px;
}
.left {
    margin-right: 20px;
}
.right {
    margin-left: 20px;
}
.center {
    flex: 1;
}
方法三:雙飛翼布局

雙飛翼布局需要將center塊提前,并且需要在center的內嵌包裹塊,方便設置間距,注意在設置center寬度為100%的時候,要將center的盒模型轉換為IE盒模型,這樣它的寬度就包含了padding。

center

left

right

.center, .left, .right {
    float: left;
}
.left {
    width: 100px;
    margin-left: -100%;
}
.right {
    width: 100px;
    margin-left: -100px;
}
.center {
    box-sizing: border-box;
    width: 100%;
    padding-left: 120px;
    padding-right: 120px;
}
.content {
    height: 100%;
}
三、左邊不定寬,右邊自適應布局

left

right

需求:左側不定寬,右側自適應,間距20px。

方法一:float +  overflow
.left {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
方法二:table布局

由內容決定寬度,不由布局決定寬度,取消table-layout:fixed的作用

.parent {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 0.1% //取最小寬度,實際寬度由內容決定
    padding-right: 20px;
}
方法三:flex
.parent {
    diaplay: flex;
}
.left {
    margin-right: 20px;
}
.right {
    flex: 1;
}
四、多列不定寬,一列自適應

三、左邊不定寬,右邊自適應布局 方法相同。

五、等寬布局解決方案

column1

column2

column3

column4

需求:多列等寬,并保留20px間距。

方法一:margin  +  float

此時需要考慮多個間距的問題,缺點:需要提前知道有多少列計算好每列寬度占比+間距,具體就是讓父元素多擁有20px的寬度。

.parent {
    margin-left: -20px;
}
.column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}
方法二:table

此時需要在parent元素外層再添加一層盒子parent-layout,并設置寬度使得寬度再增加20px。

column1

column2

column3

column4

.parent-layout {
    margin-left: -20px;
}
.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.column {
    display: table-cell;
    padding-left: 20px;
}

方法三:flex

.parent {
    display: flex;
}
.column {
    flex: 1;
}
.column + .column {
    margin-left: 20px;
}
六、等高布局解決方案

除了解決分欄的問題之外,我們同時需要解決分列后等高布局的解決方法:

方法一:table

利用table單元格本身具有等高特性

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right  {
    display: table-cell;
}
.left {
    widht: 100px;
    border-right: 20px solid transparent;
    background-clip: padding-box; //由于是border-box,需要把背景顏色去掉
}
方法二:flex
.parent {
    display: flex;
}
.left {
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1;
}
方法三:float

偽等高

.left, .right  {
    flex: left;
    width: 100%;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
.left, .right {
    padding-bottom:9999px;
    margin-bottom: -9999px;
}
.parent {
    overflow: hidden;
}

(文中樣式代碼中的背景顏色可自行添加)

說明:

BFC(塊級格式上下文),可以實現和浮動元素共存,且不會遮擋浮動元素,通過overflow:hidden,
作用:避免邊距折疊,不被浮動元素遮蓋。且BFC能夠將內容元素浮動清除,避免高度塌陷。

喜歡那就點個贊吧

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54202.html

相關文章

  • 前端面試重點——多列布局

    摘要:重點以需求為例說明。三左邊不定寬,右邊自適應布局需求左側不定寬,右側自適應,間距。五等寬布局解決方案需求多列等寬,并保留間距。 在頁面開發中,當我們拿到設計師給出的UI圖后,首先考慮的就是布局問題,而多列布局會是我們碰到最多的布局問題,個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局,三列布局,多列布局,其中布局方法中的原理都有類似之處。 目錄 一、定寬+...

    superPershing 評論0 收藏0
  • 前端面試重點——多列布局

    摘要:重點以需求為例說明。三左邊不定寬,右邊自適應布局需求左側不定寬,右側自適應,間距。五等寬布局解決方案需求多列等寬,并保留間距。 在頁面開發中,當我們拿到設計師給出的UI圖后,首先考慮的就是布局問題,而多列布局會是我們碰到最多的布局問題,個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局,三列布局,多列布局,其中布局方法中的原理都有類似之處。 目錄 一、定寬+...

    makeFoxPlay 評論0 收藏0
  • 前端面試CSS總結(上)

    摘要:重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結 由于最近在準備前端方面的面試,所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上),有許多地方敘述的并不是十分詳細,只是大致的描述一下,給自己提供一個知識輪廓。本篇中主要描述...

    琛h。 評論0 收藏0
  • 前端面試重點--居中問題

    摘要:前端面試重點居中問題在頁面布局開發中,居中問題是我們經常碰到的問題,掌握居中問題對于解決頁面布局非常重要,同時它也是常見的面試重點。已知寬高的元素父元素相對定位,子元素絕對定位。以上才支持的兼容性寫法完 前端面試重點——居中問題 在頁面布局開發中,居中問題是我們經常碰到的問題,掌握居中問題對于解決頁面布局非常重要,同時它也是常見的面試重點。本文匯總一些常見的居中方式以及一些注意點,權當...

    AJie 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<