CSS基础学习笔记

别漏油
249 阅读5分钟

建议不要深究，css规则和属性非常多，没必要花费太多时间，而且有些规则无法解释。

CSS历史

  • CSS是由html发明者李爵士的同时赖先生发明的，早期的IE并不支持wei标准。
  • CSS厉害之处在于它的层叠样式表:
    • 样式层叠——可以多次对同一选择器进行样式声明；
    • 选择器层叠——可以用不同选择器对同一个元素进行样式声明；
    • 文件层叠——可以用多个文件进行层叠。
    • 这些特性使得CSS极度灵活，也是因为太灵活的层叠样式，导致开发者无法限制层叠，会有被别人层叠覆盖的情况风险。
  • CSS版本之路
    • -1996年，CSS1；
    • -1998年，CSS2，添加了定位、z-index、media；
    • 2004~2011年，CSS2.1，由于其不断地更新，成为了使用最为广泛的版本（IE支持）；
    • 1999年开始起草CSS3，现代版本，开始分模块（IE8部分支持）；
    • CSS4*，分模块升级。
  • caniuse.com网站是用来查看哪些浏览器支持哪些特性的。

语法

  1. 样式语法
选择器 {
    属性名: 属性值;
    /*注释*/
    }
  1. at语法
@charset "UTF-8";
@import url(2.css);
@media (min-width:100px) and (max-width: 200px){
    语法一
}
  • 注意事项
    • @charset必须放在第一行；
    • 前两个语法必须以英文分号; 结尾；
    • charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题导致。

如何调试知道具体错误之处

  • 使用W3C在线验证器，比较麻烦，不推荐
  • 使用VSCode看颜色，但位置不精确；
  • 使用WebStorm看颜色，打开速度慢
  • 使用开发者工具看警告，使用方法：
    • 用鼠标点击不起作用地方的父级标签内容
    • 看是否有选择器
    • 看样式是否被划掉，划掉代表不起作用
    • 看样式是否有警告，看警告内容得知错误
  • Border调试法
    • 怀疑某个元素有问题，就给该元素加border
    • border没出现，说明选择器错了或者语法错了
    • border出现，看边界是否符合预期
    • bug解决删掉border

在哪查资料

  1. 关键词+MDN
  2. 关键词+CSS tricks，是英文网站，也可以查找翻译过的
  3. 关键词+张鑫旭，他是长时间学习CSS的人

在哪里搜联系素材

  • PSD
  1. Freepik搜索PSD web，记得标明来源；
  2. 365PSD里的UI套件。
  • 效果图（用于模仿布局，不提供下载）
    • dribbble.com 顶级设计师社区
  • 商业网站，直接模仿常去的网站。
  • 不要经常临摹，PC网站、手机网站、UI套件各临摹一两个即可，多也无用

文档流

  • 文档流是指文档流动方向。
  • display属性，属性值有inline/block/inline-block：
    • inline元素在文档流中是从左到右排列，到达最右边才会换行（且会将元素内容断开换行），中间只能放置inline元素，不能直接设置宽高，宽度为内部inline元素的和，高度由line-height间接决定。
    • block元素在文档流中从上到下排列，每个元素独占一行，中间可以放置任意元素，可以直接设置宽高，默认宽度是自动计算（根据页面，不是100%），默认高度由内部文档流元素决定。
      • 100%会将元素的margin和padding也算在内,而auto不会。
      • 默认高度由内部文档流元素决定，也就是如果一个元素不在文档流范围内，就不会影响到其父级高度，如浮动元素float、定位元素position：absolute/fixed;
    • inline-block，则各有inline和block的性质，它既可以设置宽高，又可以与inline元素在文档流中从左到右排列。
  • 当内容宽高超出元素设置的宽高，这种情况叫做溢出，也就是overflow属性：
    • overflow: visible; 直接显示溢出部分，默认值；
    • overflow: hidden; 将溢出部分隐藏；
    • overflow: scroll; 显示滚动条，可以通过滚动来查看溢出部分，缺点是即使内容不超出，也会出现滚动条；
    • overflow: auto; 自动显示滚动条，超出显示，不超出不显示；
    • overflow也可分成overflow-x或overflow-y属性设置，不常用。
  • 注意，已经不叫内联元素和块级元素，因为可以通过display来改变。

盒模型

一个元素从外到里是由margin、border、padding、内容组成。 有两种盒模型，分别是box-sizing: content-box; box-sizing: border-box;

  • content-box，就是说宽度由内容决定，width=内容宽度。
  • border-box，width=border+padding+内容宽度
  • 哪个更好用，border-box，暂时没有理由
  • margin合并（只有上下会，左右不会）
    • 父子合并，父级元素的top、bottom的margin会和子元素的top、bottom的margin合并，margin数值取两者间最大的；
      • 取消父子合并，用padding/border挡住，用overflow：hidden;挡住，用display：flex;挡住
    • 兄弟合并，同级元素的相邻部分的margin会合并，取最大值；
      • 取消兄弟合并，用display：inline-block;

基本单位

  • 长度单位
    • px像素，屏幕像素
    • em,就是自身font-size的倍数，即3em=3font-size
    • 百分数
    • 整数
    • rem，后面补充
    • vm和vh，后面补充等
  • 颜色
    • 十六进制，#ff6600，重复的两位数可写#f60；
    • rgba(0，0，0，0)，前三个红、绿、蓝的范围都在0255，最后一个是透明度01；
    • hsl(360,100%,100%),色相，饱和度，亮度，不常用
avatar
文章
阅读
粉丝