这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
课程重点
- CSS 是什么
- CSS 使用方法
- CSS 选择器的特异度
- CSS 布局方式及相关技术
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
课程介绍
- CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用，主要使用场景是美化网页，页面布局的。
- 通过对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读，我对建立对 CSS 有了一个全面而深刻的认知。
- 初步了解完基本原理，在赵老师的带领下，通过具体案例解析选择器组及其特异度，在此基础上也引出CSS继承与布局的话题，对相关技术做出介绍。最后围绕盒模型中“行级”与“块级”两种常见布局结构，通过定义-特征-属性-排版工作，层层递进，提供清晰明确的思路，强化巩固了我的CSS技能。
使用CSS，我们可以有以下几种方法
- 1、单独定义在一个文件之中，用link标签进行引用，做到内容样式分离，这是比较推荐的做法，也就是外链；
- 2、嵌入，把代码放在html里，如果项目样式代码过多，嵌入过多css代码可能会造成，可读性变差，难读了点；
- 3、内联，把标签样式全写在html里的style里
就是高优先级中样式可覆盖低优先级的样式，如下代码示例：
<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
.btn {
display: inline-block;
padding: .36em .8em;
margin-right: .5em;
line-hekght: 1.5;
text-align: center;
cursor: pointer;
border-radius: .3em;
border: none;
background: #e6e6e6;
color: #333;
}
.btn.primary {
color: #fff;
background: #218de6;
}
</style>
给所有按钮共同部分写在.btn里，不同的可用高优先级覆盖；先写基础的，再写特殊的
布局常规流
确定内容的大小和位置的算法，其依据元素、容器、兄弟节点和内容等信息来进行计算，相关技术如下表显示
常用有：width(内容)，height（高度），padding（内边距），border（边框样式），margin（外边距），overflow（盒子溢出）··等，说白就是一个盒子里面套了多个盒子
行级元素(inline)
行级元素也被称为内联元素，有以下的特点：
1.同行显示，内容决定元素所占的位置；
2.不可用通过css改变宽高
常见的行级元素有：span、strong、em、a、del
块级元素(block)
块级元素有以下特点：
1.独占一行；
2.可以通过css改变宽高
常见的块级元素有：
h1~h6、div、p、ul、ol、li、hr、form、address
还有 inline-block本身是行级，可以放在行盒中，它可以设置宽高，同时作为一个整体，它也不会被拆散成多行；None的话，在排版时，经常会被忽略
常规流 Normal Flow相关的排版上下文有：
① 行级排版上下文（也叫⾏内格式化上下文）
② 块级排版上下文（也叫块级格式化上下文）
③ Table 排版上下文
④ Flex 排版上下文
⑤ Grid 排版上下文
使用较为合适的排版布局，有便于对预期网页内容的构建以及内容的呈现，不会说文字超出了边框，被挡住了，导致阅读出现障碍等情况。
