拉勾教育前端就业训练营学习笔记02-a
CSS常用样式
字体属性
- 粗细： font-weight 作用：设置文字是否加粗显示 属性值：单词、数字
属性值：
1、单词：normal默认值，定义标准字体 （常用）
bold：粗体显示。 <b>、<strong> 标签的默认效果（常用）
bolder：定义更粗的字体
lighter：定义更细的字体
2、数字：取100-900之间整百数字，其中400—normal效果 700—bold效果
- 字体风格 ：font-style 作用：是否倾斜显示 属性值：单词
属性值：
normal：正规字体，大多数标签默认值
italic：倾斜字体 主要针对英文，要求英文以字体中的倾斜样式显示(较常用) <i>标签默认样式
oblique：设置倾斜文字，与字体无关 italic 与oblique二者效果大致相同百分比数值：设置的本身字号像素值;;的百分比比；设置一行文字实际占有的高度，文字字号在设置行高中垂直居中显示 属性值：px、百分比
- 行高： line-height 作用：设置的是一行文字实际占有高度，文字字号垂直居中显示 属性值：px、百分比 font属性的一个单一属性
属性值：
像素值：—设置行高具体像素值
百分比数值：设置的本身字号像素值;;的百分比比；设置一行文字实际;占有的高度，文字字号在设置行高中垂直居中显示 属性值：px、百分比
实际中行高的数值通过设计图获取，量取数值时需要使用一些辅助软件工具。如【Fireworks软件】软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿更改为 不消除锯齿 ，方便文字得像素点清晰显示。
量取行高步骤：
1、确定文字字号和字体。导入效果图后左侧文字工具书写一样的字，下方更改与原图文字颜色差距较大的颜色。ctrl+加号可放大。调整字号字体直至两个文字完重合。
2、书写两行上下对齐文字，调整属性面板行高值单位为像素，更改数值大小，直到两行文字对齐。
- 字体综合font
字号、字体、行高、加粗、倾斜都是font综合属性的单一属性。五个单一属性可以进行合写，属性值可以有两到多个，值之间用空格经行分隔。
写法1、必须有字号和字体参与， 字号在前字体在后 ，不能颠倒顺序 font 14px "宋体"
2、对字号、字体行高经行合写，书写顺序必须是 字号、行高 、字体 ，字号和行高之间必须 用/分隔 ，顺序不能更改。
3、如果font需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置，后面的字号、行高、字体不能更改位置。
css文本属性
- 水平对齐 属性名 text-align 作用：设置文本水平方向对齐 在一段整体段落中，不论文本是单行还是多行，都会对应方向对齐 属性值：
| 属性值 | 作用 |
|---|---|
| left | 居左对齐，大部分标签默认值 |
| center | 居中对齐 |
| right | 居右对齐 |
- 文本修饰 属性名 text-decoration 作用：设置文字整体是否有线条修饰效果
| 属性值 | 说明 |
|---|---|
| none | 没有修饰，大部分标签默认效果 |
| overline | 上划线 |
| line-through | 中划线，删除线<del>标签默认值 |
| underline | 下划线<a>标签默认值 |
- 文本缩进 属性名 text-indent 作用：设置段落首行是否进行缩进
| 属性值 | 说明 |
|---|---|
| px单位 | 表首行缩进多少像素 |
| em单位 | 倍数、自动参考一个文字大小宽度（优点：自动根据文字字号大小变化） |
| 百分比 | 表缩进文字所在标签的父级标签的widht属性值百分比。参考盒子宽度。 |
实际中最常用em单位，属性值区分正负，正数向右，负数向左缩进
盒模型属性
又叫框模型，包含五个用来描述盒子位置、尺寸、的属性，分别是宽度width、高度height、内边距padding、边框border、外边距margin
常见盒模型区域 ：
根据不同属性效果可以划分区域
- 书写元素内容区域：width+height
- 盒子可以实体化区域：width+height+padding+border
- 盒子实际占位的位置：width+height+padding+border+margin
- 宽度width ——————————————
作用：设置可以添加元素内容的区域的宽度 属性值
- auto：默认值、浏览器可计算出实际的宽度
- px；像素值定义的宽度
- %：定义参考父元素宽度width的百分比宽度
应用：
- 如果一个元素不添加width属性值，默认属性值为auto。不同的元素浏览器会根据其特点自动计算出实际宽度，如<div>等独占一行的，会自动撑满父元素的width区域。如果是<span>元素等不需要独占一行的，其width属性值是内部元素内容自动撑开的宽度
- 实际中 <body>不需要设置宽度，会自动适应浏览器窗口的宽度
- 高度height ——————————————
作用：设置可以添加元素内容的区域的高度
属性值
- auto：默认值、浏览器可计算出实际的高度
- px；像素值定义的高度（较常用）
- %：定义参考父元素宽度width的百分比高度
应用：如果一个元素不添加height属性值，默认属性值为auto。浏览器会计算出其实际高度，元素的高度自适应内部内容的高度
- 内边距padding ——————————————
作用：设置的是元素边框内部到宽高区域之间的距离
特点：可以加载背景，不能书写嵌套内容
属性值：常用px为单位
复合属性，类似font，可根据内边距的方向不同，划分为四个方向的单一属性。（数数值按照顺时针方向）
简写：
一般习惯将四个方向的单一属性进行合写成padding属性。padding属性值可以有1-4个值，值之间用空格分隔
- 四值法：按顺时针顺序分配给上、右、下、左
- 三值法：分配给上、左右 、下
- 三值法：分配给上下、左右
- 单值法：上下左右
- 边框border ——————————————
作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层
属性值线的线的宽度、线的形状、线的颜色
复合属性：e.g.: border: 6px solid #f00; 中间空格隔开
按照属性值类型划分为三个单一属性：
线宽 ： border-width 设置边框线宽度 属性值常用px，四个方向都有边框，类似于padding，也有四种写法
线型：border-style 设置边框线条形状 属性值：形状的单词，总体也是类似padding的综合属性写法
属性值的单词可能性：（前三种较常用）
| 属性值 | 说明 |
|---|---|
| none | 无边框 |
| solid | 实线 |
| dashed | 虚线，在大多数浏览器中呈现实线 |
| dotted | 定义点状边框，在大多数浏览器中呈现实现 |
| double | 双线，双线宽度等于border-width值 |
| groove | 3D凹槽边框，效果取决于border-color的值 |
| ridge | 3D垄状边框，效果取决于border-color的值 |
| inset | 3D内容凹陷边框，效果取决于border-color的值 |
| outset | 3D内容突出边框，效果取决于border-color的值 |
线的颜色：border-color 设置边框颜色，属性值：颜色名或颜色值，类似整体padding综合属性写法
根据 边框方向划分： 上边框border-top、右边框border-right、下边框border-bottom、左边框border-left。 每一个单一属性都必须与复合属性border一致，设置三个属性值设置线框、线形和颜色。
单一方向属性也可以根据属性值类型继续进行单一属性划分。写法： border-方向-类型 ，顺序不能错
- 外边距margin ——————————————
作用：设置盒子与盒子之间距离
特点：不能渲染背景
属性值：常用px
设置方式与内边距padding一模一样
- 清除默认样式 ——————————————
大部分标签都有一个默认加载样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式
盒模型中内外边距：大部分容器级标签都有默认边距，要么用并集选择器，要么使用通配符消除
<ul > <ol>两个默认列表的默认前缀：list-style：none；
<a>标签默认样式，顺带设置页面中常用a的公共样式：设置color和text-decoration
清除默认加粗效果：设置font-weight：none；
还可以给body标签设置整体文字样式，让大部分后代标签全部去继承
- height应用 ——————————————
根据不同需求，高度属性可以设置也可以不设置
如果设置了高度：盒子占有高度位置就确定死了，后面同级元素会紧挨着加载。如果不设置高度：会根据标签内部内容高度自动撑开
- 必须设置高度：如果内容过多，会溢出盒子区域。可以通过溢出属性overflow，进行溢出部分内容的显示效果设置
| 属性值 | 说明 |
|---|---|
| visible | 默认值可见的，溢出部分会显示 |
| hidden | 溢出部分直接隐藏，隐藏超过边框范围内容 |
| scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条 |
| auto | 自动，如果没有溢出就正常显示，如果有溢出，溢出的方向会自动出现滚动条 |
2 . 必须不设置高度：要求盒子高度必须自适应内部内容的高度。或者height属性是自动的
- 居中 ——————————————
文本水平居中：text-align属性
不论单行或多行都可以设置
- 单行文本垂直居中：行高line-height和盒子高度相同
- 多行文本垂直居中：让元素高度自适应，设置元素内部内容内边距上下值相同
- 元素垂直居中：一个元素内部嵌套的子元素，在父元素中居中。与多行文字类似，让父元素高度自适应，子元素自动撑开父元素高度，再给父元素设置相同上下边框
- 元素水平居中：父盒子宽度大于子盒子，给子盒子margin左右设置auto
auto只在水平方向有作用，垂直方向
- 父子盒模型 ——————————————
一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够，需要遵循一个设置尺寸的规律，所有子元素的宽度加起来不能大于父元素宽度。
父元素的width≥所有子元素的width+padding+border+margin、
如不满足条件，要么多余的子元素掉下来不能排在一排，要么溢出父元素
解决方法：盒模型自动内减
父子盒模型中，只有一个子元素，且子元素类似div必须独占一行。不给子元素设置width属性，子元素width会自动撑满父元素width区域。如同时设置子元素水平方向的padding和border、margin，不需要手动进行内减，资源数的width会自动收缩尺寸
- margin塌陷现象 ——————————————
在垂直方向如果有两个元素外边距有相遇的，浏览器中加载的真正外边距不是两个外边距之和，而是两个边距中值较大的，边距较小的塌陷到边距大内部
同级元素塌陷，上下边距相遇，真正的盒子间距是较大那个值。
父子元素塌陷：父子两个元素都设置了同方向的margin-top值，两个属性之间类有其他内容进行隔离，导致两个属性相遇发生塌陷
解决margin塌陷方法
- 同级之间如果两个元素垂直方向有间隙，只设置一个元素，不要进行拆分
- 父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的margin，而是父级的padding挤出来。
另：水平方向的Margin没有塌陷现象
- 标准文档流 ——————————————
指元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列。前面内容发生变化，后面内容位置也会发生变化。HTML就是一种标准文档流。
HTML标准文档流特点通过两种方式体现：微观现象和元素等级
微观现象：
- 空白折叠现象
- 文字类元素如果排在一行会出现高低不齐底边对齐效果。
- 自动换行：元素内一行内容写满元素的width时会自动换行
元素等级：
在标准流中，大部分元素是区分等级的。根据浏览器中加载样式，将元素划分为几种常见加载级别：块级元素、行内元素、行内快元等。
块级元素 ：大部分容器级包括p标签。<div>、<h1> <p>等
- 可正常设置宽高，在浏览器中正常加载
- 必须独占一行，不能和其他元素在一行显示
- 块级元素如果不设置宽度，会自动撑开父级元素width区域；高度不设置,会被内容自动撑开
行内元素 ：大部分的文本级标签，如<span>< a>
- 不能正常加载宽度、高度属性，其他盒模型属性虽然能设置，但是容易出现加载问题
- 行内元素可以和其他行内元素并排一行
- 行内元素不论是否设置高、宽度和高度都只能被内容自动撑开
行内块元素 ：<img><input>
- 可以设置宽度和高度
- 可以与其他的行内或行内块并排一排
- 如果不设置宽高，会以原始尺寸加载或者被内容自动撑开
- 依旧具有标准流的微观性质
- 显示模式 ——————————————
display
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式 属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点
| 属性值 | 说明 |
|---|---|
| block | 按照块级元素加载，具备块级特点 |
| inline | 按照行内模式加载，具备行内特点 |
| inline-block | 按照行内快模式加载，具备行内块特点 |
| none | 标签级内部内容直接隐藏，让出原有标准流位置 |
脱离标准流
方法：浮动、绝对定位、固定定位
- 浮动 ——————————————————
布局属性 属性名： float 、 属性值：left左浮动、right右浮动
作用：让元素脱离标准流，同一级的浮动元素可以并排在一排显示
性质：
1、浮动元素脱离标流，具备了行块二项性 。可以并排一行且没有空白折叠现象，如果不设置宽高，可以被元素内容自动撑开
2、依次贴边。 浮动方向设置不同，进行布局时，加载位置方向不同。子元素依次向父元素左或右贴边。不会出现钻空现象。如果一次贴边仍不满足，只会出现溢出现象
贴边性质应用：
- 同一个盒子中，可以有左浮动和右浮动的盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会出现依次贴边的各种情况
- 导航栏效果
- 常见电商或企业网站布局
3、没有margin塌陷
4、 元素浮动之后，脱离标准流，会将原来占有的标准流位置让给后面的一个同级元素。浮动的元素会压盖符合标准流元素，但会出现兼容问题，所以实际中不会使用这种属性制作压盖效果。如果没有特殊需求， 不允许一个父元素中有的子元素浮动有的不浮动 。同级元素一个浮动其他也要浮动。
5、字围现象 与前面压盖效果结构类似，同级元素中前面元素浮动后面元素不浮动，不浮动的内部元素中还有一些文字，浮动的盒子会压盖住不浮动盒子的一部分，但是文字内容不会被盖住，文字内容会让开浮动元素位置，围绕他们进行加载。可以利用字围现象制作一些特殊图文的混排布局效果
问题 ：
- 浮动的子元素撑不起父元素高度
- 父元素没有高度。会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能会影响到后面浮动元素的贴边
清除浮动方法：
- 给标准流父级设置合适高度；height。但父元素高度仍不是自适应
- clear 作用：清除标签元素自身受到的前面浮动元素的影响。属性值：left—清除在前面左浮动带来的影响。right—清除前面右浮动带来的影响。both—清楚前面所有浮动带来的影响。给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。但margin属性会有影响
- 隔墙法。在两个父盒子之间设置空div，标签带有clear：both属性可解决margin问题，但高度自适应仍未解决
- 内墙法 。在最后子元素后设置空div，标签带有clear：both。父元素高度自适应、margin全部可以解决。但如果页面中浮动元素很多，会造成html结构冗余
- 伪类方法利用css代码书写内墙。 伪类选择器 （ ：after )：通过选中的标签添加伪类，去选中标签的某个状态内部最后的位置。将伪类添加给一个选中父盒子的选择器后面，一般需要 给 清除浮动的 父盒子 设置一个 clearfix的类名 。
书写方法： :after前必须加普通选择器，后面连续书写伪类名称。
.clerafix:after{
content:“1”； → 设置内容为文字元素"1"的墙
display：block； → 变为块级元素
height：0； → 高度为0，不影响其他元素占位
clear：both； → 清除之后所有浮动影响
visibility：hidden； → 隐藏墙使其不显示但仍然占位
}
overflow 属性：元素高度设置后，overflow：hidden；效果使将超过高度部分直接隐藏；不设置高度，设置了overflow，将最高的高度作为父盒子高度加载
父盒子有了高度后，可以管理住内部所有元素浮动属性，不会延伸到后面标签中影响贴边
总结： 如果父盒子高度是固定的，建议使用height属性解决。如果父元素高度需要自适应，建议使用overflow属性解决浮动问题
- 背景属性 ——————————————————
background属性来设置背景，综合属性，可以拆分成多个单一属性
background-color 背景色 属性值：颜色名、颜色值
在盒子区域添加背景颜色修饰，在border及以内加载背景颜色
background-image 背景图片 属性值 url（图片路径）
给盒子添加图片修饰 默认加载到边框及以内。后期如果图片不重复加载repeat：no repeat，加载border以内开始
background-repeat 设置背景图是否在盒子边框中加载
| 属性值 | 作用 |
|---|---|
| repeat | 重复、默认属性值。表示会使用背景图片重复加载填满整个盒子背景区域 |
| no-repeat | 不重复，不论背景图是否大于盒子范围都只加载一次图片 |
| repeat-x | 水平重复，铺满第一行 |
| repeat-y | 垂直重复，铺满第一列 |
background-position 背景定位 属性值：三种写法：单词表示法、像素表示法、百分比表示法。属性值都有两个，值之间用空格分隔。第一个表示图片在水平方向位置，第二个表示垂直方向位置
设置不重复图片在背景区域的加载开始位置
属性值1、单词表示法：
水平方向：left、center、right
垂直方向：top、center、bottom
属性值2、像素表示法。区分正负，位移方向相反，超出部分不加载。
- 第一个属性值：像素是几，表背景图片左上角针对border以内左上顶点水平方向位移距离
- 第二个属性值：像素是几，表背景图片左上角针对border以内左上顶点垂直方向位移距离
可以利用属性值为负，制作在小盒子中显示大背景图的一部分。需要用FW软件量取尺寸，读取数据。
step1、在设计图中，使用切片工具制作一个想要显示区域大小的切片，让切片坐上的顶点位于想要加载的背景部分
step2、读取属性栏切片数据，宽，高为背景图的宽、高。x、y前加负号赋值给背景定位属性。
3. 第三个属性值 ： 百分比。100%等价于盒子以内的border以内的背景区域宽度减去图片宽度
background-attachment 背景附着
作用：设置背景图片是否要随着页面或盒子的滚动而滚动
属性值：
scroll：滚动，背景图片与盒子相对位置不变，随着页面的滚动而滚走
fixed：固定的。背景图定位的参考顶点从盒子border坐上顶点变为浏览器窗口坐上顶点，页面滚动时背景图固定在浏览器窗口某个位置，不会随页面滚动而滚走。
综合写法：
background属性值可以有1-5个值，值之间用空格分隔，定位属性值两个算作一个属性值不能被分开不能颠倒顺序。五个属性值之间可以互换位置。
-------------注意-------------------：
- 如果属性值没有完全设置，其他属性值按照默认加载
- 如果想层叠，单一属性层叠综合属性 （background-color 替换background综合属性中的color）
应用：
1、 替换插入图。<h1>中既有文字内容提供SEO搜索引擎优化又有图片内容。
文字隐藏方法a.将字号设置为0.但IE7一下版本会有兼容问题 b.可以给a标签一个text-indent(缩进)属性，属性值为负很大的值，直接再设置隐藏溢出属性over-flow：hidden；
2、 padding区域背景图
在一个盒子背景图部分，而且有文字内容，文字会让开背景图区域惊醒加载。使用padding挤出区域。四个方向padding都可以设置
3、 精灵图技术
网页中应用很多小的背景图像作为修饰，为了减少服务器发送接收请求速度，提高页面加载技术，出现了CSS精灵图技术。是一种处理网络背景图像的方式。将一个页面中涉及到的所有零星背景图像都集中到一张大图中，然后将大图应用与网页。
技术依据：1背景图为大的png图片。2定位技术将每个小图片加载到对应位置
------注意事项：----------- 可使用一些精灵图在线制作
- 精灵图上放的都是小的装饰性值的背景图片
- 宽度取决于最宽那个背景图片的标签宽度
- 精灵图可以横向摆放也可以纵向摆放，但每个图片之间必须留够足够空白，保证背景图片加载到一个标签内部，不能出现多余内容
- 精灵图底端尽量留些空白。
应用：参考前面背景定位中定位值为负数情况
背景半透明 rgba
在rgb基础上增加不透明度设置，取值0-1，0表完全透明，1便是完全不透明，0.5半透明
半透明是指盒子背景半透明，盒子里面的内容不受影响
背景缩放
background-size，类似设置<img>尺寸设置背景图片尺寸
| 属性值 | 说明 |
|---|---|
| px值 | 1-2个像素值，只设置1个值垂直方向等比例拉伸，设置两个值则按照设置值加xi载 |
| 百分比 | 同像素设置方法，参考盒子的宽高属性 |
| cover | 自动调整缩放比例，把背景图扩展至足够大，以使背景图像完全覆盖背景区域。溢出部分自动隐藏 |
| contain | 自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域 |
多背景
background-image属性值书写时，以逗号分隔多个背景的url路径，先写的压盖在后写的之上
- 定位 ————————————————
position 设置等位的元素，需要根据某个参考元素发生位移的偏移
属性值 relative 相对定位 absolute 绝对定位 fixed 固定定位
偏移量属性：属性：名水平left 、right 垂直方向：top、bottom 属性值px或%
相对定位 ：
position-relative 参考标签加载的原始位置，必须搭配偏移量属性才能进行移动
相对定位元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置
元素显示效果上： 原位留坑，形影分离
注意：-------------
- 偏移量属性区分正负，正数表与偏移属性相反，负数表相同
- 同一个方向，不能设置两个偏移量属性，建议从水平和垂直各挑一个组合
- 参考元素是自身，left正值等价于right负值，top正值等价于bottom负值，可以只选择left、top
实际应用：
- 相对稳定，不会随意让出位置，可以将相对定位元素作为后期绝对定位的参考元素，子绝父相
- 可以在占有原位置的情况下，对加载效果区域进行调整，进行微调设置。或者对文字进行微调
绝对定位：
absolute 参考的是最近的有定位的祖先元素，如果祖先元素都没有定位，参考<body>，必须搭配偏移量属性才会发生位移
性质：绝对定位耳朵元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意 --------------
- 参考元素不固定，不同参考元素以及不同偏移量组合会导致绝对定位元素的参考点不同，具体位移效果不同。
- 由于参考点不同left正值不再等于right负值。
a、以参考元素为<body>为例 ，如果有bottom参与，参考点为body首屏的左下或右下。对比点是所有盒模型最外层的左下角或右下角。实际工作中较少用<body>作为参考元素
b、如果祖先级元素中有定位的元素 ，就不会去参考<body>。参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先。会忽视参考元素padding区域。
根据绝对定位的参考元素的定位类型，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多数使用子绝父相。
固定定位
属性值： fixed 参考元素：浏览器窗口 参考点：浏览器窗口的四个顶点。跟偏移量组合方向相关。由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。
性质：脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
定位应用
- 压盖 效果：所有定位类型都可以实现压盖效果。由于绝对定位的元素脱标，不占用标准流位置，压盖效果更彻底。实际工作中更常使用绝对定位
- 居中 设置：定位的元素，1、在居中方向使用一个偏移量， position：absolute；left：50%；（百分比属性值参考的是参考元素border以内宽度高度）。导致图片左定点移动到参考元素的中心位置。2、给绝对定位的子盒子设置一个 同方向 的margin-left，属性值为负的自身宽度的一半。不论子盒子父盒子谁大。
扩展应用:
- 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中方法制作。
- 浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。
压盖顺序
实际使用中可能会出现多个定位的元素加载到同一个位置情况，这时候压盖顺序可控制
默认压盖顺序：定位元素不分类型，压盖标准流或浮动元素。如果都是定位元素，在HTML中书写顺序压盖，后写的压盖先写的。所以注意顺序书写。
自定义压盖顺序：
- 设置一个z-index属性，属性值数字。属性值大的压盖属性值小的。
- 如果属性值相同，比较HTMl数学顺序,后写的压盖先写的
- 只能设置给定位的元素才会生效,如果给没有定位的元素设置,不会生效.
- 父子合模兴中，父盒子子盒子都进行了定位，与其他父子级有压盖的部分。
父级盒子：如果不设置z-index属性，后写的压盖先写的，如果设置了z-index属性，值大的压盖值小的
子级盒子：如果父级没有设置z-index，自己的z-index大的压盖小的；如果父级设置了z-index，无论子级多少，都是父级的值大的子级压盖父级值小的，俗称从父效应