CSS笔记

一、基础认知

CSS：层叠样式表

CSS的作用：给页面中的HTML标签设置样式

1.1CSS语法规则

写在哪里？

CSS写在style标签中，style标签一般写在head标签里面，title标签下面

怎么写？

CSS初体验

常见属性：color（文字颜色）font-size（字体大小）background-color（背景颜色）width（宽度）height（高度）

注意点：1、CSS标点符号都是英文状态下的2、每一个样式键值对写完之后，最后需要写分号

1.2CSS引入方式

1.2.1内嵌式：

CSS写在style标签中。提示：style标签虽然可以写在页面任意位置，但通常约定写在head标签中

1.2.2外联式：

CSS写在一个单独的.css文件中。提示：需要通过link标签在网页中引入

1.2.3行内式：

CSS写在标签的style属性中。提示：基础班不推荐使用，之后会配合js使用

二、基础选择器

选择器的作用：

选择页面中对应的标签，方便后续设置样式

2.1标签选择器

结构：标签名（CSS属性名：属性值；）

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：1、标签选择器选择的是一类标签，而不是单独某一个2、标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2类选择器

结构：.类名{css属性名：属性值；}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：1、所有标签上都要class属性，class属性的属性值称为类名 2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 3、一个标签可以同时有多个类名，类名之间以空格隔开 4、类名可以重复，一个类选择器可以同时选中多个标签

2.3id选择器

结构：#id属性值{css属性名：属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：1、所有标签上都有id属性 2、id属性值类似于身份证号码，在一页面中是唯一的，不可重复的！ 3、一个标签上只能与一个id属性值 4、一个id选择器只能选中一个标签

2.4补充：类与id的区别

2.4.1class类名与id属性值的区别

1、class类名相当于姓名，可以重复，一个标签可以同时有多个class类名 2、id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

2.4.2类选择器与id选择器的区别

（1）、类选择器以.开头

（2）、id选择器以#开头

2.4.3实际开发情况

1、类选择器用的最多

2、id一般配合js使用，除非特殊情况，否则不要使用id设置样式

3、实际开发中会遇到冗余代码的抽取（可将一些公共的代码抽取到一个公共的类中去）

2.5.通配符选择器

结构：*{css属性名：属性值；}

作用：找到页面中所有的标签，设置样式

注意点：1、开发中使用极少，只会在及特殊情况下才会用到 2、在基础班小页面中可能会用于去除标签默认的margin和padding

三、字体和文本样式

3.1字体样式

3.1.1、字体大小：font-size

属性名：font-size

取值：数字+px

注意点：谷歌浏览器默认文字大小是16px、单位需要设置，否则无效

3.1.2、字体粗细：font-weight

属性名：font-weight

取值：关键字：正常（normal）加粗（bold）、纯数字：正常（400）加粗（700）

注意点：1、不是所有字体都提供了九种粗细，因此部分取值页面中无变化 2、实际开发中以：正常，加粗两种取值使用最多

3.1.3、字体样式：font-style

属性名：font-style

取值：正常（normal）倾斜（italic）

3.1.4、字体类型：font-family

属性名：font-family

常见取值：具体字体1、具体字体2、具体字体3、......字体系列

具体字体：微软雅黑、黑体、宋体.......

字体系列：san-serif、serif、monospace.......

渲染规则：

1、从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体

2、如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：1、如果字体名称中存在多个单词，推荐使用引号包裹 2、最后一项字体系列不需要引号包裹 3、网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

3.1.5、字体类型：font属性连写

属性名：font

取值：font：style、weight、size、family

顺序要求：swsf

省略要求：只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式，要么把单独的样式写在连写下面，要么把单独的样式写在连写的里面

3.2文本样式

样式的层叠问题

问题：

给同一个标签设置了相同的样式，此时浏览器会如何渲染

结果：

如果给同一个标签设置了相同的属性，此时央视会层叠（覆盖），写在最下面的会生效

TIP：

CSS层叠样式表

3.2.1、文本缩进

属性名：text-indent

取值：数字+px 、 数字+em（推荐：1em=当前标签的font-size的大小）

3.2.2文本水平对齐方式

属性名：text-align

取值：left（左对齐）、center（居中对齐）、right（右对齐）

注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

3.2.3文本修饰

属性名：text-decoration

取值（属性值）：underline（下划线）、lin-through（删除线）overline（上划线）、none（无装饰线）

