这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天，希望继续坚持。

走进前端技术栈-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>
复制代码

CSS工作原理

选择器Selector

• 找出页面中的元素，以便给他们设置样式

• 使用多种方式选择元素

  • 按照标签名、类名或id
  • 按照属性（属性选择器）
  • 按照DOM树中的位置

---

• 通配选择器
• 标签选择器
• id选择器
• 类选择器
• 属性选择器

伪类

• 不基于标签和属性定位元素
• 几种伪类：
  • 标签伪类
  • 状态伪类

组合

选择器组

字体 font-family

通用字体族：Serif衬线体、San-Serif无衬线体、Cursive 手写体、Fantasy、Monospace等宽字体。

• 字体列表最后写上通用字体族
• 英文字体放中文字体前面

选择器优先级

特异度越大，优先级越高 权重计算：

• id选择器
  • 用四位数字表示id选择器的优先级就是：0 1 0 0。如：#con {}
• 类名选择器
  • 用四位数字表示类名选择器的优先级就是：0 0 1 0。如：.h5course {}
• 标签名选择器
  • 用四位数字表示标签名选择器的优先级就是：0 0 0 1。如：div {}
• 伪类选择器（如:hover等a标签常见的四种伪类）
  • 用四位数字表示伪类选择器的优先级就是：0 0 1 0
• 通配符选择器
  • 当通配符单独出现的时候，其优先级为：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不会和浮动元素重叠
  • 避开浮动(float)元素

Flex Box

• 一种新的排版上下文
• 它可以控制子级盒子的:
  • 摆放的流向(→←↑↓)
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

Flexibility

• 可以设置子项的弹性:当容器有剩余空间时，会伸
• 展;容器空间不够时，会收缩。
• flex-grow有剩余空间时的伸展能力
• flex- shrink容器空间不足时收缩的能力
• flex basis没有伸展或收缩时的基础长度

Position属性

• static默认值，非定位元素
• relative 相对自身原本位置偏移，不脱离文档流
• absolute 绝对定位，相对非static祖先元素定位
• fixed 相对于视口绝对定位