关于css: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 根元素