注意点：开发中会使用text-decoration：none；清除a标签默认的下划线

3.3水平居中方法总结

3.3.1text-align：center

能让那些元素水平居中？

1、文本 2、span标签、a标签 3、input标签，img标签

注意点：1、如果需要让以上元素水平居中，text-align：center需要给以上元素的父元素设置

3.3.2margin:0 auto

如果需要让div、p、h（大盒子）水平居中？可以通过margin：0 auto；实现

注意点：1、如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可 2、margin:0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

line-height行高

行高

作用：控制行间距

属性名：line-height

取值:数字+px、倍数（当前标签font-size的倍数）

应用：1、让单行文本垂直居中可以设置line-height：文字父元素高度

2、网页精准布局时，会设置line-height：1 可以取消上下间距

行高与font连写的注意点：

1、如果同时设置了行高和font连写，注意覆盖问题。 2、font：style 、weight size/line-height family

四、Chrome调试工具

4.1打开方式

右击——>检查

4.2选择元素

两种常见方法

4.3控制样式

（1）修改属性值（2）添加属性（3）控制样式生效

4.4特殊情况

（1）出现删除线（2）出现小三角形

CSS基础

一、 选择器进阶

1.1复合选择器

1.1.1后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2 {css}

结果：在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式

注意点：1、后代包括：儿子，孙子，重孙子... 2、后代选择器中，选择器与选择器之间通过空格隔开

1.1.2子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1>选择器2 {css}

结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

注意点：1、子代只包括：儿子 2、子代选择器中，选择器与选择器之间通过>隔开

1.2并集选择器

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1 ， 选择器2{css}

结果：找到选择器1和选择器2选中的标签，设置样式

注意点：1、并集选择器中的每组选择器之间通过 ，分隔 2、并集选择器中的每组选择器可以是基础选择器或者复合选择器 3、并集选择器中的每组选择器通常一行写一个，提高代码的可读性

1.3交集选择器

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2{css}

结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：1、交集选择器中的选择器之间是紧挨着的，没有东西分隔 2、交集选择器中如果没有标签选择器，标签选择器必须写在最前面

1.4Emmet语法

作用：通过简写语法，快速生成代码

语法：

1.5hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器：hover{css}

注意点：1、伪类选择器中的元素的某种状态

 

二、背景相关属性

2.1背景颜色

属性名：background-color（bgc）

属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制......

注意点：1、背景颜色默认值是透明：rgba（0，0，0）、transparent

2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.2背景图片

属性名：background-image（bgi）

属性值：background-image：url（“图片的路径”）

注意点：1、背景图片中url中可以省略引号 2、背景图片默认是在水平和垂直方向平铺的 3、背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

2.3背景平铺

属性名：background-repeat（bgr）

属性值：repeat（默认值，水平和垂直方向都平铺）、no-repeat（不平铺）、repeat-x（沿着水平方向（x轴）平铺）、repeat-y（沿着垂直方向（y轴）平铺）

2.4背景位置

属性名：background-position（bgp）

属性值：background-position：水平方向位置（空格）垂直方向位置；

 

注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

2.5背景相关属性连写

属性名：background（bg）

属性值：单个属性值的合写，取值之间可以空格隔开

书写顺序：推荐：background：color、image、repeat、position

省略问题：可以按照需求省略、特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）

注意点：如果需要设置单独的样式和连写：1.要么把单独的样式写在连写的下面 2.要么把单独的样式写在连写的里面

拓展：

img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果？

方法一：直接写上img标签即可（img标签是一个标签，不设置宽高默认会以原尺寸显示）

方法二：div标签+背景图片（需要设置div的高度，因为背景图片只是装饰的CSS样式，不能撑开div标签）

三、元素显示模式

3.1块级元素

属性：display：block

显示特点：1、独占一行 2、宽度默认是父元素的宽度，高度默认由内容撑开 3、可以设置宽高

代表标签：div、p、ul、li、dl、dt、dd、form、header、nav、footer

3.2行内元素

属性：display：inline

显示特点：1、一行可以显示多个 2、宽度和高度默认由内容撑开 3、不可以设置宽高

代表标签：a、span、b、u、i、s、strong、ins、em、del

3.3行内块元素

属性：display：inline-block

显示特点：1、一行可以显示多个 2、可以设置宽高

代表标签：input、textarea、button、select

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inli

3.4元素显示模式转换

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

