本篇文章将给大家总结分享75道前端面试CSS中的高频考点，帮助同学们力闯秋招，赶快收藏起来学习啦！

【整理分享】75道前端面试CSS中的高频考点

前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

理论篇

1. box-sizing 属性值有什么作用？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content部分的高/宽

【学习视频分享：css视频教程、web前端】

CSS position属性用于指定一个元素在文档中的定位方式。

absolute 的元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素进行定位，确定元素位置。绝对定位的元素可以设置外边距，且不会与其他边距合并。

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。

块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

区别：

是否另起一行：认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
是否可设置宽高：块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。而行内元素设置 width, height 无效。
是否可设置内外边距：块级元素都可，行内元素的水平方向的 padding-left/right, margin-left/right 都产生边距效果，但是竖直方向的 padding-top/bottom, margin-top/bottom 都不会产生边距效果。（也就是水平方向有效，竖直方向无效）
是否包含对方：块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

1、常见的行内元素

<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img>

2、常见的块级元素

<div>、<p>、<li>、<h1> ~ <h6>、<form>、<header>、<hr>、<ol>、<ul>、<article>、<aside>、<dd>、<dl>

可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持。

flex 是 flex-grow, flex-shrink 和 flex-basis的简写。

除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式：

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } 登录后复制

当 flex 取值为 0 时，对应的三个值分别为 0 1 0%


.item {flex: 0;} .item {     flex-grow: 0;     flex-shrink: 1;     flex-basis: 0%; }
登录后复制