开发中常用CSS总结

  •   在 HTML 里表示空格。是HTML 转义字符。&entityName (Entity)，用字体表示一个符号。网上有现成的转义器。
  • link 标签 不加 rel=”stylesheet”，则引入样式表无效。
  • 行内元素必须设置 display: inline-block,才能设置宽高，包括 高宽，最大高宽 和 最小高宽
  • html 标签 和 body 标签 默认高度为 0 ，因为是块级标签，因此 默认宽度是屏幕宽度。但是 给 html 标签 或者 body 标签 设置 背景色，背景色会填充 整个屏幕。demo demo2 。若同时 给 html 和 body 设置背景色，则 html 背景色 会覆盖 body 背景色。demo3。
  • 给 html 标签 设置 height: 100% / 100vh; ，则 html 标签 和 屏幕一样高 ，body 不会继承 html 的高度。demo 。此时继续给 body设置 height: 100% / 100vh;，那么 body 也和 屏幕 一样高。demo。或者 单独给 body设置 height:100vh;，body 也和 屏幕 一样高。demo demo2
  • 首页内容居中 demo
  • div, span 标签没有默认的样式，其他的标签都有默认的样式。我们可以用开发者工具来查看某标签的默认样式,在浏览器界面-右键-检查-Elements。
  • 浏览器默认字体大小是16px。
  • 用开发者工具调试.html文件，直接改直接就能看到结果！
  • 当你不知道一个 [CSS属性]的取值时，就去查MDN, google [关键词 MDN]，上面还有很多例子供你学习，但是作为一个工程师，还是直接练出来比较适合我们。所以CSS3根本不用背。我们只要能实现我们的功能就可以了，会英文和工具最好，记太多也记不住，半查半蒙。
  • 不同系统渲染出来的字体颜色是有差别的。
  • css样式优先级：用户写的样式 > 浏览器的默认样式 > 标签自己默认的颜色样式
  • 样式继承：当子元素有相同样式的时候，我们 把这些样式写在 父亲或者爷爷 元素上，那么 子元素 就会继承 长辈的样式，从而简化CSS代码，注意不是所有样式都能继承。
  • 浏览器会把标签之间的所有的空格换行都归结为一个空格。例如我们为了好看总是给标签换行，因此两个span标签之间是有空格的，只不我们肉眼看不见，只需要把两个span标签挨在一块写，就能消除空格。但是如果你是不需要空格那么大的距离，而两个字之间有需要保持一定的像素，可以通过加margin-right实现。
  • 选择器过于简单，可能会影响后面的样式
  • 每个标签都有一个盒子模型，可打开开发者工具查看
  • 内联元素的高度不可测。给内联元素设置宽高会默认失效，设置line-height也会失效。设置padding生效。设置左右margin生效，设置上下margin不生效。设置边框、背景、文字颜色都生效。值得注意的是内联元素内的直接文本应该是上下左右都是居中的，也就是在开发过程中，不存在设置内联元素里的直接文本居中需求。建议不要span内包裹文字同时又包裹一个span，不利于写样式。
  • 当要实现左右两行字的中心线平齐的时候，我们只需要左右两边的字 高度相等，文字处于中间，就这两个话就很值得去亲身实践一下，第一高度相等，意味者 左右两边的祖先标签盒子模型（这个需要判断）的高度是相等的，也就是上下的padding、border、margin再加上里面元素的高度（它的所有后代）才是这个祖宗标签盒子的高度，将光标移到对应的祖宗标签处就能看到浏览器自动计算出来的高度，而左右两边的祖宗必须是同一级的，比如都是爷爷或者他们只有body这个父亲形如这种。第二，文字处于中间，那么**最里层的孙子标签的上下padding、border、margin若有值则必须相等，字方可处于中间，否则偏上偏下，偏左偏右也是同理。有了这两步，左右两部分的中心线就出在同一水平线上了。
  • 介绍一种手法，写CSS样式的时候，从内到外写，先写里面，看最后宽度和高度差多少，最后用padding撑起来，从而保持了整个盒子的宽度和高度。
  • CSS改bug的时候是环环相扣的，你修复了一个问题，就可能引发另一个问题。修改bug的时候要冷静。
  • 新手容易犯的错误，在实际开发中，不到迫不得已，width和height能不写就不写，写了就很容易出bug。因为只要需求一变，你一改就是bug，所以我们最好采取一种通用的容错率比较高的方法，比如子元素超出父元素。
  • 加阴影box-shadow，元素看起来更立体google:css shadow generator,调样式，复制现成的样式代码。
  • 加动画transition: all 0.3s;给所有变化 transform加入过渡动画和过渡时间。
  • 加鼠标悬停手指点击形状。cursor: pointer;
  • border 调试大法。加border进行调试，不然看不来标签在哪里。或者 background 加背景颜色调试大法
  • 配套使用。当设置display: inline-block;需要加上vertical-align: top;来去除底层多出的空间。？？？？
  • 设置背景图片：background-image: url(../img/girl.jpg)
  • 设置背景图片水平垂直居中：background-position: center center;
  • 设置背景图片按比例缩放：background-size: cover
  • 渐变色，调元素的线性渐变色，google:css linear-gradient generator,调样式，复制现成的样式代码。
  • 工具 线性渐变代码生成器 ,写CSS就是会很多工具，不然有时候=代码都自己写就很麻烦。
  • 伪元素 不是元素，可以看做一个span。伪元素默认是inline元素。常常使用 selector::before selector::after
    伪元素的用法1： 使用 selector::after 伪元素清除浮动 demo
    伪元素的用法2： 给 元素 之前 或者 之后 加内容。demo
    伪元素用法3： before 和 after伪元素都可以代替 div ，通过设置 伪元素 display: block，此时伪元素就可以当一个块级元素看待，独占一行。局限是伪元素里不能再有伪元素。
  • 伪类是一个分号，如:hover :nth-child,它是不存在的，表示标签的某种状态。伪元素是两个分号，如： ::before ::after,伪元素是真实存在的，但是不是一个元素，它可以替代一个元素的作用。
  • CSS有很多杂碎的东西，要多去试就能学到更多的东西。
  • 对页面某一块，先实现内容，再加CSS样式，即先html，后CSS。
  • 从里往外写CSS样式，最后加padding,margin撑起来。
  • CSS样式复用 选择器,选择器{CSS样式}
  • id是唯一标识一个标签的，class是一个大类。
  • 状态机，js切换左中右三种状态, css 负责样式
  • display:inline-block; vertical-align: top;是配套使用的，设置了inline-block，就要同时设置后者。inlne-block可以让标签宽度等于文档流元素，另起一行。

通过这12次课的学习，我们对 CSS 有了一个基本的了解：

  1. 控制文档流：利用好默认的宽度和高度规则
  2. 控制 z-index：堆叠上下文和堆叠顺序
  3. 理解 BFC
  4. 理解 IFC
  5. 理解 Float 布局和 Flex 布局
  6. 理解响应式
  7. 掌握动态 REM 方案
  8. 掌握 icon 的使用
  9. 掌握 Bootstrap 的使用

了解这些理论有助于帮助你更好地理解 CSS。想要把 CSS 用得炉火纯青，还是需要多做出一些惊艳的作品。

去哪里找惊艳的作品我们推荐过：

  1. CSS tricks
  2. Codepen
  3. Codrops

每周去这些网站看看，然后把好玩的 demo 自己动手实现一下，过不了多久，你就会理解 CSS 的美。