语法：

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

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

2、a标签内部可以嵌套任意元素

3.6拓展2：居中方法总结

四、CSS三大特性

4.1继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性：

1.color

2.font-style、font-weight、font-size、font-family

3.text-indent、text-align

4.line-height

注意点：可以通过调试工具判断样式是否可以继承

继承失效的特殊情况：

1、a标签的color会继承失效

2、h系列标签的font-size会继承失效

3、div的高度不能继承，但是宽度有类似于继承的效果

4.2层叠性

特性：

1、给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用再标签上

2、给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效

注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

4.3优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!inportant

注意点：

1.!important写在属性值的后面，分号的前面！

2.!important不能提升继承优先级，只要是继承优先级最低

3.实际开发中不建议使用!important

权重叠加计算：

拓展：权重叠加计算案例

权重计算题解题步骤：

1.先判断选择器是否能直接选中标签，如果不能直接选中——>是继承，优先级最低——>直接pass

2.通过权重计算公式，判断谁权重最高

注意点：实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己为难自己

4.4拓展：调试工具查错流程

 

五、PxCook的基本使用

PxCook的基本使用

5.1打开设计图

（1）打开软件（2）拖拽入设计图（3）新建项目

5.2常用快捷键

（1）放大设计图ctrl+ +（2）缩小设计图ctrl+ -（3）移动设计图：空格按住不放，鼠标拖动

5.3从psd文件中直接获取数据

（1）切换到开发界面，直接点击获取数据

5.4常用工具

（1）量尺寸（2）吸颜色

六、盒子模型

6.1盒子模型的介绍

盒子的概念：1.页面中的每一个标签，都可看做是一个盒子，通过盒子的视角更方便的进行布局。2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。

盒子模型：CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

6.2内容区域的宽高和高度

作用：利用width和height属性默认设置是盒子内容区域的大小

属性：width/height

常见取值：数字+px

6.3边框(border)

作用：给设置边框粗细、边框样式、边框颜色效果

单个属性：边框粗细（属性名：border-width 属性值：数字+px）、边框样式（属性名：border-style 属性值：实线solid、虚线dashed、点线dotted）（属性名：border-color 属性值：颜色取值）

边框连写形式

属性名：border

属性值：单个取值的连写，取值之间可以空格隔开。如：border：10px solid red；

快捷键：bd+tab

边框单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方位名词

属性值：连写的取值

6.4内边距(padding)

作用：设置边框与内容区域之间的距离

属性名：padding

 常见取值：

内边距单方向设置

场景：只给盒子的某个方向单独设置内边距

属性名：padding-方位名词

属性值：数字+px

6.5外边距(margin)

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的

外边距单方向设置

场景：只给盒子的某个方向单独设置外边距

属性名：margin-方位名词

属性值：数字+px

外边距的正常情况

场景：水平布局的盒子，左右的margin正常，互不影响

结果：最终两者距离为左右margin的和

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

场景：垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：只给其中一个盒子设置margin即可

外边距折叠现象-2.塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：1.给父元素设置boder-top或者padding-top（分隔父子元素的margin-top） 2.给父元素设置overflow：hhidden 3.转换成行内快元素 4.设置浮动

行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时

结果：1.水平方向的margin和padding布局中有效！ 2.垂直方向的margin和padding布局中无效

6.6盒子实际大小终极计算公式

需求：盒子尺寸300×300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

盒子实际大小终极计算公式：

解决：当盒子被border和padding撑大后，如何满足需求？

6.7CSS3盒子模型

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

解决方法（1）：手动内减

操作：自己计算多余大小，手动在内容中减去

缺点：项目计算量大

解决方法（2）：自动内减

操作：给盒子设置属性box-sizing：border-box

优点：浏览器会自动计算多余大小，自动在内容中减去

七、CSS布局

7.1结构伪类选择器

7.1.1作用与优势：

1、作用：根据元素在HTML中的结构关系查找元素

2、优势：减少对于HTML中类的依赖，有利于保持代码整洁

3、场景：常用于查找某父级选择器中的子元素

7.1.2选择器

E:first-child { } 匹配父元素中第一个子元素，并且时E元素

E:last-child { } 匹配父元素中最后一个子元素，并且时E元素

E:nth-child {n} 匹配父元素中第n个子元素，并且时E元素

E：nth-last-child(n) { } 匹配父元素中倒数第n个子元素，并且是E元素

