logo
UUOVO
banner
banner
banner
NEWS LETTER

Html-元素布局篇

Scroll down

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

1
2
3
4
5
6
7
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

水平居中

使用 text-align 属性

  • 当子元素为行内块元素，即 
    1
    display: inline-block;
  • 父元素设置 
    1
    text-align: center;

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

  • 子元素使用 
    1
    margin：0 auto;

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

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

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

  • 父元素使用 
    1
    2
    position: relative;
    height: 子元素height;
  • 子元素使用 
    1
    2
    3
    4
    5
    position: absolute;
    left: 0;
    right: 0;
    width: 子元素原宽度;
    margin: auto;

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

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

flex

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

Grid

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

垂直布局

行内块级元素垂直居中

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

定位方式 — 方式一

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

定位方式 — 方式二

  • 父元素设置: relative
  • 子元素设置
    1
    2
    3
    4
    5
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 子元素高度;

定位方式 — 方式三

  • 父元素设置: relative
  • 子元素设置
    1
    2
    3
    position: absolute;
    top: 50%;
    transform: translateY(-50%);`

Flex

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

Grid

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

水平垂直居中 ➕

行内块级

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

定位 — 方式一

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

定位 — 方式二

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

定位 — 方式三

  • 父元素设置: relative
  • 子元素设置
    1
    2
    3
    4
    5
    6
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;

定位 — 方式四

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

Flex

  • 父元素设置: display:flex;
    • 方法一：
      1
      2
      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;
  • 右容器设置
    1
    2
    float: left; 
    width: calc(100% - 左容器的宽度);

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

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

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

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

float + overflow – 无限制

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

Flex – 无限制

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

Grid – 无限制

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

三列布局

Float — 方式一

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

Float — 方式二

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

Position

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

Flex

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

Grid

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

等分布局

浮动 + 百分比

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

行内块级 + 百分比

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

Flex

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

Grid

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

绝对定位

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

calc()

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

Flex

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

Grid

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

全屏布局

calc()

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

Flex

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

Grid

  • 父容器设置
    1
    2
    display: grid;
    grid-template-rows: auto 1fr auto;
  • 中间父容器设置: overflow:auto;
  • 中间右内容器设置
    1
    height: 任意高度;
其他文章
cover
Html-html5和CSS3新特性
  • 24/10/30
  • 15:29
  • CSS&HTML
cover
Html-页面布局技术篇
  • 24/10/30
  • 15:29
  • CSS&HTML
© 2024.10.30 - 2025 UUOVO
由 Hexo 驱动 v7.3.0 主题 - Async v2.2.3
目录导航 置顶
  1. 1. 注意：有用到 float 的，记得在父容器添加 clearfix
  • 水平居中
    1. 1. 使用 text-align 属性
    2. 2. 定宽块级元素水平居中 — 方式一
    3. 3. 定宽块级元素水平居中 — 方式二
    4. 4. 定宽块级元素水平居中 — 方式三
    5. 5. 定宽块级元素水平居中 — 方式四
    6. 6. flex
    7. 7. Grid
  • 垂直布局
    1. 1. 行内块级元素垂直居中
    2. 2. 定位方式 — 方式一
    3. 3. 定位方式 — 方式二
    4. 4. 定位方式 — 方式三
    5. 5. Flex
    6. 6. Grid
  • 水平垂直居中 ➕
    1. 1. 行内块级
    2. 2. 定位 — 方式一
    3. 3. 定位 — 方式二
    4. 4. 定位 — 方式三
    5. 5. 定位 — 方式四
    6. 6. Flex
    7. 7. Grid
  • 两列布局
    1. 1. float + calc() – 左容器宽度不可以由子元素撑起
    2. 2. float + margin-left – 左容器宽度不可以由子元素撑起
    3. 3. absolute + margin-left – 左容器宽度不可以由子元素撑起
    4. 4. float + overflow – 无限制
    5. 5. Flex – 无限制
    6. 6. Grid – 无限制
  • 三列布局
    1. 1. Float — 方式一
    2. 2. Float — 方式二
    3. 3. Position
    4. 4. Flex
    5. 5. Grid
  • 等分布局
    1. 1. 浮动 + 百分比
    2. 2. 行内块级 + 百分比
    3. 3. Flex
    4. 4. Grid
  • Sticky Footer 布局
    1. 1. 绝对定位
    2. 2. calc()
    3. 3. Flex
    4. 4. Grid
  • 全屏布局
    1. 1. calc()
    2. 2. Flex
    3. 3. Grid
    • 请输入关键词进行搜索
    • to close