嘎嘎的CSS进阶之路 | 青训营笔记

闫池
112 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第二天

CSS基础

1. 引入css的几种方式

  1. 外部链接（比较多）

就是将css放在一个单独的文件里

  1. 内联样式（比较少，不推荐）

就是行内样式，把样式写在标签内，不用写选择器

  1. 嵌入样式（Vue中）

就是把style样式放在文件内，再组件内开发用多个比较多

2.css是如何工作的

这个知识认识还比较浅，引用ppt的一张图

image-20220726141936175

3. CSS选择器

常用的选择器有标签选择器，id选择器，类选择器，但其实还有许多用的比较少的

3.1* 通配选择器

这一一般拿来做一些全局的样式必去清除内外边距等

image-20220726184852984

3.2 [属性名] 属性选择器：

image-20220726185011988

也可以选中特定的属性值：

image-20220726185026495

3.3 伪类选择器

1. 状态伪类选择器

image-20220726190229152

2. 结构伪类选择器

image-20220726190604257

3.4 组合选择

这个是之前的实践中用多个比较少的一个知识

image-20220726191127340

示例：

可以通过组合来选中一个标签，比如选择有class属性为error的input标签

image-20220726191029237

效果image-20220726191038802

3.5 选择器组

如果想同时选择很多个标签，就可以通过逗号的方式隔开，同时选中多个标签。

image-20220726191533127

3. CSS颜色

除了常见的RGB其实还有个HGL

image-20220726192340795

其中H表示压缩呢，S表示颜色的饱和度，L表示明亮程度

image-20220726192432799

另外，不论哪种写法，都可以在最后面另外加上一个透明度

image-20220726192520778

4. CSS文本样式

4.1 字体

字体 font-family

除了正常设置字体外，我们还可以同时指定多种字体，表示当某个字符在当前字体不可用的时候使用一个替代的字体方案

image-20220726193016516

通用字体

我们可以在每个字体样式设置的最后加上一个通用字体族

image-20220726193106628

通用字体组表示一个分类，而不是某一个具体的字体，在所有的字体都不可用的时候浏览器会寻找一个与你选择的通用字体族相似的字体替换，从而使得页面字体统一性更好

使用网络上的字体

image-20220726193438730

一般情况下不建议使用，因为字体包，特别是中文字体包都会非常的大，增加服务器的开销

小tips

在同时有中文和英文出现的时候，我们应该把英文字体的设置放在前面

4.2 字体大小

image-20220726193600268

4.3 控制字体的空白符和换行

image-20220726195523355

CSS进阶

1. 选择器的优先级

选择器的优先级是基于它的特异程度决定的，特异程度越高，优先级越高

image-20220726200520578

可以把这两个数直接进行比较，由于122>22，所以第一个选择器优先级更高

2. 继承

一般和文字相关的属性可以被继承：font-size,color等

image-20220726203829493

盒子的属性无法被继承

显式继承

image-20220726204041462

如果没有被继承，就会使用初始值

image-20220726204300897

3. CSS求值过程

image-20220726204943841

image-20220726205306721

image-20220726205346673

4. 布局 Layout

4.1 盒子模型

image-20220726210442066

宽度width

image-20220726210504522

高度height

image-20220726210531112

内边距padding

image-20220726212318293

边框 border

image-20220726212459233

image-20220726212508602

外边距 margin

image-20220726212647509

image-20220726212701197

当上下两个盒子都设置了外边距的时候，外边距更大的值为两个盒子之间的距离，而不是两个盒子外边距相加后的值

image-20220726212948221

border-box

heigt=border+padding+content

image-20220726213036266

overflow

image-20220726213514807

4.2 块级元素和行级2元素

image-20220726213626921

image-20220726213656273

image-20220726213817148

4.3 常规流

image-20220726214004401

image-20220726214108385

image-20220726214425850

flex布局

image-20220726215039915

对齐方式

image-20220726215337371

主轴：justify-content

image-20220726233115055

侧轴：align-items

image-20220726233336117

弹性：flexibility

image-20220726233510686

Grid布局

image-20220726234033566

image-20220726234135446

如何划分格子？

image-20220726234212138

image-20220726235507886

image-20220726235535294

image-20220726235956615

float浮动

现在只有这一种布局了，其他的布局都用flex或者grid实现

image-20220727000534107

定位

image-20220727000654065

还有一个粘性定位

学习建议

avatar
文章
阅读
粉丝