n的注意点：

（1）n为0、1、2、3、4、5、6......

（2）通过n可以组成常见公式：

偶数（2n、even）、奇数（2n+1、2n-1、odd）、找到前5个（-n+5）、找到从第五个往后（n+5）

拓展补充：nth-of-type

nth-of-type(n) { } 只在父元素的同类型（E）子元素范围中，匹配第n个

区别：

：nth-child（直接在所有孩子中数个数）

：nth-of-type（先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数）

7.2伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

1、元素：HTML设置的标签

2、伪元素：由CSS模拟出的标签效果

种类：

::before（在父元素内容的最前添加一个伪元素）

::after（在父元素内容的最后添加一个伪元素）

注意点：

1、必须设置content属性才能生效

2、伪元素默认是行内元素

7.3标准流

标准流：又称为文档流，是浏览器在渲染显示网页内容是默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1、块级元素：从上往下，垂直布局，独占一行

2、行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

7.4浮动

7.4.1浮动的作用

早期的作用：图文环绕；现在的作用：网页布局

7.4.2浮动的代码

属性名：float

属性值：left（左浮动） right（右浮动）

7.4.3浮动的特点

1、浮动的元素会脱离标准流（脱标）在标准流中不占位置

2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4、浮动元素会受到上面元素边界的影响

5、浮动元素有特殊的显示效果 一行可以显示多个 可以设置宽高

注意点：浮动的元素不能通过text-align:center或者margin:()auto，让浮动元素本身水平居中

7.4.4浮动的案例

7.5清除浮动

7.5.1清除浮动的介绍

清除浮动带来的影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：子元素浮动后脱标——>不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

7.5.2清除浮动的方法

1、直接设置父元素高度

（优点：简单粗暴。缺点：有些布局中不能固定父元素高度）

2、额外标签法

操作：1、在父元素内容的最后添加一个块级元素 2、给添加的块级元素设置clear:both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3、单伪元素清除法

操作：用伪元素替代了额外标签

1、基本写法：2、补充写法：

优点：项目中使用，直接给标签加类即可清除浮动

4.双伪元素清除法：

5、给父元素设置overflow:hidden

操作：直接给父元素设置overflow：hidden

特点：方便

7.5.3拓展补充-BFC的介绍

BFC：快格式化上下文

时Web页面的可视CSS渲染的一部分，是快盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

创建BFC的方法：

1、html标签是BFC盒子

2、浮动元素是BFC盒子

3、行内块元素是BFC盒子

4、overflow属性值不为visible。如：auto、hidden....

5、...........

BFC盒子常见特点：

1、BFC盒子会默认包裹住内部子元素（标准流、浮动）——>应用：清除浮动

2、BFC盒子本身与子元素之间不存在margin的塌陷现象——>应用：解决margin的塌陷

3..............

7.6定位

7.6.1定位的基本介绍

1、网页常见布局方式

（1）标准流

块级元素独占一行——>垂直布局

行内元素/行内块元素一行显示多个——>水平布局

（2）浮动

可以让原本垂直布局的块级元素变成水平布局

（3）定位

可以让元素自由的摆放在网页的任意位置

一般用于盒子之间的层叠情况

2、定位的常见应用场景

（1）可以解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

（2）可以让盒子始终固定在屏幕中的某个位置

7.6.2定位的基本使用

1、设置定位方式

属性名：position

常见属性值：静态定位（static）相对定位（relative）绝对定位（absolute）固定定位（fixed）

2、设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则

7.6.3静态定位

介绍：静态定位是默认值，就是之前认识的标准流

代码：position：static

注意点：1、静态定位就是之前标准流，不能通过方位属性进行移动（占位置）

2、之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

7.6.4相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

代码：position：relative

特点：1、需要配合方位属性实现移动 2、相对于自己原来位置进行移动 3、在页面中占位置——>没有脱标

应用场景：1、配合绝对定位组CP（子绝父相） 2、用于小范围的移动

7.6.5绝对定位

介绍：相对于非静态定位的父元素进行定位移动

代码：position：absolute

特点：1、需要配合方位属性实现移动 2、默认相对于浏览器可视区域进行移动 3、在页面中不占位置——>已经脱标

应用场景：1、配合绝对定位组CP

绝对定位到底相对于谁进行偏移？

1、祖先元素中没有定位——>默认相对于浏览器进行移动

