CSS 基础回顾

[shuangmianxiaoQ]

选择器

1. 解析方式和性能 浏览器解析CSS选择器是从右往左解析的，这样做的目的是为了加快浏览器解析CSS的速度

2. 伪元素和伪类的区别

   • 伪类是指当鼠标指向一个元素时某种状态下的样式，用单冒号，如:hover
   • 伪元素是一种真实存在于页面中可以被显示的元素，用双冒号，如::before

3. 选择器权重

   • ID选择器 +100
   • 类 属性 伪类 +10
   • 元素 伪元素 +1
   • 其他选择器 +0
   • !important 优先级最高
   • 元素属性即内联样式 优先级高
   • 相同权重 后写的生效

非布局样式

字体

• 字体族
  • serif 衬线字体
  • sans-serif 非衬线字体
  • mononspace 等宽字体
  • cursive 手写体
  • fantasy 花体
• 多字体 fallback机制，指定多个字体，如果找不到往后找
• 网络字体、自定义字体
• iconfont

行高

• 行高的构成 行高是作用在每一个行框盒子(line-box)上的，而行框盒子是由内联盒子(inline-box)组成的，所以行高是由内联盒子的高度决定的
• 行高相关的现象和解决方案
  1. 利用行高将元素垂直居中
  2. 文字对齐方式，文字默认是按照baseline基线对齐的，可以修改vertical-align来修改文字的对齐方式
  3. 图片3像素问题，因为图片时内联元素，默认按照基线对齐，所以底部会多出3像素，解决办法是修改图片的vertical-align或设置图片为块级元素

背景

• 背景颜色
  • 颜色单词，red, green...
  • hsl(色相, 饱和度, 亮度)
  • rgb()
• 渐变色背景
  • 线性渐变：background: linear-gradient(135deg, red 0, green 20%, yellow 50%, blue 100%);
  • 径向渐变
• 多背景叠加 实现网格背景：

  background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
            linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
  background-size: 31px 31px;

• 背景图片和属性（雪碧图） backgorund-repeat, background-position, background-size...
• base64 和性能优化
• 多分辨率适配

边框

• 边框背景图

  border: 30px solid transparent;
  border-image: url(./border.png) 30 round;

• 边框衔接（三角形）

  width: 0;
  height: 200px;
  border-bottom: 30px solid red;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-radius: 20px;

文字折行

• overflow-wrap 通用换行控制，是否保留单词
• word-break 针对多字节文字，中文句子也是单词
• white-space 空白处是否换行

装饰性属性及其他

• 字重（粗体） font-weight
  • bold -> 400
  • bloder, lighter -> 比继承的字重更粗或更细
  • 100, 200, ..., 900 -> 越来越粗
• 斜体 font-style: itatic
• 下划线 text-decoration
• 指针 cursor

hack 和案例

• CheckBox 美化

  <div class="checkbox">
  <input type="checkbox" id="handsome">
  <label for="handsome">我很帅</label>
  </div>

  .checkbox > input {
  display: none;
  }
  // 选中时
  .checkbox > input:checked + label {
  background-image: url('checked.png');
  }
  // 未选中时
  .checkbox > input + label {
  background-image: url('unchecked.png') left center no-repeat;
  background-size: 20px 20px;
  padding-left: 20px;
  }

面试真题

1. CSS样式（选择器）的优先级
   • 计算权重确定
   • 后写的优先级高
   • 内联样式
   • !important
2. 雪碧图的作用
   • 减少HTTP请求数量，提高加载性能
   • 某些情况下可以减少图片大小
3. 自定义字体的使用场景
   • 宣传/品牌/baner等固定文案
   • 字体图标
4. base64的使用
   • 减少HTTP请求
   • 适用于小图片
   • base64的体积约为原图的4/3
5. 伪元素和伪类的区别
   • 伪类表状态，伪元素是真实的有元素
   • 伪类单冒号，伪元素双冒号