理解CSS

课程概述

Q:为什么要学习CSS？
A:相比于没有css的早期网页，现在的网页更加丰富，也能承载更多信息量和传递信息

HTML提出 -> CSS1解决网页排版布局和装饰问题，第一个有层叠概念的语言 -> CSS2表现和内容分离 -> CSS2.1 对CSS2的修正，拓展代替CSS2 -> CSS3规范模块化发展、样式丰富、酷炫，提高网站的可维护性以及性能速度

01 基础知识-Casading规则、选择器、继承、值和单位、盒模型

CSS层叠用来解决规则产生冲突的规则，以至于解决产生的冲突

HTML代码

<head>
    <style>
        #title {
            color:red;
        }
    </style>
    <link rel="stylessheet" href="./index.css" type="text/css">
</head>

<body>
<h1 id="title" style="color:green;"> I am a title</h1>
</body>

Index.css 代码

h1 {
    color:blue;
    font-size:48px;
}

层叠三大规则

优先程度递减

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

样式表来源重要排序

重要程度递增

1.用户代理样式
2.用户样式表
3.作者样式表
4.作者样式表中的 !important
5.用户样式表中的 !important
6.用户代理样式表中的 !important

选择器有哪些

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

选择器优先级

内联 > id > class = pseudo-class > type= pseudo-element

源码位置

简而言之，谁最后声明的谁生效
1.对于@import的样式，根据@import的顺序
2.对于link和style标签的样式，根据document中的顺序决定

一些建议

1.选择器尽量少用id（大面积使用id不利于css的复用、覆盖和维护）
2.尽量不要用!important（级别最高）
3.自己的样式加载在引用库样式的后面（让自己的引用库生效）

继承

大部分具有继承特性的属性跟文本相关，由父到子
可以使用inherit关键字来指示一个有继承属性的属性值从其父元素继承

e.g

h1 {
    font-size:10px;
}

.card h1 {
    font-size:inherit;
}

<h1>I am a title</h1>
<div class="card">
    <h1>I am a inside title</h1>
</div>

CSS的值和单位

选择器
{
    属性：值 单位
}
值
    1.文字类：比如initial这种关键字，颜色，位置等
    2.数值类：比如z-index:1这种数值，或者带有单位的数值、百分比等
    3.函数生成:比如calc(), min(), max()等

单位
    1.长度
        绝对长度
        相对长度
    2.角度：deg, grad, turn, rad
    3.时间:s, ms
    4.分辨率: dpi, dpcm, dppx

盒模型

浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型，css通过盒模型做layout

由盒模型的特性能实现一些展现形式

1.实现三角形

    <div class="triangle-bottom"><div>

    .triangle-bottom {
        width:0;
        height:0;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-bottom:50px solid red;
    }

2.实现固定比例矩形

    <div class="ratio-box"></div>

    .ratio-box {
        backgorund-color:cadetblue;
        width:100%;
        height:0;
        padding:0;
        padding-bottom:75%;
    }

    或者使用新特性：aspect-ratio

3.实现水平居中

<div class="warp">
    <div class="h-center"></div>
</div>

.wrap {
    width:100%;
    height:80px;
    border:1px dashed grey;
}

.h-center {
    width:100px;
    height:50px;
    background-color:navajowhite;
    //左右两侧的margin 使用auto
    //将水平方向剩余空间均分auto
    margin:10px auto;
}

4.实现渐变边框

<div class="awesome-border"></div>

