深入CSS (上)3 | 青训营笔记

71 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第30天

一、本节课重点内容

在了解 CSS 基本原理后,本节课进一步深入讨论,通过具体案例对于选择器的特异度展开讲解,在此基础上进一步引出 CSS 继承与布局的话题,对其定义及相关技术分别作出介绍。

课程重点内容归纳总结如下:

  1. CSS 选择器的特异度
  2. CSS 继承
  3. CSS 求值过程解析
  4. CSS 布局方式及相关技术

二、详细知识点介绍

position: relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、 bottom、 right 设置偏移长度
  • 流内其它元素当它没有偏移一样布局

image.png

position: absolute

  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响

学习cSS的几点建议:

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心,善用览器的开发者工具
  • 持续学习,cSS新特性还在不断出现

三、总结

css的含义是层叠样式表。

  1. CSS是一种用来表现HTML或XML等文件样式的计算机语言;
  2. CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化;
  3. CSS还能够对网页中元素位置的排版进行像素级精确控制。

css的作用: CSS的作用

  1. 我们可以在大部分的浏览器上使用它。
  2. 一些必须通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
  3. css的内容相比html而言更加的丰富,使网站的页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
  4. 我们可以利用它轻松地控制页面的布局,而不是生搬硬套。
  5. 我们能够将许多网页的风格格式同时更新,不用再逐页的更新了。
  6. 站点上所有的网页风格都可以使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动,更加的方便快捷。