css基础概念

css知识点

盒子模型：

• w3c标准盒子模型： width只包括 content
• ie盒子模型： width只包括 content + padding + border

清楚浮动的方法

清楚浮动是为了，解决 子元素浮动导致父元素高度塌陷的问题

• 伪类 clear：both
• 常用 overflow：hidden

常用居中方式

1、text-align: cneter

2、margin： 0 auto

3、dispaly: flex;
justfly-content： center；

4、父元素设置相对定位，子元素设置绝对定位，然后： left： 50%;
top: 50%;
transform：translatē（-50%， —50%）

伪类与伪元素

状态类：

：hover 鼠标悬停时触发
：visited  选择访问过的链接
：link 选择未访问的链接
：focus   选择获取焦点的输入字段

结构类：

：first-child   匹配第一个子元素
：last-child  最后一个子元素
： nth-child(2n)  选择偶素类元素

表单类：

:chencked  选中
:deafult  默认
:disabled  禁止

css动画与渐变

动画主要分三种：

1、transition 实现渐变动画
2、transform 实现转动动画
3、animation 实现自定义动画

css渐变色主要分为两种：

1、linear-gradients 线性渐变色
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

2、 radial-gradients 径向渐变
径向渐变（Radial Gradients）- 由它们的中心定义

HTML5与CSS3新增元素

HTML5:

• 标签

  • 视频标签 video
  • 音频标签 audio
  • 语义化标签 nav/ aside等
• 属性
  增强表单 input的type属性
  meta的charest设置字符集
  script 增加 async 实现异步加载
• 储存
  loacalStorge
  sessionStroge
  indexDB
• api
  canvas绘图
  svg 绘图
  api拖放
  地理定位等

CSS3:

• 圆角
• 文字阴影 盒子影音
• 图片背景
• 颜色渐变
• 动画等

rem em px的区别

• px 相对长度单位，是相对于屏幕分辨率而言的
• em 相对长度单位，相对于当前对象内文本的字体尺寸
• rem 默认情况下font-size = 16px,那么1rem = 16px,是CSS3新增的一个相对单位，这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素