前端CSS试题

发表于 | 分类于
字数统计: 2.1k | 阅读时长 ≈ 8

收集了解前端试题，温故而知新！！！

目录

1. css盒子模型，box-sizing属性的理解

css盒子模型：margin + border + padding + content （由外到内）

box-sizing: content-box(默认) | border-box | inherit; 是 css3 的属性，主要是设置盒子的宽度时，是否仅包含 content 。

2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

浮动的元素是脱离文档标准流的。如果不进行清除浮动，会造成父元素高度塌陷，影响页面的布局。

清除浮动的方式：

  • 给父元素设置高度。（缺点：需要提前知道父元素需要的高度）
  • 给父元素设置 overflow: hidden; （BFC独立盒子）
  • 给父元素的伪类设置 clear: both; （更符合语义化）
1
2
3
4
5
6
7
8
/* 伪类 */
.parent::after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

BFC：（overflow: hidden 可以触发 BFC 机制）

块级格式化上下文，创建了 BFC 的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算BFC的高度时，浮动元素也参与计算。

3. 如何让一个不定宽高的盒子水平垂直居中

  • table-cell + text-align （不再推荐）
1
2
3
4
5
6
7
8
.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}
  • 绝对定位 + 移动
1
2
3
4
5
6
7
8
9
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  • flex 布局
1
2
3
4
5
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
  • grid 布局
1
2
3
4
5
6
7
.parent {
    position: grid;
}
.child {
    justify-self: center;
    align-self: center;
}

4. px、em 和 rem 的区别

  • px: 像素，相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
  • em 的值并不是固定的，会继承父级元素的字体大小，代表倍数。
  • rem的值并不是固定的，始终是基于根元素 <html> 的，也代表倍数。

5. position 各个定位的区别

  • static： 默认值。没有定位，元素出现在正常的流中
  • relative（相对定位）：生成相对定位的元素,相对于其正常（原先本身）位置进行定位
  • absolute（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
  • fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位
  • sticky (粘性定位)：基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

关于 position: sticky; 可参考，杀了个回马枪，还是说说position:sticky吧

6. display:none 与 visibility：hidden 的区别

区别 display: none; visibility: hidden;
是否占据空间 不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中） 该元素空间依旧存在
是否渲染 会触发 reflow（回流），进行渲染 会触发 repaint（重绘），因为没有发现位置变化，不进行渲染
是否是继承属性 不是继承属性，元素及其子元素都会消失 是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出

7. CSS 中 link 和 @import 的区别

  • 所属不同： link 属于 XHTML 标签，主要是用于定义文档与外部资源的关系，而 @import 完全是 CSS 提供的一种加载 CSS 的方式。
  • 加载顺序不同： 当页面被加载时，link 引用的 CSS 会被同时加载，而 @import 引用的 CSS 会等到页面全部被下载完成后再加载。
  • 兼容性不同（不再考虑）： @import 是 CSS 2.1 的内容。
  • 当使用 JavaScript 控制 DOM 改变样式时，只是使用 link 的方式，无法使用 @import 。

8. 什么是响应式设计，响应式设计的基本原理是什么

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做对应处理。

9. 为什么要初始化CSS样式

  • 兼容性处理： 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
  • SEO： 初始化样式会对 SEO 有一定的影响

补充说明：

  • * {padding: 0; margin: 0;} 这种初始化的方式，在应用较大、css样式较多时，* 会将所有便签初始化一次。

10. CSS3有哪些新特性

  • 实现圆角 border-radius，阴影 box-shadow，边框图片 border-image
  • 对文字加特效 text-shadow，强制文本换行 word-wrap，线性渐变 linear-gradient
  • 实现旋转 transform:rotate(90deg), 缩放 scale(0.85,0.90), translate(0px,-30px) 定位,倾斜 skew(-9deg,0deg);
  • 增加了更多的CSS选择器、多背景、rgba()
  • 唯一引入的伪元素是 ::selection；
  • 实现媒体查询 @media，多栏布局 flex
  • 过渡 transition 动画 animation

11. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）,双冒号是在当前规范中引入的，用于区分伪类和伪元素。

12. CSS优化、提高性能的方法有哪些

  • 移除空的css规则（Remove empty rules）
  • 正确使用 display 的属性
  • 不滥用浮动、web字体
  • 不声明过多的 font-size
  • 不在选择符中使用ID标识符
  • 遵守盒模型规则
  • 尽量减少页面重排、重绘
  • 抽象提取公共样式，减少代码量

13. 重绘和回流

回流一定会引起重绘，重绘不一定引起回流

具体请看：浏览器的重绘和回流

14. flex弹性布局

flex 容器的属性：

  • flex-direction 决定主轴排列方向，默认为 row 水平从左至右。
  • flex-wrap 决定是否换行，以及如何换行，默认为 nowrap 不换行。
  • flex-flow 即为flex-flow: <flex-direction> || <flex-wrap>;
  • justify-content 决定子元素在主轴上的对齐方式，默认为 flex-start 左对齐。
  • align-items 决定子元素在交叉轴上的对齐方式，默认为 stretch 占满整个容器高度。
  • align-content 决定当存在多个轴线，即子元素分多行时的对齐方式，默认为 stretch 子元素将占满整个容器高度。

flex 子元素的属性：

  • order 决定了元素的排列顺序，默认为 0。
  • flex-grow 决定子元素的放大比例，默认为 0，即存在空余空间时，也不进行放大。
  • flex-shrink 决定子元素的缩小比例，默认为 1，该属性不能设置为负值。
  • flex-basis 决定分配多余空间前，子元素占据的主轴空间，默认为 auto，即元素的本身大小。
  • flex 即为 flex: <flex-grow> <flex-shrink>? || <flex-basis> ]，该属性可以简写为 auto (1 1 auto) 和 none (0 0 auto)
  • align-self 元素的对齐方式，默认为 auto，表示继承父元素的 align-items 属性

注意：

设置为 Flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。

flex布局教程–阮一峰

15. grid 网格布局

Grid网格布局教程–阮一峰

16. css预处理器

  • less
  • sass
  • postcss
  • …
-------------本文结束感谢您的阅读-------------
0%