CSS基本语法规则

CSS语法规则

一、基础认知

1.1 CSS初识

CSS写在style标签中，style标签一般写在head标签里面，title标签下面 ctrl+/ CSS注释快捷键选择器 {css属性}

2.1 CSS引入方式

内嵌式：CSS写在style标签中提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中作用：当前页面外联式：CSS写在一个单独的.css文件中作用：多个页面提示：需要通过link标签在网页中引入行内式：CSS写在标签的style属性中写法：style="属性：属性值" 作用：当前标签提示：基础不推荐使用，之后会配合js使用

<div style="color:red;"></div>

font-size:字号大小后边加px

二、基础选择器

1.标签选择器

结构：标签名{css属性名：属性值；} 作用：通过标签名，找到页面中所有这类标签，设置样式注意点： 1.标签选择器选择的是一类标签，而不是单独某一个 2.标签选择器无论嵌套关系又多深，都能找到对应的标签

2.类选择器

结构：.类名{css属性名：属性值；} 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式注意点： 1.所有标签上带有class属性，class属性值成为类名（类似于名字） 2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 3.一个标签可以同时有多个类名，类名之间以空格隔开 4.类名可以重复，一个类选择器可以同时选中多个标签

选择器

结构：#属性值{css属性名：属性值；} 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式注意点： 1.所有标签上都有id属性值属性值类似于身份证号码，在一个页面中是唯一的，不可重复的 3.一个标签上只能有一个id属性值 4.一个id选择器只能选中一个标签

4.通配符选择器

结构：*{css属性名：属性值；} 作用：找到页面中所有的标签，设置样式注意点： 1.开发中使用极少，只会在极特殊情况下才会用到 2.在基础小页面中可能会用于去除标签默认的margin和padding

三、字体和文本样式

1.字体

1.1字体大小

属性名：font-size 取值：数字+px 注意点： 1.谷歌浏览器默认文字大小是16px 2.单位需要设置，否则无效

1.2字体粗细

属性名：font-weight 取值： 1.关键字：正常：normal 加粗：bold 2.纯数字：100-900的整百数正常：400 加粗：700 注意点： 1.不是所有字体都提供了九种粗细，因此部分取值页面中无变化 2.实际开发中以：正常、加粗两种取值使用最多

1.3字体样式（是否倾斜）

属性名：font-style 取值： 1.正常（默认值）：normal 2.倾斜：italic

1.4常见字体系列（了解）

无衬线字体（sans-serif） 1.特点：文字笔画粗细均匀，并且首尾无装饰 2.场景：网页中大多采用无衬线字体 3.常见该系列字体：黑体、Arial 衬线字体（serif） 1.特点：文字笔画粗细不均，并且首尾有笔锋装饰 2.场景：报刊书籍中应用广泛 3.常见该系列字体：宋体、times new roman 等宽字体（monospace） 1.特点：每个字母或文字的宽度相等 2.场景：一般用于程序代码编写，有利于代码的阅读和编写 3.常见该系列字体：consolas、firacode

1.5字体系列

属性名：font-family 常见取值：具体字体1，具体字体2，具体字体3，具体字体4....字体系列具体字体：黑体，，宋体... 字体系列：serif，monospace等渲染规则： 1.从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体 2.如果都不支持，此时会根据操作系统，显示最后系列的默认字体注意点： 1.如果字体名称中存在多个单词，推荐使用引号包裹 2.最后一项字体系列不需要引号包裹 3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

1.6样式的层叠问题

问题：如果一个标签设置了相同的样式，此时浏览器怎么渲染结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效层叠性：后面的覆盖前面的 TIP：： css层叠样式表所谓的层叠就是叠加的意思，表示样式可以一层一层的层叠覆盖

1.7字体font相关属性的连写

属性名：font(复合属性) 取值： font：style weight size family 省略要求：只能省略前两个，如果省略了相当于设置了默认注意点：如果需要同时设置单独和连写形式 1.要么把单独的样式写在连写的下面 2.要么把单独的样式写在连写的里面一个属性冒号后边写多个值的写法叫做复合属性

2.文本样式

2.1 文本缩进

