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

Chao 发布于2019-08-30 13:20 / 2445人阅读

摘要：等高列布局两列结构两边都加上跟相等的负值，可以实现边框效果等同两列流体布局多列值要够大结构三列固定宽度结构三列自适应布局实用结构多列布局现代浏览器结构水平垂直

等高列布局 两列／marginLeft

html结构：.wrap>.container>.sidebar+.main
marginLeft,marginRight两边都加上跟borderWidth相等的负值，可以实现边框效果

</>复制代码 
/*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结构：.container>.left+.main+.right

</>复制代码 
.container {
  overflow: hidden;
}
.column {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

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

三列固定宽度／border

html结构：.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...

三列自适应布局(实用）

html结构：.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（现代浏览器）

html结构：.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配合空标签，这里使用伪元素替代

</>复制代码 
body {
  text-align: center;
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
  }
}

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

固定页脚 模拟表格方式

html结构：.wrap>.container+.footer

</>复制代码 
.wrap {
  display: table;
  table-layout: fixed;
  > div {
      display: table-row;
      height: 1px;
  }
  .container {
    height: auto;
  }
}

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

负marginBottom方式

html结构：.wrap>.container+.footer

</>复制代码 
  html, body {
    height: 100%;
  }
  #{$root-selector} {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -$footer-height;
    &:after {/*可用空标签替代*/
      content: "";
      display: block;
      height: $footer-height;
    }
  }
  #{$footer-selector} {
    height: $footer-height;
  }

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

padding+position方式

html结构：.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...

负marginTop方式

html结构：.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+伪元素

在垂直居中的元素上添加伪元素，设置伪元素的高==父级容器的高，然后为文本添加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...

参考网址：

再谈等高列布局、水平垂直居中与置顶页脚
八种创建等高列布局
CSS居中完整指南
使用Sass制作居中效果

GPU云服务器云服务器水平垂直居中固定垂直居中水平居中布局三列等高

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115482.html

构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

andot 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

JessYanCoding 2019-08-02 16:31 评论0 收藏0
CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

loonggg 2019-08-29 12:15 评论0 收藏0

发表评论

登陆后可评论

0条评论

Chao

男|高级讲师

我要关注我要私信

TA的文章

BREW SDK 中的工具

阅读 1499·2021-11-22 14:44
2021-11-15

阅读 2876·2021-11-16 11:44
自动化快速上手--Python篇(1)--【变量】--每天半小时

阅读 3249·2021-10-13 09:40
Python 小白的 PyQt5 项目实战（1）安装与环境配置

阅读 2068·2021-10-08 10:04
数脉科技：320元/月/E3-1230v2/16GB内存/1TB或240GB SSD硬盘/不限流量/

阅读 2400·2021-09-24 10:28
杭漂结束（end）｜我从有赞离职啦｜结束杭漂

阅读 2946·2021-09-06 15:02
不定元素宽高用css实现内容水平和垂直都居中

阅读 3006·2019-08-30 15:52
[note]布局：列等高，水平垂直居中，固定页脚

阅读 2446·2019-08-30 13:20

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

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

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

参考网址：

相关文章

构建静态页面之 [ 布局 ]

构建静态页面之 [ 布局 ]

CSS 常用的定位和布局方法汇总(已添加源码地址)

发表评论

0条评论

Chao

男|高级讲师

TA的文章

BREW SDK 中的工具

2021-11-15

自动化快速上手--Python篇(1)--【变量】--每天半小时

Python 小白的 PyQt5 项目实战（1）安装与环境配置

数脉科技：320元/月/E3-1230v2/16GB内存/1TB或240GB SSD硬盘/不限流量/

杭漂结束（end）｜我从有赞离职啦｜结束杭漂

不定元素宽高用css实现内容水平和垂直都居中

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

最新活动