CSS面试整理

salvatore
196 阅读7分钟

css 中一些比较好的问题

css伪类与伪元素的区别

  1. 伪类：:hover :active :visited :link :visited :first-child :focus :lang等主要是用来选择dom树以外的信息，不能被普通选择器选择的文档之外的元素，通常用来添加一些选择器的特殊效果

  2. 伪元素：::before ::after，创建通常不存在与文档中的元素，⽤于将特殊的效果添加到某些选择器

css 选择器的优先级

!important > 行内样式 > id > class > tag > 属性名

盒模型

在 CSS 中我们广泛地使用两种"盒子": 块级盒子和内联盒子,这两种盒子会在页面流和元素之间的关系表现出不同的行为

  1. 块级盒子
  • 盒子会在内联方向向上扩展并占据父容器在该方向上的所有可用空间,在绝大多数情况下意味着盒子会和父容易一样宽
  • 每个盒子都会换行
  • w/h 属性可以发挥作用
  • 内边距,外边距和边框会将其他元素从当前盒子周围"推开"
  1. 内联盒子
  • 盒子不会产生换行
  • w/h 属性不起作用
  • 内边距,外边距以及边框会被应用但是不会把其他内联盒子推开

盒模型图解

标准盒模型

box-sizing: content-box;

content-box.png

  • content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

IE 盒模型

box-sizing: border-box;

IE-box.png

  • border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px,那么这 100px 会包含其它的 border 和 padding，内容区的实际宽度会是 width 减去 border + padding 的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
  • border-box 不包含 margin

css隐藏元素的几种方式，区别是什么

display:none、visibile:hidden、opacity:0 的区别

是否隐藏是否在文档中占用空间是否会触发事件
display: none是否否
visibility: hidden是是否
opacity: 0是是是

对BFC的理解

全称：block formatting content

触发BFC的盒子，会独立控制一块渲染区域，具有一下特性

  1. 不同的bfc盒子渲染互不干扰
  2. 他的自动高度会计算盒子里的浮动元素
  3. 他的边框不会和浮动元素重合
  4. 不会和他的子元素进行外边距合并

哪些情况会触发BFC

  1. float不为none
  2. overflow不为visible
  3. position为absolute或者fixed
  4. display为block、flex、inline-flex、table-cell等

position 和 z-index

  1. position 有哪几种？

  • static：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

  • relative：相对于自己定位

  • absolute：相对于祖元素有定位的元素定位

  • fixed：在祖元素 transform 不为 none 的时候更具窗口定位，有 transform 的时候基于 transform 定位

  • sticky：粘性布局时候会使用到，但是即使是在移动端兼容性也比较差，所以我目前还没有过

  1. z-index：只在 position 不为 static 的时候生效；没有定义 z-index 的值，元素按照他们出现在 dom 中的顺序堆叠（层级越低，出现的位置越考上）。非静态定位的元素（及其子元素）将始终覆盖在静态定位（static）的元素，而不管 html 层级结构

显示问题，z-index 相对于父元素设置，什么意思呢？AB 同一级 C 为 B 的子级，z-index 值得顺序:C>A>B,A 永远会在 C 的上面，这个例子就很能够说明情况

flex属性是那几个属性的缩写，默认值分别是什么

  1. 第一个参数是：flex-grow 0
  2. 第二个参数是：flex-shrink 1
  3. 第三个参数是：flex-basis auto

flex: flex-grow flex-shrink flex-basis

所以flex属性的默认值是flex： 0 1 auto

  1. 空间分配： flex-grow: 0(默认) | <number>；如果有值按照对应的比例分配空间
  2. 收缩程度： flex-shrink: 1(默认) | <number>；如果有值按照对应的值缩小
  3. 空间大小： flex-basis: auto(默认) | <width>；通常我们用width/height来代替这个属性

雪碧图（css sprites）？，如何实现

  1. 雪碧图是把多张图片整合到一张图片上面，他被运用在众多使用了很多小图标的网站上

  2. 生成方法：

  • 使用生成器将多张图片打包成一张雪碧图，并为其生成何使的 CSS（webpack 就可以完成这一步，当然也有一些专门的软件）

  • 每张图片都有相应的类类的 background 有相关的信息，可以根据类名拿到打包之前的图片

好处：

  1. 减少 http 请求

  2. 提前加载好图片，防止在需要的时候才开始下载引发的问题，eg：hover 时候的图片，页面抖动

缺点：

  1. 只能作为背景图

响应式设计和自适应设计有何不同？

响应式和自适应都以提高不同设备的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整

  1. 响应式设计的适应性原则：网站应该凭借一套代码，在各种设备上都有良好的显示和使用效果，响应式网站通过媒体查询，自使用栅格和图片响应式，基于多种因素进行变化，创造出优良的用户体验，就像一个球通过膨胀和收缩，来使用适应不同的篮圈

  2. 自适应设计的原则：更像是渐进式增强的代码解释，与响应式单一地区适配不同，自适应设计通过检测设备和其他特征，从早已定义好的一系列视窗大小和其他特征中，选出最恰当的功能和布局，像是允许多个球一样，然后根据不同的篮筐大小，去选择一个最合适的

过度和动画的区别是什么

  1. transition：可以在一定的时间内实现元素得状态过渡为最终状态，用于模拟一种过渡动画效果但是功能有限，只能制作简单得动画效果

  2. animation：可以制作类似于 flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画

  3. js 动画与 css 动画差异：js 动画代码上面复杂一些性能不如 css 好，好处在于能够让动画停止取消等，有事件操作

sticky-footer 的解决方案

这个方法就是为了让 footer 流式布局，实现方案有几种，我按照我想到的说几种吧

  1. flex：1 的做法，注意兼容性

  2. content.height：calc(100%-footer.height)

  3. 类似于圣杯布局的做法

<body>
  <div class="wrapper">
    <div class="content"></div>
  </div>
  　 　　
  <div class="footer"></div>
</body>

html,
body,
.wrapper {
  height: 100%;
}
body > .wrapper {
  height: auto;
  min-height: 100%;
}
.content {
  padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}
.footer {
  position: relative;
  margin-top: -150px; /* footer高度的负值 */
  height: 150px;
  clear: both;
}

link与@import的区别

  1. 加载时机不同：

link 是 html 标签加载 dom 时会同步加载 link 标签的内容，@import引入的资源需要等 dom 加载完成之后加载

  1. js的可操作性性不同

link 标签可以通过 js 动态插入到文档中，@import不可以

补充：

  1. preload 更关注当前页面的资源加载优先级，为当前显示的页面做优化
  2. prefetch 关注其他页面的资源加载，为未来用户可以进入的页面做显示优化
  3. dns-prefetch 关注跨域资源的请求，提前做好 DNS 解析
avatar
文章
阅读
粉丝