<
CSS常用
>
上一篇

React-native 练手项目 下一篇

如何使用Jekyll + github 搭建一个个人博客

CSS基础

本章是CSS考点的非重难点，因此我们采用简略回答的方式进行撰写，所以不会有太多详细的解释。

我们约定，每个问题后我们标记『✨』的为高频面试题

CSS选择器的优先级是怎样的？✨

CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

就比如下面的选择器，它不存在内联样式，所以A=0,不存在id选择器B=0,存在一个类选择器C=1,存在三个标签选择器D=3，那么最终计算结果为: {0, 0, 1 ,3}

ul ol li .red {
    ...
}

按照这个结算方式，下面的计算结果为: {0, 1, 0, 0}

#red {

}

我们的比较优先级的方式是从A到D去比较值的大小，A、B、C、D权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。

比如第二个例子的B与第一个例子的B相比，1>0,接下来就不需要比较了，第二个选择器的优先级更高。

link和@import的区别？

有哪些方式（CSS）可以隐藏页面元素？

还有一些靠绝对定位把元素移到可视区域外，或者用clip-path进行裁剪的操作过于Hack，就不提了。

em\px\rem区别？

块级元素水平居中的方法？

如果使用Hack的话，水平居中的方法非常多，我们只介绍主流的，奇葩的见拓展阅读

margin:0 auto方法

  .center{
      height: 200px;
      width:200px;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>

flex布局，目前主流方法

  .center{
      display:flex;
      justify-content:center;
  }
  <div class="center">
      <div class="flex-div">1</div>
      <div class="flex-div">2</div>
  </div>

table方法

  .center{
      display:table;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>
还有一些通过position+(margin transform)等方法的不一样列举了，非重点没必要。

拓展阅读: 16种方法实现水平居中垂直居中

CSS有几种定位方式？

文字描述很难理解，可以直接看代码

See the Pen bPVNxj by Iwobi (@xiaomuzhu) on CodePen.

如何理解z-index？✨

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。

我们可以把视图上的元素认为是一摞书的层叠，而人眼是俯视的视角，设置z-index的位置，就如同设置某一本书在这摞书中的位置。

2019-06-14-02-19-16

可以结合这个例子理解z-index

See the Pen xowqjG by Iwobi (@xiaomuzhu) on CodePen.

如何理解层叠上下文？✨

是什么？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

如何产生？

触发一下条件则会产生层叠上下文：

拓展阅读：层叠上下文-张鑫旭

清除浮动有哪些方法？

在flex已经成为布局主流之后，浮动这种东西越来越少见了，毕竟它的副作用太大

你对css sprites的理解，好处是什么？

是什么 ？

雪碧图也叫CSS精灵， 是一CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图。

如何操作？

使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。 使用图片时，将相应的类添加到你的元素中。

好处：

不足：

你对媒体查询的理解？

是什么

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身,非常适合web网页应对不同型号的设备而做出对应的响应适配。

如何使用？

媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会生效。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

拓展阅读：深入理解CSS Media媒体查询

你对盒模型的理解✨

是什么？

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

2019-06-14-04-15-49

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

标准盒模型和怪异盒模型有什么区别？✨

在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。

因此，标准盒模型下：

元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

2019-06-14-04-25-26

而IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，而是border-left + padding-left + content的宽度值 + padding-right + border-right之和，height同理。

在怪异盒模型下：

元素占据的宽度 = margin-left + width + margin-right

2019-06-14-04-25-04

虽然现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing。

box-sizing: content-box // 标准盒模型
box-sizing: border-box // 怪异盒模型
box-sizing: padding-box // 火狐的私有模型，没人用

此演示来源于拓展阅读文章

See the Pen LKpyzz by Iwobi (@xiaomuzhu) on CodePen.

拓展阅读：深入理解盒模型

谈谈对BFC的理解✨

是什么？

书面解释：BFC(Block Formatting Context)这几个英文拆解

BFC是指一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.

它的作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离.

如何形成？

BFC触发条件:

作用是什么？

防止margin发生重叠

See the Pen NZGjYQ by Iwobi (@xiaomuzhu) on CodePen.

两栏布局，防止文字环绕等

See the Pen XLmRPM by Iwobi (@xiaomuzhu) on CodePen.

防止元素塌陷

See the Pen VJvbEd by Iwobi (@xiaomuzhu) on CodePen.

拓展阅读：深入理解BFC

为什么有时候人们用translate来改变位置而不是定位？

translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。

而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。

拓展阅读:CSS3 3D transform变换-张鑫旭

伪类和伪元素的区别是什么？

是什么？

伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

区别

其实上文已经表达清楚两者区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。

我们通过p::before对这段文本添加了额外的元素，通过 p:first-child改变了文本的样式。

See the Pen qzOXxO by Iwobi (@xiaomuzhu) on CodePen.

拓展阅读：伪类与伪元素

你对flex的理解？✨

web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局

> 具体用法移步阮一峰的flex语法、flex实战，讲得非常通俗易懂，而且我们一两句话说不清楚。

关于CSS的动画与过渡问题

深入理解CSS动画animation

深入理解CSS过渡transition

参考资料：

  1. 盒模型
Top
Foot