[深入理解CSS - 前端与HTML | 青训营笔记]

用户4574848411590
109 阅读5分钟

第七节 深入理解CSS

CSS发展历史：

  • HTML提出
  • CSS 1：解决网页排版布局和装饰问题，第一个有“层叠(casading)"概念的语言
  • CSS 2：表现和内容分离
  • CSS 2.1：对CSS2的修正、扩展，代替CSS2
  • CSS 3：规范模块化发展，样式丰富、酷炫，提高网站的可维护性以及性能速度

一、基础知识

Casading规则、选择器、继承、值和单位、盒模型

层叠(Cascading)、优先级

层叠三大规则（优先程度递减）：

  1. 样式表来源 2. 选择器优先级 3. 源码位置

选择器有哪些？

  1. 基础选择器： #id—―ID选择器。Tagname—一类型选择器或者标签选择器。.class—一类选择器。*――通用选择器。该选择器匹配所有元素
  2. 组合器：
  • 子组合器(>) -―匹配的目标元素是其他元素的直接后代。如: .parent >.child。
  • 相邻兄弟组合器(+)-―匹配的目标元素紧跟在其他元素后面。如: p +h2。
  • 通用兄弟组合器(~) ――匹配所有跟随在指定元素之后的兄弟元素，如: li.active ~li。
  • 复合选择器 多个基础选择器可以连起来使用，如: h1.page-header。
  1. 属性选择器：通过约束属性值，div[data-title="aaa"]
  2. 伪类选择器：选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child , :hover
  3. 伪元素选择器：匹配在文档中没有直接对应HTMIL元素的特定部分，或插入内容。如 h2:: first-letter, div:.before
  4. 逻辑选择器：较新的选择器:is() :has() :where() :not()

选择器优先级：

1.png

  • 由层叠概念引申出的css.代码good practice：
  • 选择器尽量少用id
  • 尽量不要用 ！important
  • 自己的样式加载在引用库样式的后面

继承

  • 大部分具有继承特性的属性跟文本相关: color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。
    还有少部分列表、表格的属性

  • 可以使用inherit关键字显式指定一个属性值从其父元素继承

盒模型

  1. 控制盒子类型： display: block、inline、inline-block、flex、...
  2. 控制盒子大小&计算方式： width，height ...
    box-sizing: content-box、border-box
  3. 控制盒中内容流： overflow: auto、scroll、hidden、...
  4. 控制定位： position: static、relative、absolute、fixed、sticky
  5. 是否可见： visibility: visible、hidden、...

二、布局和定位

  • 布局：常规流、弹性盒子、Grid、定位
  • 定位：为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用 top, right bottom,ledt对其进行定位。

  1. relative：元素相对于自己原来在文档流中的位置进行定位，但是原来文档流的空间还在。

  2. absolute：元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位。

  3. fixed：元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置

  4. sticky：元素相对它的最近滚动祖先（祖先的overflow是scroll/hidden/auto)的视口(scrollport)定位

三、层叠上下文

层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的z轴排开

stacking order

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序∶

  • z-index只在同一个层叠上下文内比较
  • 子元素的z-index无法超越父元素的z-index显示顺序

四、变形、过渡、动画

transform 变形

2D相关属性:

  • transform: translate(移动)、rotate(旋转)、scale(放缩)、matrix(变形矩阵)等
  • transform-origin: right top、center等表示变形时依据的原点

transform 过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。

其中timing-function一般有三种用法︰

  1. 线性(linear)
  2. 贝塞尔曲线(cubic-bezier()或ease-in等)
  3. 阶跃(step)

动画

如何写动画性能更好?

  1. 尽量不用触发reflow的属性
  2. 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
  3. 尽量使用transform和opacity去写动画 五、响应式设计 响应式设计原则、媒体查询、相对长度、绝对长度和视口

响应式设计原则

  • 优先选用流式布局，如百分比、flex、grid等
  • 使用响应式图片，匹配尺寸，节省带宽
  • 使用媒体查询为不同的设备类型做适配
  • 给移动端设备设置简单、统一的视口
  • 使用相对长度，em、rem . vw做为长度度量

媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如screen、print)以及媒体特性（如视口宽度、屏幕比例、设备方向:横向或纵向)做为约束条件。

DPR设备像素比

  • 设备像素比(dpr) ：描述的是未缩放状态下，设备像素和CSS像素的初始比例关系
  • DPR =设备像素 / CSS像素

相对长度

  1. em：在非font-size属性中使用是相对于自身的字体大小；在font-size上使用是相对于父元素的字体大小(一般不在这个属性上使用，因为font-size的继承特性，多重嵌套后大小会不断放大或缩小，产生混乱)
  2. rem：根元素的字体大小。 通过伪类root或者htm选择器选定。 由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局。
  3. vw 和 vh：vw：视窗宽度的1%。vh：视窗高度的1%。 同样，vw也可以作为响应式布局的基准单位。 由于vw天然是视口宽度的1%，所以不需要js动态配置。

六、CSS生态相关

  • 语言增强：预处理器、后处理器
  • 工程架构：CSS模块化、 css-In-Js、 Atomic CSS
avatar
文章
阅读
粉丝