理解CSS的29个基础概念，我就不信你学不会CSS！！！

已注销
170 阅读8分钟

  1. CSS 代表层叠样式表 （Cascading Style Sheets），理解第一个词层叠

    （cascade）很重要——层叠的表现方式是理解 CSS 的关键。

  2. nth-child、first-child、last-child等选择器需要父亲一样

  3. 盒子模型的艺术特质

1.png

  1. 伪类和伪元素：伪类：伪元素::

    1. 伪类一些假的类，通过这些类似函数或者监听元素的状态定位元素，伪元素是一些本没有写类的元素，通过类似函数的东西在某些元素的某些位置定位一个元素；
    2. 选择器的种类繁多，需要记忆，大体上可以分为两类： 基本选择器和函数性质的选择器

  2. 当存在多个属性的时候，浏览器通过级联算法决定使用哪些选择器，该算法主要分为四个阶段

    1. 出现的位置和顺序：CSS 规则出现的顺序
    2. 特异性：一种确定哪个 CSS 选择器具有最强匹配的算法
    3. 来源：CSS 出现的顺序及其来源，无论是浏览器样式、浏览器扩展中的 CSS 还是您创作的 CSS
    4. 重要性：某些 CSS 规则的权重高于其他规则，尤其是具有 !important 规则类型规则

    通过优先性评分，分高者胜出，应用属性

