层叠样式表

层叠概述：

多个规则选中同一个元素相同属性名，不同属性值，叫做“声明冲突”

一但声明冲突，浏览器会自动触发层叠机制

1、比较优先级

important 重要性

color:red; 普通声明

color:red !important; 重要声明

2、比较特殊性

范围越小，特殊性越高 特指度 特指值

从高到底

行内样式>ID选择器>类选择器>元素选择器>通配符选择器

会生成4个数字a、b、c、d

a：若声明是行内样式。则为1 否则为0

b：规则中ID选择器的个数

C：规则中类选择器、伪类选择器和属性选择器的个数

d：规则中元素选择器、伪元素选择器的个数

通配符选择器特殊性为：0

3、比较源次序

取值单位

绝对单位（固定值）

相对单位（相对值）% em rem

注：相对单位最终都会转换为绝对单位

子元素的宽度、内边距、外边距都是取父元素宽度的百分比，

子元素的高度是取父元素高度的百分比

注：如果都是%来取值，则为 流式布局

em 是父元素的文字大小

rem是HTML是文字大小

vw是视口宽的百分比

vh是视口高的百分比

强制继承：inherit

雪碧图

1、设置雪碧图的尺寸

2、引用雪碧图的图片

background-image： url（""）

3、设置图片位置

background-position：-x -y

::before{

content:"";

display:inline-block

hover::before

}

flex：弹性布局

常规流水平居中： 1、给元素一个固定宽度 2、添加margin：auto

容器（父元素） display：flex；

添加flex元素的子元素，会自动在一行显示

项目尺寸之和大于容器的尺寸依然会在一行显 示

因为是每个项目身上都有一份缩小的比例

项目（子元素）

flex-wrap：nowrap 不换行 flex-wrap：wrap 换行 flex-wrap：wrap-reverse 换行且第一行在最下方

是主轴方向和换行的简写方式

flex-flow：主轴方向 换行

容器的属性

主轴上的方向和起始位置:row行 column列 reverse倒叙

flex-direction：row （主轴水平，起始位置左侧）

flex-direction：row-reverse（主轴水平，起始位置右侧）

flex-direction：column（主轴垂直，起始位置顶部）

flex-direction：column-reverse（主轴垂直，起始位置底部）

主轴上的对齐方式

剩余空间

justify-content：flex-start（主轴起始位置对齐） justify-content：center（主轴方向居中） justify-content：flex-end（主轴结束位置对齐） Space-between、Space-around 、Space-evenly

1、剩余空间=容器的尺寸-项目的尺寸之和

2、剩余空间、项目个数

3、把第二部的结果除以2

4、把度散步的结果给到每个项目的左右

相同点：项目和项目之间的距离是一样的。不同点：space-between：项目和容器之间的距离为零 两端对齐 space-around：项目和容器之间的距离=项目和项目之间距离的一半 分散对齐 space-evenly：项目和容器之间的距离=项目和项目之间距离 平均分配

交叉轴上的对齐方式：align-items

仅用于一个主轴

flex-start：交叉轴起始位置对齐 center：交叉轴方向居中 flex-end：交叉轴结束位置对齐 stretch：项目没有设置高度或者高度为auto，项目占满整个容器 baseline：第一行文字基线对齐

多个主轴交叉轴对齐方式

align-content：flex-start；

align-content：flex-end；

align-content: center

align-content: space-between

align-content: space-around

align-content: space-evenly

客户端：张鑫旭

js：阮一峰

项目

order 调整位置

flex-grow

项目的放大比例

条件：具备剩余空间

执行步骤

1、获取剩余空间=容器的尺寸-项目尺寸之和

2、获取flex-grow的和

3、获取每份的尺寸=剩余空间/第二步骤

4、按比例放大

每个项目放大flex-grow值乘以每份的尺寸

flex-grow和flex的区别

flex-grow只分配剩余空间

flex分配的是剩余空间+参与标签的尺寸

flex-shrink：

项目的缩小比例

条件：具备超出尺寸

执行步骤

1、获取超出空间=项目尺寸之和-容器的尺寸

2、获取flex-shrink：的和

3、获取每份的尺寸=超出空间/第二步骤

4、按比例缩小

每个项目缩小flex-shrink：值乘以每份的尺寸

align-self：控制每一个项目在交叉轴的对齐方式

视觉格式化模型

视口viewport

包含块（containing block）

每个元素都有一个包含块，他是指元素在页面中摆放的区域

通常情况下，元素的包含块是他父元素的内容盒（content-box）

根元素的包含块是初始化包含块

内容盒：content-box content

填充盒：padding-box content+padding

边框盒：boder-box content+padding+boder

视觉格式化模型规定，定位体系一共有三种：

常规流（normal flow）

浮动（float）

绝对定位（absolute positioned）

任何一个元素，必须属于其中一种定位体系

先判断position的值是absolute 或fixed 是的话 是绝对定位 position默认值（static）

不是的话float的值是left或right 是的话 是浮动 float（none）

两个都不是 就是常规流

常规流又叫普通流

又叫文档流

普通文档流

外边距合并

触发条件：垂直方向

水平方向不能合并

两个标签之间没有，border、padding、content

既相邻兄弟元素或父子元素

执行规则：

1、都是正数取最大

2、都是负数取最小

3、一正一负数相加

常规流盒子水平方向上的尺寸，必须等于包含块的宽度

如果不行，则强行将margin-right设置为auto

常规流i水平方向上的居中：1、给一个固定的宽度

2、margin

垂直方向

margin为auto：0px

height为auto：适用内容的宽度

position：relative

相对位置：该盒子可以相对于原本的位置进行偏移可通过left、top、right、bottom设置偏移量