这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
今日课程笔记：理解CSS
一、什么是CSS
Cascading Style Sheets，用于定义页面元素的样式，包括：
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
使用CSS有三种方法：外链（推荐）、嵌入、内联
二、CSS如何工作
加载并解析
CSS后生成CSSOM树，与HTML解析后生成的DOM树结合生成Render Tree，再进行后续的浏览器进程
三、CSS重要知识点
1. 选择器
作用：找出页面中的元素，以便给他们设置样式 可以使用多种方式选择元素：
- 标签名、类名、id
- 属性
- 按照DOM树中位置
属性选择器
<style> [disabled] {} input[type="password"] {} a[href^="#"] {} a[href$=".jpg"] {} </style>
2. 伪类
不基于标签和属性定位元素
- 状态伪类
- 结构性伪类
3. 组合
4. HSL
RGB存在的问题：和常用的颜色特征无法直接关联
- H：
Hue，色相，色彩的基本属性，取值范围0-360 - S：
Saturation，饱和度，色彩鲜艳程度，取值范围0-100% - L：
Lightness，亮度，颜色的明亮程度，取值范围0-100%
5. Web Font
@font-face {
font-family: '';
src: '' format('');
}
6. 特异度
每个标签特殊的程度：id > class > tag
7. CSS求值
8. 行级排版上下文IFC
Inline Formatting Context，只包含行级盒子的容器会创建一个IFC，排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
text-align决定一行内盒子的水平对齐vertical-align决定一个盒子在行内的垂直对齐- 避开
float浮动元素
9. 块级排版上下文BFC
Block Formatting Context，某些容器会创建一个BFC，包括：
- 根元素
- 浮动、绝对定位、
inline-block Flex子项与Grid子项overflow值非visibledisplay: flow-root;其排版规则为：
- 盒子从上到下排列
- 垂直方向
margin合并 - BFC内部盒子的
margin不会与外部盒子合并 - BFC不会和浮动元素重叠
四、盒模型
标准盒模型content-box：width与height只包含Content
怪异盒模型border-box：width与height包含Content + Padding + Border
怪异盒模型使用场景：例如，input标签中需要给placeholder设置一个边距，一般会使用padding属性，这时需要设置怪异盒模型
五、Flex Box
一种新的排版上下文，可以控制子盒子的：
- 摆放流向
- 摆放顺序
- 盒子宽高
- 水平垂直对齐
- 是否允许折行
六、Grid Box
使元素生成一个块级的Grid容器，使用grid-template相关属性将容器划分为网格，设置每一个子项占哪些行/列
七、动手小实验
1. 选择器
复用一下第一节课实现的小demo
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
.header {
width: 100%;
height: 50px;
background-color: pink;
}
#nav {
width: 50%;
background-color: darkred;
margin: 0 auto;
color: #fff;
}
.main {
position: absolute;
width: 70%;
height: 500px;
background-color: aqua;
}
.main > article {
width: 80%;
height: 100px;
margin: 50px auto;
background-color: greenyellow;
line-height: 100px;
}
.aside {
position: absolute;
right: 0;
width: 25%;
height: 500px;
background-color: grey;
}
footer {
position: absolute;
top: 550px;
width: 100%;
background-color: purple;
color: #fff;
}
</style>
<body>省略</body>
实现效果：
2. Grid 布局
笔者之前做过的一个小项目，在页脚导航栏部分用到了grid布局，确实非常强大。部分截取代码如下：
<style>
.footer-wrap .footer-menu-box .menu {
position: relative;
color: #fff;
font-size: 0.12rem;
display: grid;
grid-template-columns: repeat(5, auto);
}
.footer-wrap .footer-menu-box .menu > li {
box-sizing: border-box;
margin-top: 0.46rem;
padding-right: 0.2rem;
}
.footer-wrap .footer-menu-box .menu > li:last-child {
padding-right: 0;
}
.footer-wrap .footer-menu-box .menu > li ul {
margin-top: 0.18rem;
}
.footer-wrap .footer-menu-box .menu > li li {
margin-bottom: 0.05rem;
}
.footer-wrap .footer-menu-box .menu .sub-menu {
color: #535a5e;
}
.footer-wrap .footer-menu-box .menu .sub-menu li:first-child {
display: none;
}
.footer-wrap .footer-menu-box .menu a:hover {
color: #fff;
}
.footer-wrap .footer-menu-box .menu::after {
content: '';
display: table;
clear: both;
}
</style>
<div class="footer-menu-box">省略</div>
实现效果