2、祖先元素中有定位——>相对于最近的有定位的祖先元素进行移动

7.6.6子绝父相

场景：让子元素相对于父元素进行自由移动

含义：子元素：绝对定位 父元素：相对定位

子绝父相好处：父元素是相对定位，则对网页布局影响最小

拓展补充：子绝父绝特殊场景

场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可。

原因：父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

子绝父相水平居中案例

1、子绝父相

2、先让子盒子往右移动父盒子的一半：

left：50%

3、再让子盒子往左移动自己的一半

普通做法：margin-left：负的盒子宽度的一半

缺点：子盒子宽度变化后需要重新改代码

优化做法：transform：translateX(50%)

子绝父相水平垂直都居中案例

1、设置子绝父相

2、left：50%

3、top：50%

4、transform：translate（-50%，-50%）

7.6.7固定定位

代码：position：fixed

特点：1、需要配合方位属性实现移动

2、相对于浏览器可视区域进行移动

3、在页面中不占位置——>已经脱标

应用场景：

1、让盒子固定在屏幕中的某个位置

7.6.8元素的层级关系

不同布局方式元素的层级关系：

标准流<浮动<定位

不同定位之间的层级关系：

相对，绝对，固定默认层级相同

此时HTML中写在下面的元素层级最高，会覆盖上面的元素

7.6.9更改定位元素的层级

场景：改变定位元素的层级

属性名：z-index

属性值：数字

数字越大，层级越高

7.7装饰

7.7.1垂直对齐方式

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

一、文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行中显示时，其实底部不是对齐的

垂直对齐方式：

属性名 vertical-align

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

拓展补充：

1、文本框与表单按钮无法对齐的问题

2、input标签和img标签无法对齐的问题

3、div中的文本框，文本框无法贴顶问题

4、div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

5、使用line-height让img标签垂直居中问题

注意点：学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题。 推荐优先使用浮动完成效果

7.7.2光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

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

7.7.3边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

边框圆角的常见应用

画一个正圆：

1、盒子必须是正方形

2、设置边框圆角位盒子宽高的一半——>border-radius:50%

胶囊按钮：

1、要求盒子是长方形

2、设置——>border-radius：盒子高度的一半

7.7.4overflow溢出部分显示效果

溢出部分：指的是盒子内容部分，所超出盒子范围得区域

场景：控制内容溢出部分得显示效果，如：显示，隐藏，滚动条.......

属性名：overflow

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

7.7.5元素本身隐藏

场景：让某元素本身在屏幕中不可见，如：鼠标：hover之后元素隐藏

常见属性：1、visibility：hidden 2、display：none

区别：1、visibility：hidden隐藏元素本身，并且在网页中占位置

2、display：none隐藏元素本身，并且在网页中不占位置

注意点：

开发中经常会通过display属性完成元素得显示隐藏切换

display：none；（隐藏）、display：block；（显示）

（拓展补充）元素整体透明度

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字 1：表示完全不透明 0：表示完全透明

（拓展补充）边框合并

场景：让相邻表格边框进行合并，得到细线边框效果

代码：border-collapse：collapse

（拓展补充）用CSS画三角形技巧

场景： 在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。

实现原理：利用盒子边框完成

实现步骤：1、设置一个盒子 2、设置四周不同颜色的边框 3、将盒子宽高设置为0，仅保留边框 4、得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

7.8选择器拓展

7.8.1链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法：

a:link{ } ：选中a链接未访问过的状态

a:visited{ } ：选中a链接访问之后的状态

a:hover{ } ：选中鼠标悬停的状态

a:active{ } ：选中鼠标按下的状态

注意点：1、如果需要同时实现以上四种伪类状态效果，需要按住LVHA顺序书写 2、其中：hover伪类选择器使用最为频繁

7.8.2焦点伪类选择器

场景：用于选中元素获取焦点时的状态，常用于表单控件

选择器语法：

input：focus{

background-color：

}

效果：表单控件获取焦点时默认会显示外部轮廓线

7.8.3属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择input标签

选择器语法：

E[attr] 选择具有attr属性的E元素

E[att="val"] 选择具有attr属性并且属性值等于val的E元素

项目样式补充：

背景图片的大小

作用：设置背景图片的大小

语法：background-size:宽度 高度

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

background连写拓展

完整连写：background：color image repeat position/size

注意点：background-size和background连写同时设置，需要注意覆盖问题