欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

前端八股整理（CSS 01）｜水平垂直居中、盒模型、BFC 与 Flex 布局

2026-11-06 分类：服务器技术 阅读(9) 评论(0)

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

文章目录

  • 前端八股整理（CSS 01）｜水平垂直居中、盒模型、BFC 与 Flex 布局
  • 1.如何让元素水平垂直居中?
  • 2.盒模型?
  • 3.BFC,如何清除浮动?
  • 4.了解过哪些布局，flex布局说一下,宽高不定的div如何定位在屏幕中间，宽高为0能用flex实现吗?

前端八股整理（CSS 01）｜水平垂直居中、盒模型、BFC 与 Flex 布局

1.如何让元素水平垂直居中?

方法一:

定位布局,使用 postion 来实现元素水平垂直居中

<div class="parent">
<div class="child">内容</div>
</div>

.parent {
position: relative;
width:100vw;
height:100vh;
}

.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(–50%, –50%);
}

解释说明:

position: absolute：子元素 .child 不再参与普通文档流，它的位置由 left 和 top 决定。 left: 50%; top: 50%;：把 子元素的左上角 移动到了父容器 .parent 的正中心。 这时候 .child 的左上角在 .parent 的正中间，元素会错位，右下角偏移。为了让元素,调整中垂直水平居中的位置,应该向上向左移动,所以负的transform: translate(-50%, -50%) translate(-50%, -50%) 是 相对自身尺寸偏移 的操作： 向左移动 50%（自身宽度的一半） 向上移动 50%（自身高度的一半） 这就把左上角对齐中心 → 变成 整体居中

方法二:

也是定位布局,但是需要子元素存在宽高

<div class="parent">
<div class="child">内容</div>
</div>

.parent {
position: relative;
width:100vw;
height:100vh;
}

.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 200px;
height: 100px;
}

解释说明:

top: 0; bottom: 0; left: 0; right: 0;.child 会紧贴父元素的四条边；

margin: auto width: 200px; height: 100px;

假如说此时父元素宽高为 500px,同样你写了子元素高度为100px,那么 margin:auto;会自动计算 margin-top 和margin-bottom500-100px=400px,那么 margin-top 和margin-bottom分别就是 200

方法三:

使用 flex 布局,考虑好主轴 交叉轴即可

默认的主轴方向 flex-direction:row 横向的,然后就是把主轴和交叉轴都设置为 center 就居中了

.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

2.盒模型?

盒模型都是有四部分组成：content、padding、border、margin 最内层是content,外边是 padding,然后是 border,最外层是 margin

标准盒模型和IE盒模型(怪异盒模型)的区别在于设置width和height时，对应的范围不同

  • 标准盒模型和IE盒模型的区别在于设置width和height时，对应的范围不同
    • 标准盒模型的width、height只包含了content
    • IE盒模型的width、height包含了border、margin、padding

就是说如果是标准盒模型,如果设置 width:100px padding:10px border:1px,其中 width:100px,意味着 content 是 100px,实际上这个盒子的宽度是 100+20+2=122px 宽度

如果是怪异盒模型,置 width:100px padding:10px border:1px,意味着 content 是 100-20-2=78px,三个加一起为 100px

改变盒模型的种类 通过修改元素的 box-sizing 属性来改变元素的盒模型

  • box-sizeing:content-box 表示标准盒模型(默认值)
  • box-sizeing:border-box 表示 IE 盒模型(怪异盒模型)

在这里插入图片描述

什么时候用怪异盒模型?border-box

怪异盒模型更适合绝大多数页面开发，因为：

  • 设的宽高就是最终看到的宽高
  • padding 和 border 不会把盒子撑大
  • 布局更稳定、更好算

所以现在很多项目都会直接全局写：

*,
*::before,
*::after {
box-sizing: border-box;
}

3.BFC,如何清除浮动?

