[note]布局：列等高，水平垂直居中，固定頁腳

Chao 發(fā)布于2019-08-30 13:20 / 2409人閱讀

摘要：等高列布局兩列結(jié)構(gòu)兩邊都加上跟相等的負(fù)值，可以實現(xiàn)邊框效果等同兩列流體布局多列值要夠大結(jié)構(gòu)三列固定寬度結(jié)構(gòu)三列自適應(yīng)布局實用結(jié)構(gòu)多列布局現(xiàn)代瀏覽器結(jié)構(gòu)水平垂直

等高列布局 兩列／marginLeft

html結(jié)構(gòu)：.wrap>.container>.sidebar+.main
marginLeft,marginRight兩邊都加上跟borderWidth相等的負(fù)值，可以實現(xiàn)邊框效果

/*1: 等同*/
.container {
  border-left-width: 200px;/*1*/
}
.sidebar {
  float: left;
  width: 200px;/*1*/
  margin-left: -200px;/*1*/
  margin-right: -1px;
  border-right: 1px solid #888;
}
.main {
  float: left;
  margin-left: -1px;
  border-left: 1px solid #888;
}

http://codepen.io/zplus/pen/N...

兩列／流體布局－border

.main {
  width: 100%;
  border-right: 220px solid #f00;
  margin-right: -220px;
}
.sidebar {
  width: 220px;
  background: #f00;
}

http://codepen.io/zplus/pen/X...

多列／(+padding)+(-margin)=0

padding,margin值要夠大
html結(jié)構(gòu)：.container>.left+.main+.right

.container {
  overflow: hidden;
}
.column {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

http://codepen.io/zplus/pen/w...

三列固定寬度／border

html結(jié)構(gòu)：.wrap>.container>.main+.left+.right

.container {
  width: 520px;
  border-left: 220px solid #0f0; /*==leftWidth*/
  border-right: 220px solid #f00;/*==rightWidth*/
}
.left {
  float: left;
  width: 220px;
  margin-left: -220px;
}
.main {
  float: left;
  width: 520px;
  margin-right: -520px;
}
.right {
  float: right;
  width: 220px;
  margin-right: -220px;
}

http://codepen.io/zplus/pen/J...

三列自適應(yīng)布局(實用）

html結(jié)構(gòu)：.container>.main+.left+.right

.container {
  width: 100%;
  float: left;
  border-left: 220px solid #0f0;
  border-right: 220px solid #f00;
  display: inline; /*IE*/
}
.main {
  float: left;
  width: 100%;
  margin-right: -100%;
}
.left {
  float: left;
  width: 220px;
  margin-left: -220px;
}
.right {
  float: right;
  width: 220px;
  margin-right: -220px;
}

http://codepen.io/zplus/pen/b...

多列布局／table（現(xiàn)代瀏覽器）

html結(jié)構(gòu)：.table>.table-row>.table-cell+.table-cell+.table-cell

.table {
  display: table;
  &-row {
    display: table-row;
  }
  &-cell {
    display: table-cell;
    width: 33%;
  }
}

http://codepen.io/zplus/pen/b...

水平垂直居中 flexbox方式

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;/*firefox下需要*/
}

http://codepen.io/zplus/pen/m...

transform與絕對定位方式

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://codepen.io/zplus/pen/...

偽元素方式

運用inline-block配合空標(biāo)簽，這里使用偽元素替代

body {
  text-align: center;
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
  }
}

https://codepen.io/zplus/pen/...

固定頁腳 模擬表格方式

html結(jié)構(gòu)：.wrap>.container+.footer

.wrap {
  display: table;
  table-layout: fixed;
  > div {
      display: table-row;
      height: 1px;
  }
  .container {
    height: auto;
  }
}

http://codepen.io/zplus/pen/o...

負(fù)marginBottom方式

html結(jié)構(gòu)：.wrap>.container+.footer

  html, body {
    height: 100%;
  }
  #{$root-selector} {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -$footer-height;
    &:after {/*可用空標(biāo)簽替代*/
      content: "";
      display: block;
      height: $footer-height;
    }
  }
  #{$footer-selector} {
    height: $footer-height;
  }

