CSS基础

wujilin
287 阅读6分钟

体系化学习

  • 学一门语言必须学会什么
    1. 语法（怎么写代码）
    2. 如何调试（怎么知道自己代码写错了）
    3. 在哪查资料（其实就是为了抄代码） 网站推荐：
      • Google 搜索关键词时加 MDN
      • 关键词+CSS tricks（英文)
      • 关键词+张鑫旭，搜出来是他的博客
    4. 标准制定者是谁 CSS 最新版是通过搜索 CSS spec 查看的。CSS2.1 有中文版，等你遇到了实在查不到的 CSS 知识就可以查阅 CSS2.1 中文版。
  • 如何学，CRM 学习法
    1. Copy-抄文档、抄老师
    2. Run-放在自己的机器上运行成功
    3. Modify-加入一点自己的想法，然后重新运行

我怎么知道哪些浏览器支持哪些 css 特性呢？

使用 caniuse.com

  • 输入你关心的样式，比如 border-radius 或 filter
  • 查看大部分浏览器的支持情况
  • 如果想看更多，点击 Show All
  • 下方会详细说明兼容 bug 有哪些（翻译成中文）

css 语法

  1. 语法一：样式语法 选择器{ 属性名：属性值； /注释/ }

  2. 语法二：at 语法 @charset "UTF-8"; @import url(2.css); @media (min-width:100px) and (max-width:200px){ 语法一 } 注意事项：

  • @charset 必须放在第一行
  • 前两个 at 语法必须以分号;结尾
  • @media 语法以后单独学习
  • charset 是字符集的意思，但 UTF-8 是字符编码。charset 确定的是文件编码，而不是字符集。

如何调试 css

方法多样。 如何使用开发者工具调试，步骤：

  1. 找到你脑中的标签
  2. 看它是否有选择器
  3. 看它的样式是否被划掉（被划掉要么是被覆盖了，要么是语法错误）
  4. 看它的样式是否有警告（有警告就一定是语法错了）

border 调试法（只要你做前端，就必须会这个 border 调试法），步骤：

  1. 怀疑某个元素有问题
  2. 就给这个元素加 border
  3. border 没出现？说明选择器错了或者语法错了。如果 border 放在第一行就错了，说明选择器错了，选择器没错的话，就一行一行地往下移 border，border 放在哪一行没实现，那一行就有问题。
  4. border 出现了？看看边界是否符合预期
  5. bug 解决了才可以把 border 删掉

记住：CSS 的 border 调试法，就相当于 JS 的 log 调试法。

在哪搜练习素材

  • PSD
    1. Freepik 搜索 PSD +关键词。如果下载慢，就把域名加入翻墙软件。
    2. 中文免费 PSD 网站较少，需要多搜一下。365PSD 里的 UI 套件还行。
  • 效果图（不提供下载） dribbble.com 顶级设计师社区。可以用肉眼模仿它，看它的配色，取一下色，看它的字体、怎么布局的。前期 PSD 模仿的差不多了，后期就可以到这个社区里找喜欢的用肉眼去模仿。
  • 商业网站 直接模仿你常去的网站。比如知乎等。把它的内容复制过来，做成一样的布局。

CSS 不要沉迷临摹，每个类型的临摹一两个即可，PC 网站、手机网站、UI 套件，再多无益，浪费时间。

CSS 要理解的几个重要概念

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

文档流

  • 流动方向（不存在内联元素和块级元素，那是过时的分法，只有元素现在是内联的或现在是块级的这种分法）
    1. inline 元素从左到右，到达最右边才会换行
    2. block 元素从上到下，每一个都另起一行
    3. inline-block 也是从左到右，但不会跨两行，不会处于两行中间
  • 宽度
    1. inline 的宽度是由它里面所有的 inline 元素的宽度合成的，不能用 width 指定。不要在 display 为 inline 的元素里加 display 为 block 的元素。
    2. block 元素默认占满一行，但它的默认宽度不是 100%，而是 auto，能有多宽有多宽，不影响其它元素。默认自动计算宽度，可用 width 指定。永远不要写 width:100%.
    3. inline-block 结合前两者特点，可用 width。
  • 高度
    1. inline 高度由 line-height 间接确定，跟 height 无关，跟 padding 也无关。inline 不能指定 height。间接确定的意思，line-height 会受字体的影响。
    2. block 的高度是由它内部文档流中的所有元素的总和决定的，同时我们可以设定它的高度。 脱离文档流的意思是，你的父元素在算高度的时候不算你。
    3. 高度方面 inline-block 就是 block。

overflow 溢出

overflow:visible/hidden/scroll/auto。overflow 分为 overflow-x 和 overflow-y。

block 元素里什么都没有，它的高度就为 0。inline 元素里什么都没有，它的高度就是 line-height（字体高度）。 内联元素默认只在第一屏显示，x 轴滚动条后面的是留空的，不会跑到滚动条的右边去的。

脱离文档流

block 高度由内部文档流决定，可以设 height。这句话的意思是不是说，有些元素可以不在文档流中。 哪些元素脱离文档流：

  • float
  • position:absolute/fixed

两种盒模型

  • content-box
  • border-box 默认是 content-box。 面试官问你，请说一下 css 的盒模型，标准回答： CSS 盒模型分两种，一种是 content-box，一种是 border-box，那 content-box 和 border-box 的区别是，content-box 的宽度只包含 content，border-box 的宽度包含到 border，包含到 border 含有的是 border、内边距、内容，三个。 面试官问你，请问你一般用 content-box 还是 border-box，为什么： 我一般用 border-box，因为我觉得 border-box 更好用一些。满分

margin 合并

哪些情况会合并

  • 父子 margin 合并（父亲和第一个儿子、最后一个儿子，margin 合并）
  • 兄弟 margin 合并

如何阻止合并

  • 父子合并用 padding/border 挡住
  • 父子合并用 overflow:hidden 挡住
  • 父子合并用 display:flex
  • 兄弟合并是符合预期的
  • 兄弟合并可以用 inline-block 消除（但这个技巧没什么用，不要写）

margin 合并，只在上下方向发生合并，左右方向不合并

基本单位

长度单位

  • px 像素
  • em 相对于自身 font-size 的倍数
  • 百分数
  • 整数
  • rem
  • vm 和 vh
  • 其它长度单位都用得很少，不用了解

颜色

  • 十六进制#FF6600 或者#F60
  • RGBA 颜色。rgb(0,0,0)或者 rgba(0,0,0,1)，最后一位表示透明度，1 为不透明，0 为全透明。transparent，也表示全透明。十六进制##FF660000 表示全透明，##FF6600FF 表示全不透明，但十六进制表示透明度兼容性不确定，不推荐使用。
  • hsl 颜色。hsl(360,100%,100%)，第一为表示色相，第二位表示饱和度，第三位表示亮度。hsl 也接受 hsla，hsla(360,100%,100%,1)。
avatar
文章
阅读
粉丝