Skip to main content

css

盒模型介绍 √✨​

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。 两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

  • 标准盒模型：只包含 content 。
  • IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

  • box-sizing: content-box ：标准盒模型（默认值）。
  • box-sizing: border-box ：IE（替代）盒模型。

选择器优先级 √✨​

  • 内联样式
  • ID 选择器的数量
  • 类选择器、属性选择器、伪类选择器数据之和
  • 标签选择器和伪元素选择器之和

BFC 工作原理 √​

BFC 是块级格式上下文，是盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外面的元素相互不影响。

创建 BFC 的方式有：

  • html 根元素
  • float 浮动
  • 绝对定位
  • overflow 不是 visible
  • display 是 table 或 flex

BFC 主要的作用是：

  • 清除浮动
  • 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

编写高效的 CSS √✨​

CSS 匹配顺序：

  • 浏览器从最右边的选择器，向左依次匹配，根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。

  • 比如 p span，浏览器找到所有的 span 元素，遍历它的父元素直到根元素，找到 p 元素

高效 CSS 原则：

  • 选择器匹配语句链越短，浏览器的匹配速度越快。

  • 避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须进行大量的工作，去判断这些元素的父元素们是否匹配

什么情况下使用 translate 而不用绝对定位 √✨​

两者都不会触发重绘回流 transform 使浏览器为元素创建一个 GPU 图层，更高效的绘制动画，可以缩短平滑动画的绘制时间。

水平垂直居中多种实现方式​

  • 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

  • 利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。

  • 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。

  • 利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓的。

画一个三角形 √✨​

通过边框的均分原理

div {
  width: 0px;
  height: 0px;
  border-top: 10px solid red;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}

line-height 如何继承？​

父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。 父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例。 父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值。