【学姐面试宝典】前端基础篇Ⅲ（CSS）

前言

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识！ 感兴趣的小伙伴一起来看看吧~🤞

说一下 css 盒模型

简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。 box-sizing(有 3 个值)：border-box，padding-box，content-box。

• 标准盒子模型：

• IE 盒子模型：

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异： 标准盒子模型的盒子宽度：左右 border+左右 padding+width IE 盒子模型的盒子宽度：width 在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box 表示标准的盒子模型， box-sizing:border-box 表示的是 IE 盒子模型。 最后，前面我们还提到了，box-sizing:padding-box，这个属性值的宽度包含了左右 padding+width 。 也很好理解性记忆，包含什么，width 就从什么开始算起。

画一条 0.5px 的线

• 移动端，采用 meta viewport 的方式

      //这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。

• 采用 border-image 的方式
• 采用 transform: scaleY()的方式

.px {
      border-bottom: 0.5px solid #000;
      transform: scaleY(0.5);
    }

link 标签和 import 标签的区别

• link 属于 html 标签，而@import 是 css 提供的
• 页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
• link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
• link 方式样式的权重高于@import 的。

transition 和 animation 的区别

transitions提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件的情况下也会随时间改变属性值，并且 transition 为 2 帧，从 from … to，而 animation 可以一帧一帧的。

Flex 布局

可以参考文章：Flex布局语法篇，Flex 布局实例篇 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 简单的分为容器属性和元素属性。 容器的属性： flex-direction：决定主轴的方向（即子 item 的排列方法）

.box { flex-direction: row | row-reverse | column | column-reverse; }

flex-wrap：决定换行规则

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

flex-flow：flex-direction属性和flex-wrap属性的简写形式

.box { flex-flow:  || ; }

justify-content：对齐方式，水平主轴对齐方式 align-items：对齐方式，竖直轴线对齐方式 项目的属性（元素的属性）： order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0。 flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大。 flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小。 flex-basis 属性：定义了在分配多余的空间，项目占据的空间。 flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。 align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖 align-items，默认属性为 auto，表示继承父元素的 align-items。比如说，用 flex 实现圣杯布局。

说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 padding 以及高度和宽度。 行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin 会失效。

visibility=hidden，opacity=0，display:none三者区别

opacity=0：该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些 事件，如 click 事件，那么点击该区域，也能触发点击事件的。 visibility=hidden：该元素隐藏起来了，但不会改变页面布局，不会触发该元素已经绑定的事件。 display=none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

position 属性的比较

1. 固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
2. 相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
3. 绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 < < /> />。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
4. 默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5. inherit：规定应该从父元素继承 position 属性的值。

浮动清除

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 清除浮动方法：具体可参考CSS技巧：清除浮动

css3 新特性

开放题。CSS3 边框如 border-radius，box-shadow 等；CSS3 背景如 background-size， background-origin 等；CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation 等。 具体可参考css3 新特性

CSS 选择器有哪些，以及优先级

• 分类：id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等。
• 同一元素引用了多个样式时，排在后面的样式属性的优先级高。
• 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器(属性选择器和伪类选择器优先级相同)
• 带有!important 标记的样式属性的优先级最高。
• 样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户 自定义样式 > 浏览器默认样式。

line-height 和 height 的区别

line-height 一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的。 height 一般是指容器的整体高度。

设置一个元素的背景颜色，背景颜色会填充哪些区域

background-color 设置的背景颜色会填充元素的 content、padding、border 区域。

inline-block、inline 和 block 的区别

display主要取值有 none，block，inline-block，inline，flex等。

• block：是块级元素，其前后都会有换行符，会独占一行，多个 block 元素会各自新起一行，能设置宽度，高度，margin/padding 水平垂直方向都有效。
• inline：不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下， 才会新换一行，其宽度随元素的内容而变化。设置 width 和 height 无效，margin 在竖直方向上无效，padding 在水平方向，垂直方向都有效，前后无换行符。
• inline-block：能设置宽度，高度，margin/padding 水平垂直方向都有效，前后无换行符。

css 预处理器有什么

less，sass 等。

今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下 🤞 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！ ⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！ ✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！