属性名：text-indent 浏览器默认字号：16px 取值：数字+px 数字+em(推荐：1em = 当前标签的font-size的大小)(em:一个字的大小)

2.2文本水平对齐方式

属性名：text-align 取值：属性值：left center right 效果：左对齐居中对齐右对齐注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

2.3 水平居中方法总结 text-align:center

text-align:center 能让那些元素水平居中？ 1.文本标签、a标签标签、img标签注意点：如果需要让以上元素水平居中，text-align:center 需要给以上元素的父元素设置

2.4文本修饰

属性名：text-decoration 取值：属性值：underline line-through overline none 效果：下划线（常用）删除线（不常用）上划线（几乎不用）无装饰线（常用）注意点：开发中会使用text-decoration：none;清楚a标签默认的下划线

2.5行高

作用：控制一行的上下行间距属性名：line-height 取值：数字+px 倍数（当前标签font-size的倍数）应用： 1.让单行文本垂直居中可以设置line-height：文字父元素高度 2.网页精准布局时，会设置line-height：1 可以取消上下间距行高与font连写的注意点：如果同时设置了行高和font连写，注意覆盖问题 font：style weight size/line-height family 拓展：标签水平居中方法总结 margin:0 auto 通过margin:0 auto可以实现div、p、h(大盒子)水平居中注意点： 1.如果需要让div、p、h(大盒子)水平居中，直接给当前元素本身设置即可 : 0 auto一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

在工作中，div用来网页布局，一个页面中可能用无数次，原则：如果使用div,尽量使用类名控制样式

选择器进阶

一、复合选择器

1.1后代选择器：空格

作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法：选择器1 选择器2{css} 结果：在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式注意点：后代包括：儿子、孙子、重孙子... 后代选择器中，选择器与选择器之间通过空格隔开

1.2子代选择器：>

作用：根据html标签的嵌套关系，选择父元素子代中满足条件的元素选择器语法：选择器1>选择器2{css} 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式注意点：子代只包括：儿子子代选择器中，选择器与选择器之间通过>隔开

1.3并集选择器：，

作用：同时选择多组标签，设置相同的样式选择器语法：选择器1，选择器2{css} 结果：找到选择器1和选择器2选中的标签，设置样式注意点：并集选择器中每组选择器之间通过，分割并集选择器中的每组选择器可以是基础选择器或者复合选择器并集选择器中的每组选择器通常一行写一个，提高代码的可读性

1.4交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签选择器语法：选择器1选择器2{css} 结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式注意点：交集选择器中的选择器之间是紧挨着的，没有东西分隔交集选择器中如果有标签选择器，标签选择器必须写在最前面

1.5hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式选择器语法：选择器：hover{css} 注意点：伪类选择器选中的元素的某种状态任何标签都可以添加伪类，任何一个标签都可以鼠标悬停

1.6emmet语法

作用：通过简写语法，快速生成代码语法：类似于刚刚学习的选择器的写法

记忆	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id选择器	#one	<div ></div>
交集选择器	#one	<p class="red" ></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li{我是li的内容}	<ul><li>我是li的内容</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>

ul有3个li,li文字1，2，3 只有数字是$，其他的是啥就写啥写法：ul>li{$}*3 使用多行光标编辑：alt+鼠标点击快速移动光标位置到两端：ctrl + shift + 方向左右键代码向上 / 下移动：ctrl + shift + 方向上下键

二、背景相关属性

2.1背景颜色

属性名：background-color(简称：bgc) 属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制.... 注意点：背景颜色默认值是透明：rgba(0,0,0,0)、transparent 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.2背景图片

属性名：background-image（简称：bgi）属性值：background-image:url(‘图片的路径’)；注意点：背景图片url中可以省略引号背景图片默认是在水平和垂直方向平铺的背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

2.3背景平铺

属性名：background-repeat（简称：bgr）属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

2.4背景平铺

属性名：background-position（bgp）属性值：background-position：水平方向位置垂直方向位置；属性值： 1.方位名词（最多只能表示9个位置）水平方向：left、center、right 垂直方向：top、center、bottom 2.数字+px(坐标) 坐标系：原点（0 0）盒子的左上角 x轴水平向右 y轴垂直向下操作：将图片左上角与坐标点重合即可水平向下和垂直向下是正数注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