http://codepen.io/zplus/pen/q...

padding+position方式

html結(jié)構(gòu)：.wrap>.container+.footer

.wrap {
  position: relative;
}
.container {
  padding-bottom: 60px; /*==footerHeight*/
}
.footer {
  position: absolute; /*基于wrap的定位*/
  bottom: 0;
  height: 60px; /*footerHeight*/
}

http://codepen.io/zplus/pen/X...

負(fù)marginTop方式

html結(jié)構(gòu)：.wrap>.container^+.footer

html, body {
  height: 100%;
}
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
}
.container {
  padding-bottom: 60px; /*==footerHeight*/
}
.footer {
  margin-top: -60px; /*==footerHeight*/
  height: 60px;
}

http://codepen.io/zplus/pen/x...

借助javascript

http://codepen.io/zplus/pen/O...

垂直居中 inline-block+偽元素

在垂直居中的元素上添加偽元素，設(shè)置偽元素的高==父級容器的高，然后為文本添加vertical-align:middle

.ghost-center {
  position: relative;
  &::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
  }
  p {
    display: inline-block;
    vertical-align: middle;
  }
}

http://codepen.io/zplus/pen/M...

Sass mixin方法

@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  
  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($width/2) #{0 0} -($height/2);
  } @else if not $height {
    width: $width;
    margin-left: -($width/2);
    transform: translateY(-50%);
  } @else {
    height: $height;
    margin-top: -($height/2);
    transform: translateX(-50%);
  }
}

/*flexbox方法*/
@mixin center-children {
  display: flex;
  justify-content: center;
  align-items: center;
}

http://codepen.io/zplus/pen/p...

參考網(wǎng)址：

再談等高列布局、水平垂直居中與置頂頁腳
八種創(chuàng)建等高列布局
CSS居中完整指南
使用Sass制作居中效果

云服務(wù)器 GPU云服務(wù)器水平垂直居中固定垂直居中水平居中布局三列等高

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115482.html

發(fā)表評論

登陸后可評論

0條評論

Chao

男|高級講師

我要關(guān)注我要私信

TA的文章

BREW SDK 中的工具

閱讀 1476·2021-11-22 14:44
2021-11-15

閱讀 2851·2021-11-16 11:44
自動化快速上手--Python篇(1)--【變量】--每天半小時

閱讀 3219·2021-10-13 09:40
Python 小白的 PyQt5 項目實戰(zhàn)（1）安裝與環(huán)境配置

閱讀 2013·2021-10-08 10:04
數(shù)脈科技：320元/月/E3-1230v2/16GB內(nèi)存/1TB或240GB SSD硬盤/不限流量/

閱讀 2374·2021-09-24 10:28
杭漂結(jié)束（end）｜我從有贊離職啦｜結(jié)束杭漂

閱讀 2922·2021-09-06 15:02
不定元素寬高用css實現(xiàn)內(nèi)容水平和垂直都居中

閱讀 2971·2019-08-30 15:52
[note]布局：列等高，水平垂直居中，固定頁腳

閱讀 2410·2019-08-30 13:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[note]布局：列等高，水平垂直居中，固定頁腳

參考網(wǎng)址：

相關(guān)文章

構(gòu)建靜態(tài)頁面之 [ 布局 ]

構(gòu)建靜態(tài)頁面之 [ 布局 ]

CSS 常用的定位和布局方法匯總(已添加源碼地址)

發(fā)表評論

0條評論

Chao

男|高級講師

TA的文章

BREW SDK 中的工具

2021-11-15

自動化快速上手--Python篇(1)--【變量】--每天半小時

Python 小白的 PyQt5 項目實戰(zhàn)（1）安裝與環(huán)境配置

數(shù)脈科技：320元/月/E3-1230v2/16GB內(nèi)存/1TB或240GB SSD硬盤/不限流量/

杭漂結(jié)束（end）｜我從有贊離職啦｜結(jié)束杭漂

不定元素寬高用css實現(xiàn)內(nèi)容水平和垂直都居中