CSS面试复习(二):CSS的使用

一、CSS基础

1、选择器

选择器{

属性:值;

属性:值

}

作用:用于匹配HTML元素、分类和权重、解析方式和性能、值得关注的选择器

分类:

  • 元素选择器a{}
  • 伪元素选择器::before{}
  • 类选择器 .link{}
  • 属性选择器[type=radio]{}
  • 伪类选择器 :hover{}
  • ID选择器#id{}
  • 组合选择器 [type=checkbox]+labei{}
  • 否定选择器 :not(.link){}
  • 通用选择器*{}

权重:

  • ID选择器 #id{} +100
  • 类 属性 伪类 +10
  • 元素 伪元素 +1
  • 其它选择器 +0

2、非布局样式

字体

  • 字体族
  • 多字体fallback
  • 网络字体、自定义字体
  • 网站:iconfont.cn

行高

  • 行高的构成
  • 行高相关的现象和方案
  • 行高的调整

背景

边框

滚动

文本折行

装饰性属性

3、hack 和案例

二、CSS布局

1 、布局简介

2、 布局方式(表格)

3、 一些布局属性

4、 flexbox布局

5、 float布局

6 、inline-block布局

7 、响应式布局

8 、主流网站使用的布局方式

三、CSS效果

1 、box-shadow

2 、text-shadow_x264

3、 border-radius

4、 background

5、 clip-path

6、 3D-transform

四、CSS动画

1 、动画介绍

2 、transition动画(1)

4、 keyframes动画

5、 逐帧动画

上一篇:CSS面试复习(三):预处理器、工程化方案、三大框架中的CSS


下一篇:HTML和CSS的复习总结