2.5背景相关属性的连写方式

属性名：background（bg）属性值：单个属性值的合写，取值之间以空格隔开书写顺序：推荐：background：color image repeat position 背景图位置如果是英文单词可以颠倒顺序，如果是数字型，则不可以颠倒省略问题：可以按照需求省略特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url() 注意点：如果需要设置单独的样式和连写要么把单独的样式写在连写的下面要么把单独的样式写在连写的里面

2.6（拓展）img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果？方法一：直接写上img标签即可 img标签是一个标签，不设置宽高默认会以原尺寸显示方法二：div标签+背景图片需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

三、元素显示模式

3.1块级元素

显示特点：独占一行（一行只能显示一个）宽度默认是父级元素的宽度，高度默认由内容撑开可以设置宽高代表标签： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer....

3.2行内元素

显示特点：一行可以显示多个宽高默认由内容撑开不可以设置宽高代表标签： a、span、b、u、i、s、strong、ins、em、del......

3.3行内块元素

显示特点：一行可以显示多个可以设置宽高代表标签： input、textarea、button、select.... 特殊情况：img标签有行内块元素特点，但是谷歌调试工具中显示结果是inline

3.4元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求语法：

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:line	转换成行内元素	极少

3.5拓展：HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等.... 但是：p标签中不要嵌套div、p、h等块级元素 a标签内部可以嵌套任意元素但是：a标签不能嵌套a标签

四、CSS特性

4.1继承性

特性：子元素有默认继承父元素样式的特点（子承父业）可以继承的常见属性（文字控制属性都可以继承） color fontstyle、fontweight、fontsize、fontfarmily textindent、textalign lineheight ...... 注意点：可以通过调试工具判断样式是否可以继承（拓展）继承失效的特殊情况：如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式 a标签的color会继承失效 h系列标签的fontsize会继承失效

4.2层叠性：

特性：给同一标签设置不同的样式，此时样式会层叠叠加，会共同作用再标签上给同一标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

4.3优先级：

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important 注意点：！important写在属性值的后面，分号的前面！！important不能提升继承的优先级，只要是继承优先级最低！实际开发中不建议使用！important

4.4优先级——权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效权重叠加计算公式：（每一级之间不存在进位）复合选择器中：第一级:行内样式的个数第二级：id选择器的个数第三级：标签选择器的个数比较规则： 1.先比较第一级数字，如果比较出来了，之后的统统不看 2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看 3. ..... 4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算！）注意点：！important如果不是继承，则权重最高，天下第一！如果都是继承，就看继承里边谁高，继承哪个父级，哪个父级高，哪个选择器生效

盒子模型

CSS中每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成

1.内容的宽度和高度

作用：利用width和height属性默认设置是盒子内容区域的大小属性：width/height 常见取值：数字+px

2.边框（border）连写形式

属性名：border 属性值：单个取值的连写，取值之间以空格隔开如：border:10px solider red; 快捷键：bd+tab solid：实线 dashed：虚线 dotted：点线

3.边框（border）单方向设置

场景：只给盒子的某个方向单独设置边框属性名:border-方位名词属性值：连写的取值

4.内边距(padding)

padding属性可以当做复合属性使用，表示单独设置某个方向的内边距 padding最多可以取四个值四值：上右下左能够撑大盒子的有：border、padding

5.盒子模型（自动内减）

操作：给盒子设置属性box-sizing：border-box；即可优点：浏览器会自动计算多余大小，自动在内容中减去

6.外边距（）margin

清除默认内外边距场景：浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除默认的margin和padding，后续自己设置比如:body标签默认有margin：8px 比如：p标签默认有上下的margin 比如：ul标签默认由上下的margin和padding-left 解决方法：*{margin：0；padding：0；} 版心：网页的有效内容，版心一般是居中的

7.外边距折叠现象-合并现象

场景：垂直布局的块级元素，上下的margin会合并结果：最终两者距离为margin的最大值解决办法：避免就好只给其中一个盒子设置margin即可

