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

由浅入深CSS | 青训营笔记

CSS=>Cascading Style Sheets，用来定义页面元素的样式，例如字体颜色、位置大小、动画效果

基础

语法

一个简单的CSS结构：

h1{
    color: white;
    font-size: 14px;
}

• 这里h1代表选择器（Selector），选择页面中的h1标签
• color和font-size代表属性（Property），表示希望改变的样式
• white和14px表示属性值（Value），表示对应样式属性的值
• color: white;和font-size: 14px;分别在两行，分别表示两个属性的定义，中间以分号隔开，一个键值对便称为一个声明（Declaration）

引用

CSS有三种使用方式：

<!--html文件中-->
<!--方式一：外链-->
<link rel="stylesheet" href="/assets/style.css">
​
<!--方式二：嵌入-->
<style>
    li{
        margin: 0;
        list-style: none;
    }
    p{
        margin: 1em 0;
    }
</style>
​
<!--方式三：内联-->
<p style="margin:1em 0">
    Example Content
</p>

传统开发中我们常使用外链来进行html与css文件分离，以方便开发与维护，但在组件化开发中，我们也常常使用嵌入的方式，将组件的所有内容封装到一起，故二者都常使用，而内联中css与html耦合度太高，最不推荐使用！

css如何工作

选择器

选择器（Selector）负责找出页面中的元素，以便给他们设置样式，我们有多种方式可以选择元素：

• 标签名、类名或id
• 按照属性
• 按照其在DOM树中的位置

通配选择器

一个 ***** 可以代表匹配所有内容

*{
    margin: 10px;
}

这样margin: 10px;的样式就会加到所有节点上

id选择器

若一个节点的id被设为logo，则可以通过#logo来匹配该节点

#logo{
    margin: 10px;
}

类选择器

若有一个或若干个节点的class属性被设为logo，则可以通过.logo来匹配这些节点

.logo{
    margin: 10px;
}

属性选择器

可以根据标签内的属性来进行选择，例如一个input标签中有disabled属性，我们要通过属性选择器对其进行选择，就可以使用如下方式：

[disabled] {
    margin: 10px;
}

如果要选中type属性为password的input标签，就可以用如下方式：

input[type="password"]{
    border-color: red;
    color: red;
}

特殊的匹配规则：

a[href^="#"]{
    border-color: red;
    color: red;
}

👆匹配href属性以井号开头的a元素

a[href$=".jpg"]{
    border-color: red;
    color: red;
}

👆匹配href属性以.jpg结尾的a元素

伪类选择器

状态伪类

状态伪类选择器用于设置元素在特定情况下的样式，例如链接被激活后、鼠标在元素上方悬浮等

例：

//默认样式
a:link {
    color: black;
}
//访问过的样式
a:visited {
    color: gray;
}
//鼠标悬停样式
a:hover {
    color: orange;
}
//点击时样式
a:active {
    color: red;
}

不同的元素会有不同的状态，例如输入框点击出现光标后的状态为focus状态

结构伪类

结构伪类选择器用于为指定位置的元素添加样式

例：

//为第一个li元素添加样式
li:first-child {
    color: coral;
}
//为最后一个li元素添加样式
li:last-child {
    color: red;
}

选择器组合

不同的选择器可以组合来进行使用

例如：

input.error {
    padding: 10px;
}

👆选择类名为error的input标签

深入

选择器特异度

当一个元素设置了多个css样式，哪个会起效果呢？我们根据其特异度来计算👇

122大于022，所以第一条选择器定义的样式生效

继承

而继承表示子元素如果没有单独定义样式，则会自动继承父元素的样式。

以上自动继承的方式为隐式继承，我们还可以进行显示继承，让原本不能被继承的属性变为可继承属性：

*{
    box-sizing: inherit;
}
​
html {
    box-sizing: border-box;
}
​
.some-wiget{
    box-sizing: content-box;
}

当一个属性既没有继承也没有定义样式，就会自动使用其初始值

CSS计算

浏览器根据DOM树和样式规则，会进行如下转换：

而我们在继承时，部分属性会继承自父元素的计算值，而非实际值

布局

• 常规流

  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid布局

• 浮动

• 绝对定位

盒模型

标准计算方式：

设置box-sizing: border-box后的计算方式：

块级与行级

块级：

• 不和其他盒子并列摆放
• 适用于所有的盒模型属性
• body、article、div、main、section、h1-6、ul、li等
• display:block

行级：

• 会和其他盒子放在一行或者拆分为多行
• 盒模型中的width、height并不适用
• span、em、strong、cite、code等
• display:inline

二合一：

• 本身是行级、可以放在行盒中，可以设置宽高，但作为一个整体不会被拆分成多行。
• display:inline-block

常规流

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其它元素都会在常规流之内(in-flow)
• 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文(IFC)

只包含行级盒子的容器会创建一个行级排版上下文

IFC内的排版规则：

• 盒子在一行内水平摆放
• 一行放不下时，换行表示
• text-align决定一行内盒子的水平对齐
• vertical-align决定一个盒子在行内的垂直对齐
• 会避开浮动元素

块级排版上下文(BFC)

会创建BFC的容器：

• 根元素
• 浮动、绝对定位、inline-block
• Flex子项和Grid子项
• overflow的值不是visible的块盒
• display:flow-root;

排版规则：

• 盒子从上到下摆放
• 垂直margin合并
• BFC内盒子的margin不会与外面的合并
• BFC不会和浮动元素重叠

Flex Box

Flex Box是一种新的排版上下文，它可以控制子级盒子的：

• 摆放的流向（上下左右）
• 摆放顺序
• 盒子的宽度和高度
• 水平和垂直方向对齐
• 是否允许折行

在其中可以通过justify-content来控制排版：

通过align-items属性可以控制其对齐基线：

Flexbility

• 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
• flex-grow有剩余空间时的伸展能力
• flex-shrink容器空间不足时收缩的能力
• flex-basis没有伸展或收缩时的基础长度

flex属性为上述属性的综合，具体对应关系如下：

Grid布局

一般的布局往往不只是流式排列，所以我们引申出Grid布局

通过display:grid使元素生成一个块级的Grid容器，使用grid-template相关属性将容器划分为网格，再设置每一个子项占那些行/列

网格划分举例：

表示网格中的位置：

通过(1,1)和(3,3)两个点可以确定被黄线包围的左侧网格

代码表示：

.a{
    grid-area: 2/2/4/4;
}

grid布局是一种很强大的布局方式，细节内容也很多，具体可以参考文档

position属性

• static——默认值，非定位元素
• relative——相对自身原本位置偏移，不脱离文档流，流内其他元素当它没有偏移一样布局
• absolute——绝对定位，相对非static祖先元素定位，流内元素会当其不存在，正常布局
• fixed——相对视口绝对定位

总结

CSS内容杂而多，新特性不断涌现，今天的课程只是介绍了一小部分常用内容，仍需保持持续学习的心态不断探索！ 本节课中我第一次了解了css的计算过程，对底层的原理了解更进一步，在布局方面练习欠缺，以前用flex与定位进行布局较多，完全忽略了好用的grid布局，而且对盒模型与排版上下文理解不够深刻，这节课解决了我不少疑问！