【CSS全解】CSS基础

海獭男爵
170 阅读6分钟

CSS前瞻

  • 由Tim Berners-Lee的挪威同事Håkon W Lie最早提出CSS。
  • CSS是艺术：CSS不需要用理性思维去理解，需要的是重复的练习和时间的积累。
  • CSS标准制定者：W3C，CSS 2.1中文翻译
  • 如何查阅CSS资料
    • Google搜索关键词加MDN。
    • Google搜索关键词加CSS tricks。
    • Google搜索关键词加张鑫旭。
  • CSS和HTML一样，不推荐买书。

CSS的层叠特性

  • CSS的特别之处：层叠样式表
  • 层叠是什么？
    • 样式层叠：多次对同一选择器进行样式声明。
    • 选择器层叠：可以用不同选择器对同一个元素进行样式声明。
    • 文件层叠：用多个.css外挂文件进行层叠。
  • 层叠特性使CSS极度灵活，但也造成CSS不交正，难以限制多个样式之间的层叠。

CSS的版本

  • CSS历史版本
    • CSS 2.1：CSS使用最广泛的版本。
    • CSS 3：细分功能模块，现代版本。CSS 3之后每个功能模块单独进行升级更新，故此不再有CSS 4了。
  • 如何知道浏览器支持哪些CSS版本特性？
    • caniuse.com
      • 绿色：完全支持
      • 黄色：部分支持
      • 红色：不支持

如何获得CSS练习素材？

  • PSD
  • 效果图（不提供PSD下载）
    • dribbble.com顶级设计师社区，搜索web
  • 商业网站
    • 直接模仿常去的网站
  • 不要沉迷临摹，PC网站、手机网站、UI套件每个类型临摹一两个即可。

CSS语法

语法一：样式语法

选择器 {
  属性名: 属性值;
  /* 注释 */
}
  • 所有符号都是英文符号。
  • 区分大小写。
  • 没有//注释。
  • 最后一个分号可以省略，但建议不要省略。
  • 任何地方写错了，都不会报错，浏览器会直接忽略。

语法二：@规则

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
    语法一
}
  • @charset：声明字符编码，必须放在第一行。
    • charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题。
  • @import：导入额外的css文件。
  • @media：媒体查询。
  • 前两个@语法必须以分号;结尾。

如何调试CSS

  1. W3C Validation
  2. 查看VS Code/WebStorm颜色（推荐WebStorm）
  3. 使用Chrome开发者工具查看警告
    • 找到对应的标签。
    • 查看是否是选择器错误。
    • 查看样式是否被划线。
    • 查看样式前是否有小三角。
    • Pasted image 20220617190152.png
  4. Border调试法
    • 对一个选择器，从上往下依次插入border。
    • border没出现？说明选择器错了或者语法错了。
    • border出现了？看看边界/样式是否符合预期。
    • border样式正常的情况下，插入行之前的代码都是正确的。
    • border样式错误的情况下，插入行之前的最后一行代码是错误的。
    • 重复以上步骤直到解决bug。

文档流

  • 文档流：文档中元素的流动方向。
  • 新的HTML5中，元素已经不分内联元素和块级元素了，元素的文档流取决于它的display属性值。

dislay: inline

  • 流动方向：从左到右依次排列，遇到行尾折行。
  • 宽度：标签内部inline元素之和（尽量窄），不能用width指定。
  • 高度：由line-height间接决定，不能用height指定。
  • 注
    • 不要在inline元素里添加block元素。
    • 当inline元素内没有元素的时候，它的高度为inline-height。
    • padding属性能改变inline元素的表面高度，但无法改变inline元素的实际高度。即加了padding的inline元素无法撑高block元素。
    • 为什么是“间接决定”？

dislay: block

  • 流动方向：从上到下依次排列，每个元素占一行。
  • 宽度：默认占满父元素一整行（witdh: auto;）（尽量宽），能用width指定。
  • 高度：由内部文档流元素高度的总和来决定，能用height指定。
  • 注
    • 当block元素内部没有文档流元素的时候，它的高度是0。
    • width: auto≠width: 100%，大部分情况下不要写width: 100%。
    • 有些元素可以脱离文档流，block元素在计算height的时候不会把这些元素计算入内。

dislay: inline-block

  • 流动方向：从左到右依次排列，但内容遇到行尾不会折行。
  • 宽度：默认为标签内部inline元素、inline-block之和（尽量窄），但能用width指定。
  • 高度：由内部文档流元素高度的总和来决定，能用height指定。

overflow溢出现象

  • 当内容的宽度或者高度，大于容器的指定width或height时，容器会无法包裹内部元素，可以通过overflow属性来调整。
  • overflow属性
    • overflow: visible：推荐。溢出部分显示。
    • overflow: hidden：溢出部分隐藏。
    • overflow: scroll：溢出部分显示，可以用滚动条来展示，但在不溢出的时候也会显示滚动条。
    • overflow: auto：推荐。在scroll的基础上，只height或width溢出的时候会显示滚动条，在不溢出的时候不会显示滚动条。
  • overflow可以分为overflow-x和overflow-y。
  • 当容器内部inline元素width方向溢出时，block元素仍旧只会在第一面显示。

脱离文档流的元素

  • 哪些元素脱离文档流？
    • 具有以下CSS样式的元素
      • float: left;
      • float: right;
      • position: absolute;
      • position: fixed;
  • 如何让元素不脱离文档流？
    • 不要添加上述的CSS样式。

盒模型

Pasted image 20220507185757.png

  • 盒模型有两种
    • content-box：默认样式。内容就是盒子的边界，width不包括padding和border。
      • width=content
      • box-sizing: content-box;
    • border-box：推荐样式。边框盒，框架才是盒子的边界，width包括padding和border。
      • witdh=content+padding+border
      • box-sizing: border-box;

margin合并

哪些情况margin会合并？

  • 父子block元素的margin会相互合并。
  • 兄弟block元素的margin会相互合并。
  • margin合并只有上下合并，没有左右合并。
  • inline-block元素、float元素的margin不会相互合并。

如何阻止margin合并？

  • 父子margin合并
    1. 给父元素添加1px的padding或border。
      • 原理：margin合并的前提是两个margin之间什么都没有。
    2. 为父元素添加overflow: hidden;。
    3. 为父元素添加display: flex;。
  • 兄弟margin合并
    • 用转化为inline-block。

基本单位

长度单位

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

颜色

  • 十六进制：#FF6600或者#F60
  • RGBA颜色：rgb(0,0,0)或者rbga(0,0,0,1)
  • 全透明简写：transparent
  • hsl颜色：hsl(360,100%,100%)
    • 第一个参数为色相，0和360为正红色，0~360顺序为赤橙黄绿青蓝紫赤。
    • 第二个参数为饱和度，0%时为黑白色。
    • 第三个参数为亮度，0%为黑色，100%为白色。
    • hsl也支持alpha属性，为第四个参数。

方方の敦敦教诲

  • 其一：第一次写CSS元素一定要把boder加上，好知道元素边界。
  • 其二：永远不要写width: 100%。
  • 其三：不要使用content-box
avatar
文章
阅读
粉丝