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

一、本堂课重点内容：

引入CSS
CSS 选择器
CSS 常用属性
CSS 布局

二、详细知识点介绍：

引入CSS

外联 <link rel="stylesheet" href="CSS路径">
内联 <div style="CSS样式"></div> （不推荐）
嵌入

<style>
    div { CSS样式 }
    p { CSS样式 }
</style>

选择器

1.标签选择器

标签{
	样式声明
}

2.类选择器

.类名{
	样式声明
}

💡 命名规范：BEM格式

3.id选择器（唯一性）

#id名{
	样式声明
}

4.属性选择器

[属性]{
	样式声明
}

[属性=属性值]{
	样式声明
}

[属性~=属性值之一]{
	样式声明
}

5.伪类选择器

鼠标选中元素:hover{
	样式声明
}

6.通配选择器（匹配所有）

* {
	样式声明
}

7.后代选择器

祖元素 后代元素{
	样式声明
}

8.子选择器

只能选择某元素最近一级的子元素；

父元素>子元素{
	样式声明
}

9.兄弟选择器

只能选择某元素后面的同级元素；

兄元素~弟元素{
	样式声明
}

10.相邻选择器

只能选择紧跟在某元素后面的元素；

A元素+B元素{
	样式声明
}

💡 优先级：id>类>标签

选择器特异度

百位：id选择器数

十位：类与伪类选择器数

个位：标签选择器数

特异度更高的选择器优先生效；

常用属性

文本处理：

文本水平居中：text-align: center

文本垂直居中：line-height: [height]

行高：line-height: [] // 字体大小的倍数

字间距：letter-spacing: []px

词间距：word-spacing: []px

文本颜色：color：[]

关于颜色

文本字号：font-size：[]px

font-size属性值：
- 关键字： small、medium、large
- 长度： px、em
- 百分数：相对于父元素字体大小

文本字体：font-family: [] // 可以指定多个字体，浏览器会按照顺序优先使用支持的字体

@font-face {
	font-family: "字体名";
	src: url(字体地址链接)
	format("woff2");
}

文本粗度：font-weight: []

（范围：100~900，其中normal=400，bold=700；）

空白符：white-space: []

normal：溢出换行，合并空白符；

nowarp：溢出滚动，合并空白符；

pre：溢出滚动，保留空白符；

pre-warp：溢出换行，保留空白符；

pre-line：溢出换行，合并空格、保留换行；

溢出处理：

合并连续空白符（包括换行）：white-sapce: nowrap

溢出部分隐藏：overflow: hidden

溢出部分显示省略号：text-overflow: ellipsis

效果处理：

过渡动画时长：transition：[prop] [t]s （对prop属性相关的过渡动画设置t秒时长）

阴影设置：box-shadow: [x]px [y]px [r]px [color]

旋转处理：transform: rotate([θ]deg)

// transform: 还可以设置缩放、偏移等效果；

边框设置：border: []px [style] [color]

底部边框设置：border-bottom: []px [style] [color]

圆角设置：border-radius: []px

内距设置：padding: []px

外距设置：margin: []px

属性继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值；

初始值

CSS中，每个属性都有一个初始值，可以使用initial关键字显式重置为初始值；

CSS布局

确定内容的大小和位置的算法；

依据元素、容器、兄弟节点和内容等信息来计算；

布局技术：

常规流：行级、块级、表格布局、Flexbox、Grid布局；
浮动；
绝对定位；

常用布局——display属性

block 块级元素：独占一个块（通常是一行），可以设置宽高；

inline 行内元素：不会独占一行，允许多个行内元素处于同一行，设置宽高无效；

inline-block 行内块级元素：不会独占一行，允许多个行内元素处于同一行，且可以设置宽高；

none：排版忽略

box盒模型

width、height属性默认指定content宽高；

设置 box-sizing: border-box; 后，

width、height属性指定border宽高；

溢出：overflow

flex布局（弹性布局）

flex容器模型：

main axis：主轴

cross axis：交叉轴

先将容器设为display: flex ，

再设置flex-direction 确定主轴方向， row 横向、column 纵向；

（一）容器属性

flex-direction：元素排列方向

flex-wrap：元素换行

flex-flow：元素排列方向+换行，flex-direction 与 flex-wrap 的综合；

（二）元素属性

flex-basis：设置元素宽度

flex-grow：分配剩余空间

flex item元素之间flex-grow的比值决定对剩余空间的分配比例；

flex-shrink：压缩溢出空间

flex item元素之间flex-shrink的比值决定对溢出空间的压缩比例；

flex：元素宽度+空间分配，以上三个属性的综合；

（三）元素对齐：

align-items：设置元素交叉轴方向对齐方式，需在flex容器上设置；

align-items: center 设置居中
align-items: flex-start 交叉轴起点对齐（靠左）
align-items: flex-end 交叉轴终点对齐（靠右）

align-self：设置自身在交叉轴方向的对齐方式，需在flex元素上设置；

justify-content：设置元素主轴方向对齐方式，需在flex容器上设置；

💡 为什么使用flexbox？

在元素外部处理空间分布
让元素自己处理空间分布

Grid布局（二维布局）

先将容器设为display: grid;

（一）划分网格（在容器上）

grid-template-columns: 100px 100px 200px; /*三列列宽*/
grid-template-rows: 100px 100px /*两行行高*/

grid-template-columns: 30% 30% auto; /*三列列宽*/
grid-template-rows: 100px auto /*两行行高*/
//auto自动占满剩余空间

grid-template-columns: 100px 1fr 1fr; /*三列列宽*/
grid-template-rows: 100px 1fr /*两行行高*/
//fr按比例分配剩余空间

（二）设置占位（在元素上）

grid-area: a/b/c/d; //行：a~c；列：b~d；（根据网格线）

CSS定位（position）

static 静态定位：默认原有的位置，非定位元素；

relative 相对定位：相对默认位置进行偏移，不脱离文档流（通过设置top，left等属性）；

absolute 绝对定位：相对首个非static父级元素（默认为浏览器）进行偏移，脱离常规流（通过设置top，left等属性）；

fixed 固定定位：相对浏览器可视窗口进行绝对定位（通过设置top，left等属性）；

sticky 粘性定位：relative+fixed，初始为相对定位，页面滚动到一定位置时变为固定定位； // 可用于将导航栏、表头等元素在页面滚动时固定在页面顶部

三、课后个人总结：

需要注意理解CSS的工作原理；
需要灵活应用Flex布局和Grid布局，根据元素排列方式进行选择；
需要注意区分哪些定位属性是脱离常规流的，哪些不是；

理解CSS | 青训营笔记