理解CSS
一、基础知识
1、层叠三大规则
①优先程度递减
样式表来源→选择器优先级→源码位置
②重要程度递增
用户代理样式(浏览器默认样式)→用户样式表(很少有)→作者样式表→作者样式表中的!important→用户样式表中的!important→用户代理样式表中的!important
2、选择器
基础：
- #id~ID选择器
- class~类选择器
- *~通用选择器
组合器：
- 子组合器(>)---匹配目标元素是其它元素的直接后代。
- 相邻兄弟组合器(+)---匹配的目标后元素紧跟在其它元素后面
- 通用兄弟组合器 (～)---匹配所有跟随在指定元素之后的兄弟元素
复合选择器---多个基础选择器可以连起来使用
属性选择器---通过约束属性值
伪类选择器---选中处于某个特定状态或相对于其父级或兄弟元素位置的元素
伪元素选择器---匹配在文档中没有直接对应HTML元素的特定部分或插入内容
3、选择器优先级
内联>id> class = attribute = psendo-class>type = psendo- element
4、继承
可以使用inherit关键字显示指定一个属性值从其父元素继承
5、盒子模型
margin|border|padding|content
-
控制盒子类型：display : block ，nine...
-
控制盒中内容流：overflow : auto , hidden..
-
是否可见: visiblity，vsible，hidden
二、布局
CSS3之前的布局
-
Normal Flow常规流 -
Float浮动流 -
Positioning定位流
CSS3之后的新增布局
-
Flex弹性盒子布局（一维） -
Grid网格布局（二维） -
Multicol多列布局
触发BFC，以下条件满足任何一个即可：
-
display: flow-root| inline-block
-
position: absolute|fixed
-
float：不为 none
-
overflow：不为visible
1.Grid
可以定义由行和列组成的二维布局，然后将元素放置到网格中，元素可以只占其中一个单元格，也可以占据多行或多列.
三、层叠上下文
对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开。
形成新的层叠上下文的条件（任一即可）
- position：
- relative或absolute；
- 并且z-index不是auto
- position：fixed或 sticky
- flex或grid的子元素；并且z-index不是auto
- opacity的值小于1
- transform的值不为none
- will-change的值不为通用值
四、变形、过渡、动画
1、transform变形
-
2D相关属性：transform：
- translate（移动）
- rotate（旋转）
- scale（放缩）
- matrix（变形矩阵）
- transform-origin：right top.center等表示变形时依据的原点，
-
3D相关属性：
-
translate3d
-
rotate3d
-
scale3d
-
matrix3d等
-
transform-origin:right top,50px.30px等表示变形时依据的原点。
-
transform-systyle：flat或preserve-3d看子元素的3d表现
-
perspective：观看点距离z＝0这个平面的距离，可以在transform中用perspective（）使用作为当前元素.也可以直接使用，给后代元素一个统一值.
-
perspective-origin：观看者的位置，如top.bottom等.
-
backface-visibility：元素正面只有朝向观察者可见-visibility:
-
animation-＊相关属性用来为元素添加动画
-
animation-name 定义好的关键帧的名字
-
animation-duration：动画时长
-
animation-timing-function 动画节奏
-
animation-delay：延时开始的时间.
-
animation-iteration-count 执行次数
-
animation-direction 是否反向或交替
-
animation-fill-mode 动画执行前后的样式采用
-
animation-play-state 动画运行状态
-
外链<link rel="stylesheet" href="style.css">
嵌入<style></style>
内联<p style="margin:lem 0">...</p>
CSS是如何工作的？
加载HTML→解析HTML→创建DOM树→展示页面
↓ ↑添加样式到DOM节点
加载CSS→解析CSS
选择器selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
组合：
- 直接组合（AB）满足A同时满足B
input:focus - 后代组合（AB）选中B，如果它是A的子孙
nav a - 亲子组合（A＞B）选中B.如果它是A的子元素
section>a
兄弟选择器（A～B）选中B如果它在A后且和A同级h2～p
相邻选择器（A＋B）选中B，如果它紧跟在A后面h2＋p
alpha透明度（0-1）
- #ff000078
- rgba(255,0,0,0.47）
- hsla10,100%,50%,(0.47)
字体：font-family
行高：line-height
粗细：font-weight
1、选择器优先级
- 选择器的特异度（Specificity）
- 比较id，（伪）类、标签的个数，多则大
2、继承：
和文字相关的属性能继承．和盒模型相关的不能继承
3、布局相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid布局
- overflow visible hidden scroll
谥出 (可见) (隐藏) (滚动条)
块级(disploy : block)∶不和其它盒子并列摆放
行级(disploy ：inline):和艾它g级显子-起放龙-行或拆丹菅行、盒模型的width和heiqht不适用
行级排版上下：文会创建一个IFC
IFC内的排版规则
-
盒子在一行内水平摆放
-
一行放不下时，换行显示
-
text-align 决定一行内盒子的水平对齐
-
vertical-align决定一个盒子在行内的垂直对齐
-
避平浮动元素
块级排版上下文
某些客器会创建一个BFC
-
根元素
-
浮动、绝才定位,
inlink - block -
Flex子项和Grid子项
-
overflow值不是visible的块盒
-
display ：flow-root
BFC内排版规则
-
盒子从上到下摆放
-
垂直margin合并
-
BFC内盒子的wargin不会与外面的合并
-
BFC不会和浮动元素重合
Flex布局
主轴:justify-content
-
左对齐 flex-start
-
右对齐 flex-end
-
居中
- center
- space - between
- space - around
- space - evenly
侧轴:align-items
-
上对齐 flex-start
-
下对齐 flex-end
-
居中
-
center
-
stretch
-
baseline
-
Flexibility 可以设置子项的弹性：当容器有剩余空间时.会伸展；容器空间不够时，会收缩.
flex-grow有剩余空间时的伸展能力flex-shrink容器空间不足时收缩的能力flex-basis没有伸展或收缩时的基础长度
Grid布局
display:grid使元素生成一个块级的Grid容器- 使用
grid-template相关属性将容器划分为网样 - 设置每一个子项占哪些行／列
- 划分：行（
grid-template-columns）列（grid-template-rows）
Float 浮动：文字环绕图片
绝对定位（position属性）
static 默认值.非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute绝对定位.相对非static祖先元素定位.
fixed 相对于视口绝对定位
