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

页面中使用css 三种办法

1 外链接 <link>

2 嵌入 <style>

3 内联 <p style =""> </p> (ui 组件库，单个组件样式)

CSS工作原理

选择器 Selector

找出也没拿中的元素，以便给他们设计样式

-使用多种方式选择元素

-按照标签名，类名或id

-按照属性

-按照DOM树中的位置

伪类

-不基于标签和属性定位元素

-几种伪类

-状态伪类

-结构性伪类

组合关系的选择

深入css

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

inherit 显示继承

初始值

-css中，每个属性都有一个初始值

-background-color 的初始值为transparent

-margin-left的初始值为0

-可以使用initial关键字显示重置为初始值

-background-color：initial

布局是什么？

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

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

布局的相关技术

width

-指定content box 宽度

-取值为长度、百分数、auto、

-auto由浏览器根据其他属性决定

-百分数相对于容器的content box 宽度

height -指定content box 宽度 -取值为长度、百分数、auto、 -auto由浏览器根据其他属性决定 -百分数相对于容器的content box 宽度 -容器有指定的高度，百分数才生效

padding

-指定元素四个方向的内边距

-百分数相对容器宽度

border

-三种属性

-border-width

-border-style

-border-color

-四个方向

-border-top

-border-right

-border -bottom

-borfer-left

margin

-指定元素四个方向的边距

-取值可以是长度、百分数、auto

-百分数相对于容器宽度

常规流 Normal Flow

-根元素、浮动和绝对定位的元素会脱离常规流

-其他元素都在常规流（in-flow）

-常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

-Inline Formatting Context （IFC）

-只包含行级盒子的容器会创建一个IFC

-IFC内的排版规则

-盒子在一行内水平摆放

-一行内放不下时，换行显示

-text-align 决定一行内盒子的水平对齐

-vertical-align 决定一个盒子在行内的垂直对齐

-避开浮动元素

块级排版上下文

-Block Formatting Context（BFC）

某些容器会创建一个BFC

-根元素

-浮动、绝对定位、inline-block

-Flex子项和Grid子项

-overflow值不是visible的块盒

-display：flow-root

BFC内的排版规则

-盒子从上到下摆放

-垂直margin合并

-BFC内的盒子margin不会与外面的合并

-BFC不会与浮动元素重合

Flex Box 是什么？

-一种新的排版上下文

-它乐意控制子集盒子的

-摆放的流向

-摆放的顺序

-盒子的宽度和高度

-水平和垂直方向的对齐

-是否允许折行

Flexibility

-可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩

-flex-grow 有剩余空间时的伸展能力

-flex-shrink容器空间不足时收缩的能力

-flex-basis没有伸展或收缩时的基础长度

总结

伪类可以看作以选中元素为基准点，此元素的一些状态或属性。

chrome消除 div 滚动条的宽度，通过箭头键直接控制滚动：

#divContainer {
  overflow: auto;
  height: 160px;
  width: 260px;
  background-color:red;
}

#divContainer::-webkit-scrollbar {
    border-width:1px;
}

总结一下伪元素和伪类的区别：
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

理解CSS | 青训营笔记