前端八股整理｜CSS｜高频小题 01

文章目录

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

前端八股整理｜CSS｜高频小题 01

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

方法一:

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

html 复制代码

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

javascript 复制代码

.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%（自身高度的一半）

这就把左上角对齐中心 → 变成整体居中

方法二:

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

html 复制代码

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

css 复制代码

.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 就居中了

css 复制代码

.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 不会把盒子撑大
布局更稳定、更好算

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

css 复制代码

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

3.BFC,如何清除浮动?

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

BFC 可以理解成一个相对独立的布局区域。最常见的作用是让父元素在计算高度时把内部浮动元素也算进去，从而解决浮动导致的高度塌陷；同时它也能在一定程度上隔离外部浮动和 margin 重叠的影响。

如何创建一个 BFC

css 复制代码

/* 最常见 */
.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 实例:

例子一:高度塌陷问题

html 复制代码

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

css 复制代码

.parent {
  background: lightgray;
}

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

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

设置 bfc

css 复制代码

.parent {
  background: lightgray;
  
  overflow:hidden
}

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

例子二:垂直外边距合并

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

这时的视觉效果往往是：

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

触发这种合并的常见条件

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

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

注意:

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

html 复制代码

<!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 隔离

css 复制代码

 .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

css 复制代码

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

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

方式二：Flex 居中

css 复制代码

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

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

第四问：宽高为 0 能用 flex 实现吗

可以。

因为 flex 控制的是flex item 在容器中的排列和对齐方式，并不要求子元素必须有宽高。

即使子元素宽高为 0，只要它是一个 flex item，仍然可以被放到父容器中心。

只是如果元素本身宽高为 0 且没有内容，视觉上看不到，所以看起来像"没有效果"。

css 复制代码

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

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