CSS 概念

久崎
189 阅读4分钟

CSS （层叠样式表）

层叠指什么？

样式层叠

  • 可以多次对同一选择器进行样式声明

选择器层叠

  • 可以用不同选择器对同一元素进行样式声明

文件层叠

  • 可以用多个文件进行层叠

这些特性使得 CSS 极度灵活

  • 这也为 CSS 后来被吐槽留下了隐患

CSS 历史

  • CSS2.1 使用最广泛
  • CSS3 开始分模块

哪些浏览器支持哪些特性

  • 使用 caniuse.com

CSS 语法

语法一：样式语法

选择器{
    属性名: 属性值;
    /*注释*/
}
  • 注意事项：
    • 所有符号都是英文符号，如果写错了，浏览器会警告
    • 区分大小写，a 和 A 是不同的东西
    • 没有 // 注释
    • 最后一个分号可以省略，都不会报错，浏览器会直接忽略

语法二：at 语法

  • @charset "UTF-8";
  • @import url(2.css);
  • @media (min-width: 100px) and (max-width: 200px){ 语法一 }
  • 注意事项：
    • @charset 必须放在第一行
    • 前面两个 at 语法必须以分号 ; 结尾
    • charset 是字符集的意思，但 UTF-8 是字符编码 encoding

如何调试CSS

  • 使用 W3C 验证器 （在线/命令行工具） 好用但麻烦
  • 使用 VSCode 看颜色
  • 使用 WebStorm 看颜色 （靠谱）
  • 使用开发者工具看警告

如何使用开发者工具

  • 找到你脑中的标签
  • 看它是否有选择器
  • 看它的样式是否被划掉
  • 看它的样式是否有警告

border 调试法

  • 步骤
    • 怀疑某个元素有问题
    • 就给这个元素加 border
    • border 没出现？ 说明选择器错了或者语法错了
    • border 出现了？ 看看边界是否符合预期
    • bug 解决了才可以把 border 删掉
  • 记住
    • CSS 的 border 调试法
    • 相当于 JS 的 log 调试法

在哪查资料

  • 网站推荐
    • Google 搜索关键词时加MDN
    • CSS tricks
    • 张鑫旭的博客

在哪搜集练习素材

  • PSD
    • Freepik 搜索 PSD web
    • 如果下载慢，就把域名加入 sc 插件
    • 365PSD 里的 UI套件 还行
  • 效果图
    • dribbble.com

标准制定者

  • W3C
  • 搜索 CSS spec
  • 搜索 CSS 2.1

CSS 基本概念

  • 文档流 Normal Flow
  • 块、内联、内联块
  • margin 合并
  • 两种盒模型（border-box 更符合人类思维）

文档流动方向

  • 内联元素（inline —— span） —— 从左到右，到达最右才会换行
  • block元素（div） —— 从上到下，每一个都另起一行
  • inline-block 也是从左到右

宽度

  • inline 宽度为内部 inline 元素的和，不能用 width 指定
  • block 默认自动计算宽度，可用 width 指定，宽度尽量不要写100%
  • inline-block 结合前两者特点，可用 width

高度

  • inline 高度由 line-height 间接确定，跟 height 无关
  • block 高度由内部文档流元素决定，可以设 height
  • inline-block 跟 block 类似，可以设置 height

overflow 溢出

  • 当内容大于容器
    • 等内容的宽度或高度大于容器的，会溢出
    • 可用 overflow 来设置是否显示滚动条
    • auto 是灵活设置
    • scroll 是永远显示
    • hidden 是直接隐藏溢出部分
    • visible 是直接显示溢出部分
    • overflow 可以分为 overflow-x 和 overflow-y

脱离文档流

  • block 高度由内部文档流元素决定，有些元素可以脱离文档流
  • 哪些元素脱离文档流
    • float
    • position: absolute / fixed

盒模型

两种盒模型

  • content-box 内容盒 - 内容就是盒子的边界
  • border-box 边框盒 - 边框才是盒子的边界

公式

  • content-box width = 内容宽度
  • border-box width = 内容宽度 + padding + border

哪个好用

  • border-box
  • 同时指定 padding、width、border

盒模型区域

  • margin（外边距）
  • border
  • padding（内边距）
  • content

margin 合并

  • 父级元素里的上下两个子级元素同时设置了 margin-bottom 和 margin-top 会导致 margin 合并
  • 最顶上和最底下的子级元素会和父级元素 margin 合并
  • 取消子级间 margin 合并：display: inline-block;
  • 取消父子级间 margin 合并：加 padding 或者 border 或者 overflow: hidden
  • margin 合并只有上下合并，左右不合并

基本单位

长度单位

  • px 像素
  • em 相对于自身 font-size 的倍数
  • 百分数
  • 整数
  • rem
  • vw 和 vh

颜色

  • 十六进制 #FF6600 或者 #F60
  • RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
  • hsl 颜色 hsl(360,100%,100%)
  • transparent（透明）
avatar
文章
阅读
粉丝