2.png

  1. 学习CSS是一种具有美感的事情，如果单纯的去记这这这是什么，那那那是什么，这样学习是没有意义的，需要去想为什么要这么设计，这样设计的好处，比如盒子模型就可以参考相框，符合人类的审美，除了内容，也需要边边角角的修饰，才会让观赏的人感受舒服，又比如z-index属性，就类似空间的多维，布局就是我们排版或者摆放东西，摆放的目的就是整洁好看

  2. 多用相对单位，少用绝对单位，主要是为了适配

  3. 最强大布局：Grid布局好像是升级版的table啊，会不会有的表格组件用这个东西生成 CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

  4. 最好的flex布局教程：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

  5. 颜色系统是视觉系统的重要组成部分，CSS的颜色系统可以分为标准色、rgb（感觉油漆调色用这个）、hsl(hsb)（电子系统的显示用这个？，当然目前LCD，OLED屏幕的发光也是只能发rgb一种颜色，如果有一种材料可以发很多种颜色，然后用电流电压控制颜色、饱和度和亮度是否可以直接物理上实现hsl颜色显示系统）

  6. 良好的背景能够给主体更好的衬托，如古代为了写书法，往往在纸上画点山山水水，这样更具艺术性。最基本的背景就是颜色，适合大背景，如我们装修的墙壁，往往使用大面积的纯色，这样给视觉以开阔，也更显简洁；再高级的一点的背景就是图片了，比如牛逼人物的办公室或者一些重要的政治场所的墙上，往往会挂大幅的油画或者水墨画。因此CSS也提供了两种背景：颜色和图片，为了将这些背景更好的摆放到我们的屏幕上，CSS也就定义了背景的重复、附着、位置三个重要的工具，将背景优雅的摆放好。

  7. 盒子模型边框类似相框，四个方向的框框都可以设置，和背景类似，可以设置图片，初次之外，CSS还提供了多种多样的样式，可以直接写名字如实现，虚线，就是各种线，既然说到线了，自然需要给它定义宽度和颜色了，还有圆角在屏幕上显示更显柔和、所以框框相交处加上圆角也是一个必要需求，注意CSS也定义了一个轮廓概念，大致就是在框框外面再包一层框框

  8. 外边距重合时会合并在一起，因为视觉上来说没有必要各自再留空白

  9. 文字系统是信息传达的核心，CSS对于文字系统的作用主要是将文字更加美观、重点突出的呈现在屏幕上。

    1. 从文字上来说，最基本的文字显示所需要的考虑就是颜色，颜色是一切显示的基础，文字亦是如此； 字体、字号大小也是必不可少的，草书楷书是我们的文化，也是不同场景的呈现方式；用这几个东西我们大致能够将文字较好的传达出来，而文字间距、样式的合理设置也可以将文字更加美观的显示出来
    2. 从段落上来说，对齐方式是一个要考虑的，左对齐、右对齐，两边对齐，这些既涉及到文字阅读的方向，也涉及各种的文字的美学适应。另外段落的换行等也有一系统的定义可供使用，基本涵盖了段落处理的各个方面

  10. 列表和表格存在自己特殊的定义，由于目前框架的使用，单纯使用这两个元素的可能性比较小了

  11. 用于盒子模型都是方方正正的，因此为了更好的利用空间摆放，可以将这些盒子分为两类：块也就是一个放一行，只能放它自己，另一种就是行内元素，也就是在一行里面多摆几个，当然行内也可以，给他们各自的属性，为了让他们更好的适应，也存在一些变通，如行内块等。盒子的内部也大有天地，可以给它设置布局，然后按照布局将里面的物品摆放，这样就像一个模具一样，可以更方便的摆放我们的盒子

  12. 定位一个重要的概念，我们怎么把相框固定到墙上呢，一个挨着一个摆？还是强制放到一个地方？亦或者比原本的位置偏一点点，如果这个墙是动的，我们怎么弄呢，CSS提供了几种定位方式能够解决我们这些问题，实际上浮动也是定位的一种，而浮动会产生一些副作用，就像座位排排坐，一个学生是浮动的，他就是去挤其他同学位置，然后其他的会因为他的挤产生一些变动，如盒子重排，会导致一些问题，[CSS篇]浅谈浮动工作原理以及如何清除浮动 - 个人文章 - SegmentFault 思否

  13. 找到元素是CSS的前提，因此CSS提供了一系列的选择器，我觉得主要有两种，直白的元素选择和函数性质的选择

  14. 图片精灵是一种有效减小图片的加载的方法，利用CSS，一张图片多处显示使用

  15. CSS3增加了很多函数性质的东西，用于实现颜色的多变、动画和过渡

  16. 渐变一般用背景图来承载

  17. 为了增加可交互性，CSS3加入了2D 3D的函数用于元素的一些变换错误，很像opencv里面图片的操作，移动，旋转倾斜等。

  18. 强大的CSS3提供了过渡和动画，结合2D 3D变换可以构建出流畅的动画效果，并且不像JS动画可能会受异步的影响

  19. 像我们设置桌面壁纸一样，CSS也提供了图片或者其他对象在盒子里的填充方式可以去定义

  20. 报纸往往有多列，css也可以这样设置，但是现在我感觉很少用这些特定的属性去实现这些效果了，毕竟局限性过大。

  21. CSS3可以定义变量了哦

  22. 现在电子设备多种多样，屏幕大小也多种多样，为了加快研发效率，所以要做好适配，因此就提供了一个工具：媒体查询，这个东东类似if else函数，针对设备不同的参数，写不同的css，这个也叫做响应式设计

  23. CSS的单位是一种很复杂的东西，在不同的设备上有不同的理解，在手机上设置14px和电脑上设置14px我们会感觉两者差距很大，电脑上14px我们感觉看起来刚刚好，在分辨率高的手机上却很小。px是最基本的单位，其他的单位基本可以由这个单位转换，而这个单位并不是设备的物理像素，css像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素，CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport - 进击的特斯拉 - 博客园 (cnblogs.com)

  24. 目前CSS有很多局限性，比如变量定义啊，层级关系啊，针对这些问题，出现了很多扩展性语言，方便我们更好的进行CSS书写，如Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)、Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网、Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器 | Stylus 中文网 (stylus-lang.cn)、PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网等等，这些东西又叫做预编译器，在打包之后都会转成css

avatar
文章
阅读
粉丝