# CSS 基础

# 普通文档流

什么是普通流/正常流/文档流（normal flow）？和文本流（text flow）有什么区别？

具体来说“Normal flow”是 css 中定位的一种默认情况，平时我们所说的 BFC、IFC 等都是“Normal flow”的情况下的规则。

当元素浮动的时候,会先遵循“Normal flow”的规则，然后尽可能的向俩边靠。所以 float 并不是会脱离文档流，反而是依赖于文档流。

一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。

脱离文档流有三种方式

• position:absolute
• position:fixed
• float

至于文本流，我自己还没有看到这种解释的。在“Normal flow”中，BFC 规则中，文本会围绕在浮动元素旁边。出现了这种现象，可能国人就自定义了“文本流”这种东西。

总结：表面上看，float 脱离了“文档流”，没有脱离“文本流”；position 中的 absolute 和 fixed 全部脱离。这种解释也合情合理，是标准答案。实际上官方的英文文档是我上面的那种解释。

# CSS 有几种定位方式？

• static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。
• relative：相对定位，此时的『相对』是相对于正常文档流原来的的位置，另外还会空出本来的位置。
• absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为 relative，它会相对他的父级而产生偏移。当然如果有滚动的情况，会随着父级内容一起滚动。常用场景比如图标右上方的消息红点，可以给父元素设置 relative，红点设置 absolute，并且将 right 和 top 设为 0。
• fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。
• sticky：粘性定位，特性近似于 relative 和 fixed 的合体，其在实际应用中的近似效果就是 IOS 通讯录滚动的时候的『顶屁股』。同级的粘性定位会相互叠加，非同级的时候会将其他元素顶开。

# 了解元素层叠，z-index 么？

# display 有哪些？

# 水平居中有几种方式？

# 说说盒模型？

首先，取得元素的内容来放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距 --- 就是我们之前看到的盒子模型。

# background color 显示范围是哪些？

# flex 1 全写？

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性

flex-shrink属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

flex-basis 属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如 350px），则项目将占据固定空间。

# calc 遇到过什么问题吗？

# CSS3 动画（简单动画的实现，如旋转等）

• 依靠CSS3中提出的三个属性：transition、transform、animation
• transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定义元素的变化结果，包含rotate、scale、skew、translate。
• animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

# CSS 如何优化？

在给出 CSS 选择器方面的优化建议之前，先告诉大家一个小知识：CSS 引擎查找样式表，对每条规则都按从右到左的顺序去匹配。 看如下规则：

#myList  li {}

这样的写法其实很常见。大家平时习惯了从左到右阅读的文字阅读方式，会本能地以为浏览器也是从左到右匹配 CSS 选择器的，因此会推测这个选择器并不会费多少力气：#myList 是一个 id 选择器，它对应的元素只有一个，查找起来应该很快。定位到了 myList 元素，等于是缩小了范围后再去查找它后代中的 li 元素，没毛病。

事实上，CSS 选择符是从右到左进行匹配的。我们这个看似“没毛病”的选择器，实际开销相当高：浏览器必须遍历页面上每个 li 元素，并且每次都要去确认这个 li 元素的父元素 id 是不是 myList，你说坑不坑！

说到坑，不知道大家还记不记得这个经典的通配符：

* {}

入门 CSS 的时候，不少同学拿通配符清除默认样式（我曾经也是通配符用户的一员）。但这个家伙很恐怖，它会匹配所有元素，所以浏览器必须去遍历每一个元素！大家低头看看自己页面里的元素个数，是不是心凉了——这得计算多少次呀！

这样一看，一个小小的 CSS 选择器，也有不少的门道！好的 CSS 选择器书写习惯，可以为我们带来非常可观的性能提升。根据上面的分析，我们至少可以总结出如下性能提升的方案：

• 避免使用通配符，只对需要用到的元素进行选择。

• 关注可以通过继承实现的属性，避免重复匹配重复定义。

• 少用标签选择器。如果可以，用类选择器替代，举个🌰：

  错误示范：

  #myList li{}
  

  课代表：

  .myList_li {}
  

• 不要画蛇添足，id 和 class 选择器不应该被多余的标签选择器拖后腿。举个🌰：

  错误示范

  .myList#title
  

  课代表

  #title
  

• 减少嵌套。后代选择器的开销是最高的，因此我们应该尽量将选择器的深度降到最低（最高不要超过三层），尽可能使用类来关联每一个标签元素。

# 什么是BFC，作用有哪些？哪些情况下会触发BFC？

BFC（块级格式化上下文），是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。它与普通的块框类似，但不同之处在于: （1）可以阻止元素被浮动元素覆盖。 （2）可以包含浮动元素。 （3）可以阻止margin重叠。 满足下列条件之一就可触发BFC： 【1】根元素，即HTML元素 【2】float的值不为none 【3】overflow的值不为visible 【4】display的值为inline-block、table-cell、table-caption 【5】position的值为absolute或fixed