8.塌陷现象

场景：互相嵌套的块级元素，子元素得margin-top会作用在父级元素上结果：导致父元素一起往下移动解决办法：给父元素设置border-top或者padding-top（分割父子元素的margin-top）给父元素设置overflow：hidden 转换成行内块元素设置浮动

9.行内元素内外边距的问题

如果想通过margin或padding改变行内标签的位置，无法生效行内标签的margin-top和bottom不生效行内标签的padding-top或bottom不生效解决方法：加行高line-height

CSS浮动

1.结构伪类选择器基本用法

目标：能够使用结构伪类选择器在HTML中定位元素作用与优势：作用：根据元素在HTML中的结构关系查找元素优势：减少对于HTML中类的依赖，有利于保持代码整洁场景：常用于查找某父级选择器中的子元素

2.选择器:

选择器	说明
E：first-child{}	匹配父元素中第一个子元素，并且是E元素
E：last-child{}	匹配父元素中最后一个子元素，并且是E元素
E：nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E：ntht-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

3.结构伪类公式

n的注意点： n为：0、1、2、3、4、5、6、..... 通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

4.伪元素

目标：能够使用伪元素在网页中创建内容伪元素：一般页面中的非主体内容可以使用伪元素区别：元素：HTML设置的标签伪元素：由CSS模拟出的标签效果种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：
    必须设置centent属性才能生效
    伪元素默认是行内元素
伪元素通过css创建标签，装饰栏的不重要的小图
找父级，在这个父级里面创建子级标签

5.标准流

目标：能够认识标准流的默认排布方式及其特点标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素常见标准流排版规则：块级元素：从上往下，垂直布局，独占一行行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

6.浮动

目标：能够认识使用浮动的作用，了解浮动的特点浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离

6.1浮动的作用

早期作用：图文环绕现在的作用：网页布局（块标签在一行环绕）float属性浮动的特点：浮动元素会脱离标准流（简称：脱标），在标准流中不占位置浮动元素比标准流高半个级别，可以覆盖标准流中的元素浮动找浮动，下一个浮动元素会在上一个浮动元素后边左右浮动浮动的标签是顶对齐的浮动元素有特殊的显示效果，一行可以显示多个，且可以设置宽高浮动：在一行排列，宽高生效，浮动后的标签具备行内块特点注意点：浮动的元素不能通过text-align：center或者margin：0auto CSS书写顺序： 1.浮动或者是display 2.盒子模型相关的属性：margin border padding 宽度高度背景色 3.文字样式

6.2 清除浮动：

含义：清除浮动带来的影响影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素例如：父子级标签，子级浮动，父级没有高度，后面的标准流盒子回受影响，会显示到上面的位置原因：子元素浮动后脱标→不占位置目的：需要父元素有高度，从而不影响其他网页元素的布局方法： 1.直接设置父元素高度特点：优点：简单粗暴，方便缺点：有些布局中不能固定父元素高度，如：新闻列表、京东推荐模块

6.3.额外标签方法

操作：在父元素内容的最后添加一个块级元素给添加的块级元素设置clear：both 特点：缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

6.4单伪元素清除法