.awesome-border {
    width:150px;
    height:100px;
    border: 8px solid transparent;
    border-radius:12px;
    background-clip:padding-box, border-box;
    background-origin:padding-box, border-box;
    background-image:
        linear-gardient(to right, #fff, #fff),
        linear-gardient(135deg, #e941ab, #a557ef)
}

盒模型 - 负外边距

padding、border、margin中，只有margin可以设置负值

设置左边或者顶部的负外边距，元素就会相应的向左或向上移动，导致元素与它前面的元素重叠；如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来
不提倡高频使用

2 布局

CSS3之前的常用布局 NORMAL Flow常规流 Float 浮动流 Positioning 定位流 CSS3之后的新增布局

Flex弹性盒子布局（一维） Grid网格布局（二维） Multicol多列布局（文本，内容的多列展示）

常规流布局

任意盒子的display分为外部显示类型和内部显示类型

   外部显示类型：规定了该盒子如何与统一格式上下文中的其他元素一起显示
   内部显示类型：规定了该盒子内部的布局方式：比如display：flex其外部显示是block，参与外部链接表，display-inline-flex 则外部显示是inline

常规流中的盒子外部显示类型为block（即为块级盒子），外部显示类型为inline的是内联级盒子，它们分别参与对应的格式化上下文

块级格式化上下文（Block Formatting Context）

BFC实际上是一种格式规范。如果说一个盒子是bfc或者有bfc特性，那么bfc表示的便是bfc root 不管他外部现实类型是什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。

如何触发一个盒子的bfc特性？一下条件满足任何一个即可

display:flow-root | inline-block;
position:absolute | fixed;
float:不为none
overflow:不为visible

外边距塌陷

会产生外边距塌陷的情况

  1.两个兄弟元素之间相邻的上下外边距
  2.父子元素之间相邻的上下外边距
  3.内容为空元素自己上下外边距相邻

消除外边距塌陷的方法

          1.在两个相邻的上下编剧之间增加border、padding或者内联元素，使之不相邻
          2.在父子元素重叠时，除了上述方法外，还可以设置父元素为bfc，使得父子不在同级bfc中

内联级格式化上下文

一些实际的case：

<div class="title"> 我是标题 </div>

.title {
    background:antiquewhite;
    font-size:18px;
    line-height:36px;
    height:36px; //可以省略
}

文字和icon垂直对齐

<div class="wrap">
    <img class="image" src="dy.png">
    <span class="text">抖音同款能力</span>
</div>

.image {
    width:24px;
    height:24px;
    vertical-align:middle;
}

.text {
    font-size:16px;
    line-height:32px;
    margin-left:4px;
    vertical-align:middle;
}

弹性盒子布局

网格布局

2017年推出的grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列

实例

与弹性不一样的是需要先确定好布局

两者之间的区别

更多情况下是两者结合起来进行使用的

定位position

3层叠上下文

是对html元素的三维构象，将元素沿着垂直屏幕的虚构的z轴排开

z-index要用变量的形式来进行处理比较好

4变形，过渡，动画

transform变形3D

transition过渡

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

div {
transition:<property><duration><timing-function><delay>;
}

其中timing-function一般有三种用法：线性(linear)、贝赛尔曲线(cubic-bezier()或ease-in等)、阶跃（step）

animation动画

@keyframes关键帧用来定义动画过程中出现的关键样式

animation相关属性用来为元素添加动画
animation-name:定义好的关键帧的名字
animation-duration:动画时长
animation-timing-function:动画节奏
animaiton-delay:延时开始的时间
animation-iteration-count:执行次数
animation-direction:是否反向或交替
animation-fill-mode:动画执行前后的样式采用
animation-play-state:动画运行状态

5响应式设计

1媒体查询

2DPI& PPI

3CSS像素

4DPR设备像素比

5移动端的viewport

6相对元素的使用

1.在非font-size属性中使用是相对于自身的字体大小
2.在font-size上使用是相对于父元素的字体大小
应用场景：可以让展示区域根据展示字号的不同，做出放缩调整

rem 根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局

vw和vh

vw：视窗宽度的1%。vh:视窗高度的1%。同样，vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置

CSS生态相关

语言增强：CSS预处理器

语言增强——CSS后处理器

语言增强——postcss机制浅析

工程架构————css模块化

书写方式上没什么改变，只是样式通过唯一样式进行隔离

工程架构——CSS-in-js

工程架构——styled-component机制浅析

工程架构——css-in-js pros&cons

工程架构——原子化css

原子化css是一种css的架构方式，它倾向于小巧且用途单一的class，并以视觉效果命名

总结

个人总结

本次课程学习到了很多有关css的样式信息，还有一些前瞻性的知识点，包括在校内没有接触过的知识点，包括布局和样式。在基础知识之上学习到了很多工程化的信息，使开发的效率更高。包括到后面的一些实践和生态、受益匪浅，但是也要勤于复习

理解CSS | 青训营笔记