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 颜色

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!