这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
day2 走进前端技术栈-CSS
一、CSS是什么？
- Cascadig Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色，
- 设置位置和大小
- .添加动画效果
二、页面中使用CSS
分外 外链 嵌入 内链
<!-- 外链-->
<link rel="stylesheet" href="styles/style.css">
<!--嵌入-->
<style>
li{ margin-top: 20px;}
</style>
<!-- 内链-->
<h4 style="margin-top: 20px;">
Js 面向对象 动态添加标签页
</h4>
三、选择器Selector
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性（属性选择器）
- 按照DOM树中的位置
-
通配选择器 *
组合：
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果它在A后且和A同级 | h2~p |
| 相邻选择器 | A+B | 选中B,如果它J紧跟在A后面 | h2+p |
四、字体 font-family
通用字体族：Serif衬线体、San-Serif无衬线体、Cursive 手写体、Fantasy、Monospace等宽字体。
五、具有误导性的white-space
- normal 默认行为，多个空格只展示一个空格
- nowrap 强制不换行，忽略空格
- pre 和原始代码一样
- pre-wrap 保留空格也会换行
- pre-line 合并空格保留换行
六、选择器优先级
特异度越大优先级越高
#nav .list li a:link 计算：1 id，2 (伪)类，2 标签 特异度为5
个人总结 权重计算：
1、id选择器。用四位数字表示id选择器的优先级就是：0 1 0 0。如：#con {}
2、类名选择器。用四位数字表示类名选择器的优先级就是：0 0 1 0。如：.h5course {}
3、标签名选择器。用四位数字表示标签名选择器的优先级就是：0 0 0 1。如：div {}
4、伪类选择器（如:hover等a标签常见的四种伪类）。用四位数字表示伪类选择器的优先级就是：0 0 1 0
5、通配符选择器（*）。当通配符单独出现的时候，其优先级为：0 0 0 0。如果它存在于后代选择器当中，涉及到优先级叠加运算的时候，其优先级为：0 0 0 1。
七、布局相关技术
- 常规流：行级（display：inline）、块级（display：block）、表格布局、FlexBox、Grid布局
- 浮动
- 绝对定位
盒子容器结构
display属性
block：块级盒子
inline：行级盒子
igline-block：本身是行级，可以放在行盒中;可以设置宽 高;作为一个整体不会被拆散成多行。
none 排版时完全被忽略
行级排版上下文
-
Inline Foratting Context (IFC)
-
只包含行级盒子的容器会创建一个IFC
-
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时， 换行显示
- tex-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子 在行内的垂 直对齐
- 避开浮动(loat)元素*
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
- 避开浮动(loat)元素*
Flex Box是什么?
- 一种新的排版上下文
- 它可以控制子级盒子的:
- 摆放的流向(→←↑↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
Flexibility
- 可以设置子项的弹性:当容器有剩余空间时，会伸
- 展;容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex- shrink容器空间不足时收缩的能力
- flex basis没有伸展或收缩时的基础长度
position属性
- static默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
