太空编程

# CSS

# 1 两种隐藏元素方式 display: none; 与 visibility: hidden; 的区别

  • display: none; 会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden; 不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
  • display: none; 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden; 是继承属性，子孙节点消失由于继承了hidden，通过设置 visibility: visible; 可以让子孙节点显式
  • 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。
  • 读屏器不会读取 display: none; 元素内容；会读取 visibility: hidden; 元素内容

# 2 盒模型

页面渲染时，dom 元素所采用的布局模型。可通过 box-sizing 进行设置。根据计算宽高的区域可分为

  • content-box (W3C 标准盒模型)
  • border-box (IE 盒模型)
  • padding-box
  • margin-box (浏览器未实现)

# 3 BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件:

  • 根元素
  • position: absolute / fixed
  • display: inline-block / table
  • float 元素
  • ovevflow !== visible

规则:

  • 属于同一个 BFC 的两个相邻 Box 垂直排列
  • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  • BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box 的左边相接触 (子元素 absolute 除外)
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时，浮动子元素也参与计算
  • 文字层不会被浮动层覆盖，环绕于周围

应用:

  • 阻止 margin 重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div 都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖

# 4 居中布局

水平居中

  • 行内元素: text-align: center
  • 块级元素: margin: 0 auto
  • absolute + transform
  • flex + justify-content: center

垂直居中

  • line-height: height
  • absolute + transform
  • flex + align-items: center
  • table

水平垂直居中

  • absolute + transform
  • flex + justify-content + align-items

# 5 选择器以及优先级

    • 1.id选择器（ # myid）
    • 2.类选择器（.myclassname）
    • 3.标签选择器（div, h1, p）
    • 4.相邻选择器（h1 + p）
    • 5.子选择器（ul > li）
    • 6.后代选择器（li a）
    • 7.通配符选择器（ * ）
    • 8.属性选择器（a[rel = "external"]）
    • 9.伪类选择器（a: hover, li:nth-child）
  • !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
  • 选择器 从右往左 解析

# 6 弹性盒子中 flex: 0 1 auto 分别表示什么

三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为 0 1 auto。

  1. flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  2. flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  3. flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

# 7 link 与 @import 的区别

  • link 功能较多，可以定义 RSS，定义 Rel 等作用，而 @import 只能用于加载 css
  • 当解析到 link 时，页面会同步加载所引的 css，而 @import 所引用的 css 会等到页面加载完才被加载
  • @import 需要 IE5 以上才能使用
  • link 可以使用 js 动态引入，@import 不行

# 8 伪类和伪元素

CSS 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分

伪类

伪类存在的意义是为了通过选择器找到那些不存在 DOM 树中的信息以及不能被常规 CSS 选择器获取到的信息

  1. 获取不存在与 DOM 树中的信息。比如 a 标签的 :link、visited 等，这些信息不存在与 DOM 树结构中，只能通过 CSS 选择器来获取；
  2. 获取不能被常规 CSS 选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的 CSS 选择器获取，但可以通过 :first-child 来获取到。

伪元素

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

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素

::after和:after的区别

在实际的开发工作中，我们会看到有人把伪元素写成 :after，这实际是 CSS2 与 CSS3 新旧标准的规定不同而导致的。 CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如 :first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如 ::selection，就必须写2个冒号了

CSS3新增伪类有那些？

  • p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  • p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
  • p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
  • p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
  • :after 在元素之前添加内容,也可以用来做清除浮动。
  • :before 在元素之后添加内容。
  • not(elem) 选择非 elem 元素的每个元素。
  • :enabled 控制表单控件的禁用状态。
  • :disabled 控制表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

# 9 ::before 和 :after中双冒号和单冒号 有什么区别？

单冒号 : 用于CSS3伪类，双冒号 :: 用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如 :first-line、:first-letter、:before、:after 等，而新的在 CSS3 中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前，使用 ::before，否者，使用 ::after；在代码顺序上，::after 生成的内容也比 ::before 生成的内容靠后。如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上。