Html-元素布局篇

注意：有用到 float 的，记得在父容器添加 clearfix

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

水平居中

使用 text-align 属性

• 当子元素为行内块元素，即 display:inline-block;
• 父元素设置 text-align: center，即可实现水平居中

定宽块级元素水平居中 — 方式一

• 子元素使用 margin：0 auto;

定宽块级元素水平居中 — 方式二

• 子元素使用 relative;left:50%;margin-left:-(子元素width/2);

定宽块级元素水平居中 — 方式三

• 父元素使用 relative;height:子元素height;
• 子元素使用 absolute;left:0;right:0;width:子元素原宽度;margin:auto;

定宽块级元素水平居中 — 方式四

• 父元素使用 relative
• 子元素使用 absolute;left:50%;transform:translateX(-50%)

flex

• 父元素使用height:子元素高度;diaplay:flex;justify-content:center;
• 子元素使用margin:auto

Grid

• 除了把 flex 改为 grid，其它跟 6 一样

垂直布局

行内块级元素垂直居中

• 父元素设置line-height: 父元素高度;
• 子元素设置display:inline-block; vertical-align:middle;

定位方式 — 方式一

• 父元素设置relative
• 子元素设置absolute;top:50%;margin-top: -(子元素高度 / 2)px

定位方式 — 方式二

• 父元素设置relative
• 子元素设置absolute;top:0;bottom:0;margin:auto;height: 子元素高度

定位方式 — 方式三

• 父元素设置relative
• 子元素设置absolute;top:50%;transform:translateY(-50%)

Flex

• 父元素设置display:flex;
  • 方法一：aligin-items:center;
• 子元素设置
  • 方法二：margin:auto

Grid

• 父元素设置display:grid;
  • 方法一：aligin-items:center
• 子元素设置
  • 方法二：margin:auto;
  • 方法三：align-self:center

水平垂直居中 ➕

行内块级

• 父元素设置 line-height: 父元素高度;text-align:center
• 子元素设置display:inline-block;vertical-align:middle;

定位 — 方式一

• 父元素设置relative
• 子元素设置absolute;left:calc(50%-(子元素宽度/2)px);top:calc(50% - (子元素高度/2)px)

定位 — 方式二

• 父元素设置relative
• 子元素设置absolute;left:50%;top:50%;margin-left: -(子元素宽度 / 2)px;margin-top: -(子元素高度/2)px

定位 — 方式三

• 父元素设置relative
• 子元素设置absolute;left:0;top:0;right:0;bottom:0;margin: auto

定位 — 方式四

• 父元素设置relative
• 子元素设置absolute;left:50%;top:50%;transform:translate(-50%,-50%)

Flex

• 父元素设置display:flex;
  • 方法一：align-items:center;justify-content:center
• 子元素设置方法二：margin:auto;

Grid

• 父元素设置display:grid;
  • 方法一：place-items:center;
  • 方法二:place-content:center;
• 子元素设置
  • 方法三：margin:auto;
  • 方法四：place-self:center

两列布局

两列布局: 一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。(以左列定宽，右列自适应为例，高度一样)

float + calc() – 左容器宽度不可以由子元素撑起

• 左容器设置float: left;
• 右容器设置float:left; width:calc(100% - 左容器的宽度)

float + margin-left – 左容器宽度不可以由子元素撑起

• 左容器设置float: left;
• 右容器设置margin-left:左容器的宽度

absolute + margin-left – 左容器宽度不可以由子元素撑起

• 左容器设置position: absolute
• 右容器设置margin-left: 左容器的宽度

float + overflow – 无限制

• 左容器设置float: left
• 右容器设置overflow: hidden

Flex – 无限制

• 左右父级容器设置display:flex
• 右容器设置flex: 1

Grid – 无限制

• 左右父级容器设置display:grid;grid-template-columns: auto 1fr

三列布局

Float — 方式一

• 左容器设置float:left;
• 右容器设置：float: right;
• 中间设置：overflow: hidden

Float — 方式二

• 左容器设置float:left;
• 右容器设置：float: right;
• 中间设置：width：calc(100% -左右宽度之和)

Position

• 左容器设置position:absolute;left:0;top:0;
• 右容器设置：position:absolute;right:0;top:0;
• 中间设置：width：calc(100% -左右宽度之和); margin-left: 左容器宽度; margin-right: 有容器宽度;

Flex

• 父容器设置display:flex;
• 右容器设置：flex:1;

Grid

• 父容器设置display:grid; grid-template-columns: auto ifr auto;

等分布局

浮动 + 百分比

• 子元素共有类设置width: 25%; float: left;

行内块级 + 百分比

• 子元素共有类设置width: 24.5%; display:inline-block;

Flex

• 父容器设置display:flex
• 子元素共有类设置flex:1;

Grid

• 父容器设置display:grid;grid-template-columns:repeat(4, 1fr)

Sticky Footer 布局

绝对定位

• html,body设置height: 100%
• 父级容器设置position: relative; height:100%
• 中间容器设置padding-bottom: 底部的高度
• 底部设置absolute;width:100%;bottom:0

calc()

• 中间容器设置min-height: calc(100vh- 底部高度)

Flex

• 父级容器设置display: flex; flex-flow: column; min- height: 100vh
• 中间容器设置flex:1

Grid

• 父级容器设置display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh;

全屏布局

calc()

• 中间父容器设置overflow: hidden; height: calc(100vh - 底部高度)
• 中间左设置height: 100%
• 中间右设置overflow:auto;height: 100%;
• 中间右内容器设置height: 任意高度

Flex

• 父容器设置display:flex;flex-flow:column
• 中间父容器设置overflow:auto;flex:1
• 中间右内容器设置height: 任意高度

Grid

• 父容器设置display:grid;grid-template-rows: auto 1fr auto
• 中间父容器设置overflow:auto;
• 中间右内容器设置height: 任意高度