BFC (Block Formatting Context，块级格式化上下文）是什么?

BFC，全称是块级格式化上下文，可以理解为页面中的一个独立布局区域。处于 BFC 内部的元素布局不会影响外部元素，外部元素的布局也不会影响 BFC 内部。它常见的作用有三个：第一，清除浮动带来的父元素高度塌陷，因为 BFC 在计算高度时会包含内部浮动元素；第二，避免外边距 margin 合并；

如何创建一个 BFC

/* 最常见 */
.bfc {
overflow: hidden; /* 或 auto / scroll */
}

/* 其他常见方式 */
.bfc {
float: left;
}

.bfc {
position: absolute;
}

.bfc {
position: fixed;
}

.bfc {
display: inline-block;
}

.bfc {
display: flow-root;
}

BFC 的作用:

  • 解决高度塌陷问题:当子元素浮动后，会脱离普通文档流，父元素默认不会把它计算进自身高度；如果让父元素形成 BFC，父元素在计算高度时就会把内部浮动元素算进去。
  • 避免垂直 margin 重叠,不会发生垂直方向的 margin 重叠。

BFC 实例:

例子一:高度塌陷问题

<!– 没有 BFC，父元素高度会塌陷 –>
<div class="parent">
<div class="child"></div>
</div>

.parent {
background: lightgray;
}

.child {
float: left;
width: 100px;
height: 100px;
background: red;
}

image-20260404180509278

  • 此时父元素不会计算子元素的高度,他的高度塌陷为 0,如果这个父元素外边还有元素需要他撑开,就会出现问题
  • div 是块级元素,默认是 display:block,默认 width: auto，通常占满父元素可用宽度

设置 bfc

.parent {
background: lightgray;

overflow:hidden
}

.child {
float: left;
width: 100px;
height: 100px;
background: red;
}

image-20260404180712497

例子二:垂直外边距合并

当父元素和它的第一个子元素在垂直方向上紧贴在一起时，如果父元素顶部没有内容、没有 padding-top、没有 border-top，并且父元素也没有形成新的 BFC，那么子元素设置的 margin-top 可能不会老老实实出现在父元素内部，而是会和父元素的上外边距发生合并。

这时的视觉效果往往是：

  • 本来希望的是：子元素在父元素内部，距离父元素顶部 50px
  • 实际看到的是：父元素整体被向下“顶”了 50px

触发这种合并的常见条件

通常需要满足以下几种情况：

  • 父元素没有形成新的 BFC
  • 父元素没有padding-top
  • 父元素没有 border-top
  • 父元素和第一个子元素之间没有行内内容或其他内容把它们隔开

    • 注意:

    外边距合并,从感觉上来说就是子元素的外边距和父元素的的外边距之间没有了内容,所以产生了合并

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    body {
    margin: 0;
    }
    .outer {
    background: lightblue;
    /* overflow: hidden; */
    }
    .inner {
    background: lightcoral;
    margin-top: 50px;
    }
    </style>
    </head>
    <body>
    <div class="outer">
    <div class="inner">内容</div>
    </div>
    </body>
    </html>

    父元素内容由子元素撑起,父元素外边距合并,变成了 50px 在这里插入图片描述 加入 BFC 隔离

    .outer {
    background: lightblue;
    overflow: hidden;
    }

    在这里插入图片描述 成功解决问题 蓝色部分和红色部分都是父元素,父元素由子元素本身和它的外边距构成,这样就就解决了外边距合并的问题

    4.了解过哪些布局，flex布局说一下,宽高不定的div如何定位在屏幕中间，宽高为0能用flex实现吗?

    第一问：了解过哪些布局? 我了解过的布局方式主要有普通文档流、浮动布局、定位布局、Flex 布局和 Grid 布局。早期页面中会比较多用浮动和定位来做布局，现在实际开发里更常用的是 Flex 和 Grid。其中 Flex 更适合一维布局，主要解决一行或者一列上的对齐和分布问题；Grid 更适合二维布局，可以同时从行和列两个维度去划分区域。

    拓展了解:

    普通文档流就是按照 html 的顺序,比如几个 div,就是从上到下 div 都占一行,浮动布局就是 float ,定位布局就是 postion:绝对定位相对定位

    第二问：Flex 布局说一下 Flex 是一种一维弹性布局模型，主要用于控制子元素在主轴和交叉轴上的排列方式。 使用时父元素设置 display: flex，之后可以通过： • flex-direction 控制主轴方向 • justify-content 控制主轴对齐 • align-items 控制交叉轴对齐 • flex-wrap 控制是否换行 • 子元素通过 flex、flex-grow、flex-shrink、flex-basis 控制伸缩 它比较适合做水平排列、垂直居中、两端对齐、等分布局这类场景。

    拓展了解::

    为什么不叫横轴纵轴? 因为不是固定横轴纵轴,flex-direction 决定主轴的方向,它是 row,那主轴就是横向,反之就是纵向的,交叉轴就是主轴垂直的那个方向.

    第三问：宽高不定的 div 如何定位在屏幕中间 方式一：绝对定位 + transform

    .parent {
    position: relative;
    width: 100vw;
    height: 100vh;
    }

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

    方式二：Flex 居中

    .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    }

    如果父容器就是整个视口，其实更常用 flex 直接居中，实现会更简单。

    第四问：宽高为 0 能用 flex 实现吗 可以。 因为 flex 控制的是flex item 在容器中的排列和对齐方式，并不要求子元素必须有宽高。 即使子元素宽高为 0，只要它是一个 flex item，仍然可以被放到父容器中心。 只是如果元素本身宽高为 0 且没有内容，视觉上看不到，所以看起来像“没有效果”。

    .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    }

    .child {
    width: 0;
    height: 0;
    }

    赞(0)
    未经允许不得转载：171主机测评 » 前端八股整理（CSS 01）｜水平垂直居中、盒模型、BFC 与 Flex 布局
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(64997)#python(21651)#开发语言(18013)#java(16582)#运维(16309)#linux(15770)#大数据(15442)#服务器(13754)#算法(12385)#前端(11769)#ai(10459)#网络(9996)#数据库(9621)#c++(8748)#学习(7241)#课程设计(7054)#机器学习(7034)#区块链(6074)#后端(5604)#OpenClaw(5425)#spring boot(5354)#深度学习(5315)#c语言(4574)#安全(4556)#毕业设计(4413)#数据结构(4351)#架构(4221)#docker(4143)#javascript(4002)#大模型(3973)

    热门文章

    最新文章

    归档

    分类