Bridge 个人博客

CSS

2022/5/6

# 1. CSS盒子模型

把 CSS 盒子模型分为content、padding、border 和 margin 四部分，可当成生活中的盒子去理解。content 即是盒子的内容，padding 是包裹在内容外边的填充物，border是盒子的边框，margin是盒子与其他盒子之间的距离。
盒子模型可分为两种：标准盒子模型（W3C盒模型）和怪异盒模型（IE盒模型）
标准盒：设定的 height 和 width 表示的是内容的大小；
怪异盒：设定的 height 和 width 表示的是内容+内边距（padding）+边框（border）的大小
可通过 CSS3 中的属性 box-sizing 指定盒子模型
box-sizing: content-size; ———— 标准盒
box-sizing: border-size; ———— 怪异盒

# 2. 选择器类型 (opens new window)

# 3. CSS优先级、权重计算

# 4. link 和 @important 的区别

1）link属于HTML标签，而@important是由CSS提供的；
2）页面加载时，link会被同时加载，而@important引用的CSS会在页面加载完成后再加载；
3）link无兼容问题，@important 在IE5以上才支持；
4）link方式引入的样式优先级高于@important

# 5. 为什么要初始化 CSS 标签

因为浏览器的兼容问题，不同浏览器对一些标签的默认值是不同的，如果不进行初始化，会导致页面显示出现问题。

# 6. CSS3 新增特性 (opens new window)

# 7. CSS动画和 JS 动画的区别

渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。

区别：
1）功能涵盖面，js比css大
2）实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
3）对帧速表现不好的低版本浏览器，css3可以做到自然降级
4）css动画有天然事件支持
5）css3有兼容性问题

# 8. CSS 动画相关

硬币旋转、绘制三角形、绘制正方体

# 9. CSS的刻度

# 10. CSS 定位（position）

  1. static 默认值，不脱离正常的文档流
  2. relative 相对定位，相对自己原先位置，原来的位置仍会占据空间
  3. absolute 绝对定位，相对第一个不为 static 的祖先节点偏移，脱离正常文档流
  4. fixed 固定定位，相对于浏览器窗口偏移，脱离正常文档流
  5. sticky 根据滚动位置在相对定位和固定定位转换，起初是相对定位，但窗口滚动到定义的偏移位置后则变成固定定位

# 11. CSS 布局 (opens new window)

# 12. 盒子塌陷是什么？

本应该在父盒子内部的元素跑到了外部。

关于盒子塌陷的几种解决方法

（1）最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面。缺点是非自适应，浏览器的窗口大小直接影响用户体验。

（2）给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

（3）给父盒子添加overflow属性。

overflow:auto; 有可能出现滚动条，影响美观。

overflow:hidden; 可能会带来内容不可见的问题。

（4）父盒子里最下方引入清除浮动块。最简单的有：
<br style="clear:both;"/>
有很多人是这么解决的，但是我们并不推荐，因为其引入了不必要的冗余元素 。

(5)用after伪元素清除浮动

给外部盒子的after伪元素设置clear属性，再隐藏它

这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。

.clearfix {*zoom: 1;}
 
.clearfix:before,.clearfix:after {
 
display: table;
 
line-height: 0;
 
content: "";
 
}
 
.clearfix:after {clear: both;}

这也是bootstrap框架采用的清除浮动的方法。

这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决CSS盒子塌陷。

备注：第五种方法虽好，但是低版本IE不兼容，具体选择哪种解决方法，可根据实际情况决定。

(6) 给父盒子添加border

(7) 给父盒子设置padding-top

为什么会出现盒子塌陷？
当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。

# 13. BFC

BFC (Block Formatting Context) 即块级格式化上下文，决定元素如何对其内容进行定位，以及和其他元素的关系和相互作用。也就是 BFC 是一个独立的布局空间，里面的内容不会影响到外部的布局。

触发 BFC 的条件：

  1. float 的值不为 none;
  2. position 的值不为 static 或 relative;
  3. display 的值为 table、fix、inline-block;
  4. overflow 的值不为 visible

BFC 规则：

  1. 内部的 Box 会在垂直方向一个接着一个放置;
  2. 内部的元素不会影响外部布局;
  3. 计算 BFC 高度时浮动元素也会被计算;
  4. 同一个 BFC 内的 margin 会出现重叠现象

# 14. Flex 与 Grid

flex 即弹性布局,是一种一维的布局方式，容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过 flex-direction 来决定主轴的方向。

  • 容器属性
    • flex-direction: row/ row-reverse/ column/ column-reverse
      定义主轴的方向
    • justify-content: center/ flex-start/ flex-end/ space-between/ space-around/ space-evenly
      定义主轴方向上的对齐方式
    • align-items: stretch/ center/ flex-start/ flex-end/ baseline
      定义交叉轴方向上的对齐方式
    • flex-wrap: nowrap/ warp/ wrap-reverse
      定义项目如何换行，默认项目都排列在一条线上不换行
    • flex-flow: 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • 项目属性
    • order: 项目排列顺序，数字越小排越前，默认为0
    • flex-grow: 定义项目放大比例
    • flex-shrink: 定义项目缩小比例
    • flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
    • flex: flex-grow + flex-shrink + flex-basis
    • align-self: 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

利用 flex 可以很简单地实现元素居中对齐，两列、三列自适应布局。flex 多用于移动端和小程序。

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。
擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。
IE10 以下不支持，手机端适配性较差

# 15. 回流和重绘

回流(重排): 当页面布局、元素的几何属性或元素内部的文字结构发生变化，导致页面需要重新构建，就会发生回流;
重绘: 当页面的布局、元素几何结构不变，而其他如颜色等样式发生变化时，就会发生重绘;
页面第一次构建时一定会触发一次回流和重绘
回流一定会触发重绘，重绘不一定会触发回流

如何避免重绘或者重排？

  1. 集中改变样式，不要一条一条地修改 DOM 的样式。
  2. 不要把 DOM 结点的属性值放在循环里当成循环里的变量。
  3. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
  4. 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
  5. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
  6. 动画开始GPU加速，translate使用3D变化
  7. 提升为合成层 将元素提升为合成层有以下优点：
  • 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
  • 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
  • 对于 transform 和 opacity 效果，不会触发 layout 和 paint

# 16. 最小字体？怎么设置更小

问题：使用font-size设置字体，最小只到12px，设置小于12字体也不会再缩小了。

原因：Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是12px

解决方案：使用 transform: scale() 缩放属性实现

  .d1{
    font-size: 12px;
    transform: scale(0.5);   /* 缩放为0.5，即6px */
    transform-origin: 0 0;   /* 左对齐 */
  }

HTML