2023前端面试题二

图片

• png 无损压缩，尺寸体积要比jpg的大，适合做小图标
• jpg 采用压缩算法，有一点失真，比png体积要小，适合做中大图片
• gif 一般是做动图的
• webp 同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积

css的盒子模型

• 标准盒子模型
  margin/border/padding/content
• ie盒子模型
  margin/content(border+padding+content)
• 盒子模型转换
  box-sizing/content-box 标准/border-box ie模型

行高

• line-height
  每一行文字的高度，如果文字有多行，则高度为行数*高度
• height
  是一个死值，就是这个盒子的高度

css的选择符，哪些可以继承

• 通配*
• id选择器 #
• class选择器 .
• 标签选择器 div
• 相邻选择器 +
• 后代选择器 ul li
• 子元素选择器 >
• 属性选择器 a[href]
• css可以继承的属性
  font-size
  color
  line-height
  text-align
• css不可以继承的属性
  border
  padding
  margin

css优先级算法

!important>内联样式>id>class>标签>通配