操作：用伪元素替代了额外标签 1.基本写法 .clearfix::after{ content:''; display:block; clear:both; } 2.补充写法 .clearfix::after{ content:''; display:block; clear:both; #补充代码，在网页中看不到伪元素 height：0; visibility:hidden; } 特点：优点：项目中使用，直接给标签加类即可清除浮动

6.5双伪元素清除法

操作： .clearfix::before, .clearfix::after{ content:''; display:table; } .clearfix::after{ clear:both; } 特点：优点：项目中使用，直接给标签加类即可清除浮动 #这里出现.clearfix::before的作用是解决外边距塌陷问题外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置 5.给父元素设置overflow：hidden 操作：直接给父元素设置overflow：hidden 特点：方便引入CSS的代码格式 <link rel="stylesheet" href="css文件的路径">

定位

1.网页常见布局方式

1.1标准流块级元素独占一行→垂直布局行内元素/行内块元素一行显示多个→水平布局 1.2浮动可以让原本垂直布局的块级元素变成水平布局 1.3定位可以让元素*的摆放在网页的任意位置一般用于盒子之间的层叠情况针对于盒子与盒子之间的层叠问题，推荐使用定位完成

2.使用定位的步骤

2.1设置定位方式属性名：position 常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2.2设置偏移值偏移值设置分为两个方向，水平和垂直方向各选一个使用即可选取的原则一般就是就近原则（离哪边近用哪个）

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

3.相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动代码：position：relative；特点：需要配合方位属性实现移动相对于自己原来位置进行移动占有原来的位置，没有脱标仍然具有标签原有的显示模式特点应用场景：配合绝对定位组CP（子绝父组）用于小范围的移动如果left和right都有，以left为准。如果top和bottom都有，以top为准

4.绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动代码：positiob：absolute；特点：需要配合方位属性实现移动默认相对于浏览器可视区域进行移动在页面中不占位置→已经脱标改变标签的显示模式特点：具体行内块特点（在一行共存，宽高生效）应用场景：配合绝对定位组CP（子绝父相）子级绝对定位，父级相对定位先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位有父级，但父级没有定位，以浏览器窗口为参照物进行定位绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位绝对定位的盒子不能使用左右margin auto居中解决办法：50%，整个盒子移动到浏览器中间偏右位置把盒子向左侧移动：自己宽度的一半 2.位移：自己宽度高度的一半 tranform：translate（-50%，-50%）

底部半透明遮罩效果定位的元素会脱标（如：绝对路径），脱标后的元素宽高默认由内容撑开绝对定位的盒子显示模式具备行内块特点：加宽度高度是生效的，如果没有宽度也没有内容，那么盒子的宽度尺寸就是0

5.固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动代码：position：fixed；特点：需要配合方位属性实现移动相对于浏览器可视化区域进行移动在页面中不占位置→已经脱标改变位置参考浏览器窗口具备行内块特点

应用场景：
    让盒子固定在屏幕中的某个位置

元素的层级关系不同布局方式元素的层级关系：标准流<浮动<定位不同定位之间的层级关系：相对、绝对、固定默认层级相同此时html中写在下面的元素层级更高，会覆盖上面的元素默认情况下，定位的盒子，后来者居上在定位中让谁在上边显示用z-index：整数；取值越大，显示顺序越靠上，z-index默认值是0 装饰认识基线基线：浏览器文字类型元素排版中存在用于对齐的技术（baseline）垂直对齐方式属性名：vertical-align 属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

光标类型场景：设置鼠标光标在元素上时显示的样式属性名：cursor 常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

6.边框圆角

场景：让盒子四个角变的圆润，增加页面细节，提升用户体验属性名：border-radius 常见取值：数字+px、百分比赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角画一个正圆：盒子必须是正方形设置边框圆角为盒子宽高的一半→border-radius：50% 胶囊按钮：盒子要求是长方形设置→border-radius：盒子高度的一半溢出部分显示效果溢出部分：指的是盒子内容部分所超出盒子范围的区域场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条等属性名：overflow 常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏场景：让某元素本身在屏幕中不可见，如：鼠标：hover之后元素隐藏常见属性：占位隐藏效果：visibility：hidden 不占位隐藏：display：none 元素整体透明度场景：让某元素整体（包括内容）一起变透明属性名：opacity 属性值：0~1之间的数字 1表示完全不透明 0表示完全透明注意点： opacity会让元素整体透明，包括里面的内容，如：文字、子元素等背景图位置：background-position：水平方向位置px 垂直方向位置px 背景图大小作用：设置背景图大小语法：background-size：宽度高度；取值：

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图等比例缩放，直到刚好填满整个盒子没有空白

盒子阴影作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节属性名：box-shadow 取值：

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影颜色
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

过渡作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验属性名：transition 常见取值：

参数	取值
过渡的属性	all：所有能过渡的属性都过渡，具体属性名如：width：只有width过渡
过渡的时长	数字+s（秒）

注意点：
    1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果
    属性给需要过渡的元素本身加
    属性设置在不同状态中，效果不同的
        给默认状态设置，鼠标移入移出都有过渡效果
        给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果