CSS基础

版本问题

• 最广泛的版本 CSS2.1，最新版本 CSS3（分块升级）
• 判断浏览器支持 CSS 情况，CAN I use
• 标准的制定者是 W3C，搜索 CSS3 spec 可以找到并查看最新标准，目前 CSS2.1 有人工翻译的版本可供查阅参考

语法

• 选择器 {

  属性名：属性值;

  /_ 注释 _/

  }

• at 语法

  @charset “UTF-8”;

  @import url(“2.css”); 这个是 CSS 语法

  • @import “2.css”; 与@import url(“2.css”);一样
  • 最后的分号必不可少
  • 必须放在 CSS 文件开头
  • 效率一般，没有 JS 模块快和灵活，所以用的比较少

  @media(min-width:100px) and (max-width:200px) {

  语法一

  }

  • @charset 必须放在第一行
  • 前两个 at 语法必须以;结束
  • charset 是字符集，但 UTF-8 是字符编码 encoding，这是历史遗留问题，这里确定的是 文件编码

文档流

• 流动方向
  • inline 元素从左往右，到最右边换行
  • block 元素从上往下，每一个都另起一行
  • inline-block 也是从左往右
• 宽度
  • inline 宽度为内部 inline 元素的和，不能用 width 指定
  • block 默认自动计算宽度(这里需要说明一点就是自动就算宽度不代表就是 100%，指的是填充满，比如有边框的情况，任何尽量不要让宽度设置为 100%)，可与 width 指定
  • inline- block 结合前两者特点，可用 width
• 高度
  • inline 高度由 line- height 间接确定，和 height 无关
  • block 高度由内部文档流元素决定，可以是设 height
  • Inline-block 和 block 类似，可以设置 height
• 脱离文档流
  • 浮动 定位

盒模型

• 两个模型

  • 分别是什么
    • content-box 内容盒 width 只包含 content 的宽度
    • border-box 边框盒 width 包含 border、padding、border 的宽度
  • 公式
    • content-box width = 内容宽度
    • border-box width = 内容宽度+padding _ 2+border _ 2

• margin 合并（只发生在上下 margin）

  • 那些情况会合并，
    • 兄弟 margin 合并
    • 父子 margin 合并
  • 如何阻止合并
    • 兄弟合并是符合预期的
    • 兄弟合并可以用 inline- block 消除
    • 父子合并解决
      • 父元素设置 border/padding
      • 父元素设置 overflow:hidden
      • display:flex

单位

• 长度单位
  • px
  • em 相对于自身 font-size 的倍数
  • 百分数
  • 整数
  • rem
  • vw,vh
• 颜色
  • 十六进制
  • RGBA
  • HSL 颜色