前端面试题css(一)

题目

- 盒子垂直水平居中如何实现
- - [text-align:center + vertical-align: middle水平垂直居中布局](#text-align:center + vertical-align: middle水平垂直居中布局)
  - position+margin水平垂直居中布局
- grid栅格化布局及其兼容性
- 介绍一下BFC
- - [触发 BFC 的条件包括：](#触发 BFC 的条件包括：)
  - 常见的用途包括：
- 写过的动画效果
- overflow有哪些属性
- - visible：
  - hidden：
  - scroll：
  - auto：
  - overlay：
- 如何让一个盒子出现滚动条
- [盒子模型介绍一下 border-box和content-box](#盒子模型介绍一下 border-box和content-box)
- - [content-box 盒子模型:](#content-box 盒子模型:)
  - [border-box 盒子模型:](#border-box 盒子模型:)
  - 盒子模型的设置
- flex是哪些属性的缩写，分别有什么用
- - flex-grow:
  - flex-shrink:
  - flex-basis:
- rem，em，px，vh，vw这些单位的区别
- position有哪些属性，有啥区别
- - static:
  - relative:
  - absolute:
  - fixed:
  - sticky:
- 实现0.5px
- inline-block时可能盒子会出现间隙，如何解决
- inline-block和block、inline的区别
- - [Block 元素:](#Block 元素:)
  - [Inline 元素:](#Inline 元素:)
  - [Inline-block 元素:](#Inline-block 元素:)
  - 主要区别:
- inline的盒子能设置上下margin和左右margin吗
- css3哪些特性你经常使用
- flex布局

盒子垂直水平居中如何实现

text-align:center + vertical-align: middle水平垂直居中布局

javascript 复制代码

 <div> text-align:center + vertical-align: middle水平垂直居中布局</div>
    <div class="text-align-outter">
      <div class="text-align-center"></div>
    </div>
.text-align-outter {
  background-color: plum;
  text-align: center;
  vertical-align: middle;
  /** 要配合table-cell一起使用 */
  display: table-cell;
  width: 300px;
  height: 300px;
}

.text-align-center {
  display: inline-block;
  background-color: pink;
  width: 50%;
  height: 50%;
}

position+margin水平垂直居中布局

优点是兼容性较好，缺点是必须知道子组件的宽高

javascript 复制代码

 <div>position + margin水平垂直居中</div>
    <div class="position-outter">
        <div class="position-center"></div>
    </div>
.position-outter {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: plum;
}

.position-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: pink;
}

当然还有更多方式，我以前写过一篇常用的css布局 https://dengxi.blog.csdn.net/article/details/114955202 里面详细介绍了水平居中，垂直水平居中，圣杯等布局方式。

grid栅格化布局及其兼容性

容器（Grid Container）：设置一个元素为网格容器，通过 display: grid; 属性。

项目（Grid Item）：在网格容器内的元素称为网格项目，可以通过 grid-column 和 grid-row 等属性来定义它们在网格中的位置。

行（Grid Row）和列（Grid Column）：网格被划分为行和列，你可以通过设置网格线的位置来定义它们的数量和大小。

网格线（Grid Line）：水平和垂直的线形成了网格的划分，你可以通过设置网格线的位置来调整行和列的大小。

CSS Grid 的兼容性不算良好，主流现代浏览器已经支持。以下是一些常见的浏览器对 CSS Grid 的支持情况：

Chrome：从 Chrome 57 开始支持 CSS Grid。

Firefox：从 Firefox 52 开始支持 CSS Grid。

Safari：从 Safari 10.1 开始支持 CSS Grid。

Edge：从 Edge 16 开始支持 CSS Grid。

Opera：从 Opera 44 开始支持 CSS Grid。

但低版本的浏览器以及ie浏览器并不支持。

更多关于栅格化布局的介绍： https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

介绍一下BFC

BFC，即块格式化上下文（Block Formatting Context），是一个在 CSS 布局中的重要概念。BFC 形成了一种独立的渲染区域，它影响了元素如何放置、定位以及与其他元素之间的交互。

触发 BFC 的条件包括：

float 属性不为 none。

position 属性为 absolute 或 fixed。

display 属性为 inline-block、table-cell、table-caption、flex、inline-flex 之一。

overflow 属性不为 visible。

常见的用途包括：

清除浮动以防止父元素高度塌陷。

阻止相邻块级元素的边距塌陷。

创建自适应的两栏布局。

控制浮动元素的布局与尺寸。

写过的动画效果

这个就按照自己的项目情况介绍一下，主要是考察实现动画的方式，以及它们的区别。

以前总结过一些实现动画的方式，可以用来参考一下 https://dengxi.blog.csdn.net/article/details/116102127

overflow有哪些属性

visible：

默认值，溢出内容会显示在容器之外，不会被截断。

可能会导致内容溢出到其他元素之上。

hidden：

溢出内容会被隐藏，不会显示在容器之外。

被裁剪的内容将不可见。

scroll：

显示垂直和水平滚动条，无论是否需要滚动。

即使内容没有溢出，也会显示滚动条位置，但不会禁用滚动。

auto：

如果内容溢出，会自动显示滚动条。

如果内容没有溢出，不会显示滚动条。

overlay：

类似于 auto，如果内容溢出，会自动显示滚动条。

不过，滚动条将以一种更不占空间的方式显示在内容之上。

如何让一个盒子出现滚动条

如果是y轴的滚动条，就要固定盒子的高度，超出这个高度滚动条才可能会出现。

因此必须是inline-block或者是block的盒子，最后才是使用overflow属性

css 复制代码

.block-scroll {
	display: block;
	height: 200px;
	overflow: auto;
}

同理，如果是要x轴出现滚动条，就要固定盒子的宽度，最后不允许换行

css 复制代码

.block-scroll {
	display: block;
	width: 200px;
	overflow: auto;
}

盒子模型介绍一下 border-box和content-box

content-box 盒子模型:

元素的宽度和高度仅包括内容区域的尺寸，不包括内边距和边框。

例如，设置一个元素的宽度为200px，如果有10px的内边距和2px的边框，那么实际的占用宽度将是：200px（内容） + 20px（内边距） + 4px（边框），总共224px。

border-box 盒子模型:

元素的宽度和高度包括了内容区域、内边距和边框的尺寸。

这意味着你设置的宽度和高度就是元素实际占用的尺寸，包括了内部的空间。

使用 border-box 可以更方便地控制元素的总尺寸，尤其在设计布局时更具灵活性。

盒子模型的设置

其中content-box 是浏览器的标准盒子模型，开发者可以按照自己的开发习惯和项目要求，统一使用盒子模型

css 复制代码

* {
	box-sizing：content-box;
	// box-sizing：border-box;
}

flex是哪些属性的缩写，分别有什么用

flex-grow:

决定弹性容器中的项目在剩余空间分配时的扩展比例。

默认为0，表示项目不会扩展，剩余空间将平均分配给其他扩展项目。

越大的值表示项目扩展得越多。

flex-shrink:

决定弹性容器中的项目在空间不足时的收缩比例。

默认为1，表示项目会等比例地收缩以适应空间不足。

0 表示项目不会收缩。

flex-basis:

定义项目的初始尺寸。

可以设置为一个具体的长度值或百分比。

默认为 auto，即根据项目内容自动确定尺寸。

flex: flex-grow flex-shrink flex-basis;

rem，em，px，vh，vw这些单位的区别

1rem = 在document根节点html标签上设置的font-size的参数

比如：1rem = 16px

html 复制代码

<html style="font-size: 16px;">
...
</html>

1em = 父节点设置的font-size的参数

比如对于p标签来说 1em = 16px

html 复制代码

<html>
	<div style="font-size: 16px;">
		<p style="margin: 1em;"></p>
	</div>
</html>

1px 就是一个像素点坐标，也可以参考屏幕的分辨率

1vh 是浏览器满屏高度的百分之一

1vw 是浏览器满屏宽度的百分之一

position有哪些属性，有啥区别

static:

默认值，元素按照正常文档流进行布局。

忽略 top, right, bottom, 和 left 属性。

relative:

元素相对于其正常位置进行定位。

其他元素仍然按照正常文档流进行布局，但是可以通过 top, right, bottom, 和 left 属性微调位置。

元素仍然占据原始位置的空间，不影响其他元素的布局。

absolute:

元素从正常文档流中脱离，相对于其最近的已定位（非 static）祖先元素进行定位。

如果没有已定位的祖先元素，那么元素将相对于元素进行定位。

元素不再占据原始位置的空间，会浮动在其他元素之上。

fixed:

元素相对于视窗进行定位，不会随着页面滚动而移动。

常用于创建固定的导航栏或悬浮元素。

sticky:

元素根据正常文档流进行定位，直到滚动到特定的阈值，然后变为固定定位，直到到达另一个阈值，然后又恢复正常定位。

在元素在阈值范围内的过程中，元素会始终保持在视口内部可见。

实现0.5px

如果你在样式中直接写0.5px的基本上是不可能会实现的，但可以曲线救国，通过缩小盒子来实现。

比如，我想要实现一个长10px，高0.5px的线条

css 复制代码

div {
	width: 20px;
	height: 1px;
	background: #000;
	transform: scale(0.5);
}

还有一种方式实现，通过样式渐变色来实现，一半设置为透明，一半设置为想要的颜色。

当然，以上这些方法都只是从视觉上实现0.5px，并不是真正意义上的0.5px。

inline-block时可能盒子会出现间隙，如何解决

加一行属性：

css 复制代码

font-size: 0

inline-block和block、inline的区别

Block 元素:

占据一整行空间，会自动撑满其父容器的宽度。

可以设置宽度、高度、外边距和内边距。

默认情况下，一个块级元素会在前后创建一个新行，使其内容从新行开始显示。

Inline 元素:

只占据它所包含内容的空间，不会强制换行。

无法设置宽度、高度，外边距上下无效（左右有效），内边距对上下左右都有效。

在一行上显示，允许其他元素和文本与其位于同一行内。

Inline-block 元素:

类似于内联元素，但可以设置宽度、高度、外边距和内边距。

不会强制换行，而且可以与其他元素共享一行，同时可以控制其尺寸和间距。

主要区别:

布局: block 元素独占一行，inline 元素在一行上显示，inline-block 元素也在一行上显示，但可以设置尺寸。
尺寸设置: block 和 inline-block 元素可以设置宽度和高度，而 inline 元素不可以。
外边距与内边距: block 和 inline-block 元素都可以设置外边距和内边距，而 inline 元素的外边距上下不会影响布局。
换行行为: block 元素会强制换行，每个块级元素都从新行开始，inline 元素不会强制换行，而 inline-block 元素也不会强制换行，可以在同一行内显示多个。

inline的盒子能设置上下margin和左右margin吗

可以设置左右，但上下margin设置了也不生效

css3哪些特性你经常使用

主要考察的是对css3的熟悉程度，一般来说常用的css3属性如下

border-radius：用于创建元素的圆角边框。

box-shadow：添加元素的阴影效果，可以设置水平偏移、垂直偏移、模糊半径和颜色。

text-shadow：为文本添加阴影效果，具有水平偏移、垂直偏移、模糊半径和颜色属性。

background-size：控制背景图片的大小，可以使用关键字（如cover和contain）或具体尺寸。

opacity：设置元素的透明度，可以在0到1之间的值来调整元素的可见度。

transition：用于在状态改变时添加过渡效果，可以控制属性的变化时间、类型和延迟。

transform：对元素进行2D或3D变换，包括旋转、缩放、平移等效果。

animation：创建元素的动画效果，可以定义关键帧、持续时间、延迟等属性。

@keyframes：定义动画的关键帧，用于在animation属性中使用。

box-sizing：控制盒模型的计算方式，可以选择content-box（默认）或border-box。

flexbox：用于构建灵活的布局，通过display: flex来启用，可以使用flex-direction、justify-content、align-items等属性控制布局。

grid：用于创建复杂的网格布局，通过display: grid来启用，可以使用grid-template-columns、grid-template-rows、grid-gap等属性定义网格结构。

@media：用于根据不同的媒体查询（如屏幕大小、分辨率等）应用不同的样式。

nth-child 和 nth-of-type：用于选择一组元素中特定位置的元素，可以用来实现奇偶行样式等效果。

flex-grow 和 flex-shrink：用于在弹性布局中控制项目的伸缩性，以适应不同的空间。

gradient：创建渐变背景，可以是线性渐变或径向渐变。

filter：对元素应用图像滤镜效果，如模糊、对比度调整等。

user-select：控制用户是否可以选择文本内容。

column-count 和 column-gap：控制多列布局中的列数和列之间的间隔。

outline：类似于边框，但不占据空间，常用于元素获取焦点时的样式。

flex布局

flex布局考点很多，一些常用的属性，布局方式，以及兼容性的问题，需要大家关注。

查看一下 Flex 布局教程：语法篇作者：阮一峰

css常见考题先介绍到这里，后面会抓紧安排第二期css常见面试题。