【前端】CSS基础知识
CSS，标签选择器，类选择器，id选择器，通配符选择器，line-height，标签水平居中方法，复合选择器，后代选择器，子代选择器，并集选择器，交集选择器，hover伪类选择器，背景平铺，background-position，元素的三种显示模式，HTML嵌套规范， CSS的继承性，CSS的层叠性，CSS的优先级，盒子模型，border，padding，自动内减，margin，清除内外边距，版心
目录
1.初识CSS
CSS定义：叠样式表
作用：美化html标签
写法：CSS属性是写在style标签中，作为head标签的子标签
CSS引入方式：
- 内嵌式：写在head标签中，作用范围为当前页面，小案例使用
- 外联式：CSS写在一个单独的.css文件中，通过link标签在网页中引入 作用范围为多个页面，项目中常用
- 行内式 ：CSS写在标签的style属性中，作用范围是当前标签，一般配合js使用
2.基础选择器
2.1标签选择器
语法：标签名 { CSS属性}
作用：通过标签名，找到页面中所有这类标签，设置样式
📖Note:
- 标签选择器选择的是一类标签，不是单独的一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
2.2类选择器
语法：.类名{ CSS属性}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
📖Note:
- 所有标签上都有class属性，class属性的属性值称为类名
- 类名可以由数字，字母，下划线，中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间用空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
2.3id选择器
语法：#id属性值 { CSS属性}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
📖Note:
- 所有标签上都有id属性
- id属性类似于身份证号码，在一个页面中是唯一的，不能重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
- 一般配合js添加动态效果
2.4通配符选择器
语法：*{ CSS属性}
作用：找到页面中所有的标签，设置样式
📖Note:
- 开发中很少使用，小页面中使用它去除标签默认的margin和padding样式
3.字体文本相关样式
3.1字体样式
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体样式 |
| font-family | 字体类型 |
| font属性连写 | 字体类型 |
1️⃣font-size ：数字px
- 谷歌浏览器默认大小是16px
2️⃣font-weight:正常400,加粗700
- 关键字取值：normal 正常 bold 加粗
- 数字取值:100~900的整百数
3️⃣font-style：字体是否倾斜
- normal正常 italic倾斜
4️⃣font-family：字体
渲染规则：
- 从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 尽量使用常见字体，保证所有用户的网页正常显示
- windows系统默认微软雅黑
5️⃣样式的层叠问题？
- 同一个标签设置了多个样式，后边设置的覆盖前边的
6️⃣font相关属性的连写
- 顺序：font: style weight size family
- 把单独的样式写在连写的下面
- 把单独的样式写在连写的里面
- 省略只能省略前两个
3.2文本样式
| text-indent | 文本缩进 |
| text-align | 文本水平对齐方式 |
| text-decoration | 文本修饰 |
text-indent 取值：
- 数字+px
- 数字+em（1em = 当前标签的font-size的大小）通常设置2em，就是首行缩进2个字符
text-align取值：
属性值 效果 left 左对齐 center 居中对齐 right 右对齐 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
水平居中方法总结：
text-align：center能让哪些元素水平居中？
文本，span标签，a标签，input标签，img标签
以上元素水平居中，需要给其的父元素设置
text-decoration取值：
属性值 效果 underline 下划线 line-through 删除线 overline 上划线 none 无装饰线 开发中会使用text-decoration：none；清除a标签的下划线
3.3line-height行高
属性名：line-height
作用：控制一行的上下行间距 两行文本间的距离
取值：
- 数字+px
- 倍数：当前标签font-size的倍数
应用：
- 让单行文本垂直居中可以设置line-height:文字父元素高度
- 网页精准布局时，会设置line-height:1 可以取消上下间距
行高也可以使用font复合属性
行高font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family
行高的拓展使用，内容的垂直居中（只适用于单行文字垂直居中）
3.4颜色的常见取值
文字颜色/背景颜色
| 颜色表示方式 | 表示含义 | 属性值 |
| 关键词 | 预定义的颜色名 | red,green,blue,yellow..... |
| rgb表示法 |
红绿蓝三原色 每项取值范围：0~255 |
rgb(0,0,0),rgb(255,255,255) |
| rgba表示法 |
红绿蓝三原色+a表示透明度 取值范围0~1 |
rgba(10,20,255,0.5) |
| 十六进制表示法 | #开头，将数字转化为十六进制表示 | #ff0000,#e92322 |
3.5标签水平居中方法
如果需要让div，p，h大盒子水平居中，通过margin: 0 auto实现
📖Note：
- div，p，h大盒子水平居中，直接给当前元素本身设置即可
- margin: 0 auto一般针对于固定宽度的盒子；如果大盒子没有设置宽度，此时会默认占满父元素的宽度
4.选择器进阶
4.1复合选择器
4.1.1后代选择器
作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2 {CSS}
结果：在选择器1所找到标签的后代中，找到满足选择器2的标签，设置样式
📖Note：
- 后代包括：儿子，孙子，重孙子......
- 后代选择器中，选择器与选择器之间通过空格隔开
4.1.2子代选择器
作用：根据html标签的嵌套关系，选择父元素 子代中 满足条件的元素
语法：选择器1>选择器2 {CSS}
结果：在选择器1所找到标签的子代中，找到满足选择器2的标签，设置样式
📖Note：
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之间通过 > 隔开
4.2并集选择器
作用：同时选择多组标签，设置相同的样式
语法：选择器1 ，选择器2 {CSS}
结果：找到选择器1和选择器2选中的标签，设置样式
📖Note：
- 并集选择器中的每组选择之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
4.3交集选择器
作用：选中页面中，同时满足多个选择器的标签
选择器语法：选择器1选择器2 {CSS}
结果：既又原则，找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
📖Note：
- 交集选择器中的每组选择器之间是紧挨着的，中间没有分隔符号
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
4.4hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
语法：选择器：hover{CSS}
📖Note：
- 伪类选择器选中可以对任意标签设置
4.5Emmet语法
作用：通过简写，快速生成代码
提示css属性：一般情况都是首字母
| 种类 | 示例 | 效果 |
| 标签名 | div |
<div></div> |
| 类选择器 | .red |
<div class="red"></div> |
| id选择器 | #one |
<div id="one"></div> |
| 交集选择器 | p.red#one | <div class="red" id="one"></div> |
| 子代选择器 | ul>li |
<ul> <li></li> </ul> |
| 内部文本 | ul>li{内容} |
<ul> <li>内容</li> </ul> |
| 创建多个 | ul>li*2 |
<ul> <li></li> <li></li> </ul> |
| ......... | ||
5.背景属性
5.1背景颜色
属性名：background-color（bgc）
属性值：关键字，rgb表示法，rgba表示法，十六进制
📖Note：
- 背景颜色默认值是透明：rgba(0,0,0,0) transparent为透明色
- 背景颜色不会影响盒子大小，并且能清除显示盒子的大小和位置，一般会在布局中先给盒子设置背景颜色
5.2背景图片
属性名：background-img（bgi）
📖Note：
- 背景图片中url中可以省略引号
- 背景图片默认在水平和垂直方向平铺
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑大盒子的
5.3背景平铺
属性名：background-repeat（bgr）
属性值:
取值 效果 repeat 默认值，水平和垂直方向都平铺 no-repeat 不平铺 repeat-x 沿水平方向平铺 repeat-y 沿垂直方向平铺
5.4背景位置
属性名：background-position（bgp）
语法：background-position：水平方向位置 垂直方向位置
属性值：
1️⃣方向名称
- 水平方向：left，center，right
- 垂直方向：top，center，bottom
2️⃣数字+px(坐标系）
- 原点（0，0）盒子的左上角
- x轴：水平向右
- y轴：垂直向下
数字+px设置时：正值和负值
📖Note：
- 图片默认显示在左上角
- 方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
背景相关属性连写：
推荐书写顺序：background：color img repeat position
可以按需求省略
特殊情况：在PC端，如果盒子大小和背景图片大小一样，此时可以直接写background：url()
📖Note：
如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
顺序问题：
- position如果使用方向名称表示，水平和垂直顺序也能交换
- position如果使用数字+px表示，水平和垂直顺序就不能交换
img和背景图片的区别？
- img是一个标签，不设置宽高默认以原尺寸显示插入图，实现网页中比较重要的图片
- div+背景图，需要设置div的宽高，背景图是装饰的CSS样式，不能撑开div标签，实现装饰性的，不太重要的图
6.元素显示模式
6.1元素的三种显示模式
块级元素
1️⃣显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以自定义宽度和高度
2️⃣代表标签：div，p,h系列，ul,li,dl,dt,dd,form,header,nav,footer...
行内元素
1️⃣显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以自定义宽度和高度
2️⃣代表标签：a,span,b,u,i,strong,ins,em,del....
测试显示模式：加宽加高加背景色
行内块元素
1️⃣显示特点：
- 一行可以显示多个
- 可以自定义宽度和高度
2️⃣代表标签：input,textarea,button,select
特殊情况：img标签有行内块元素的特点，但是chrome调试工具中显示结果是inline
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
属性 效果 使用频率 display：block 转换成块级元素 较多 display：inline-block 转换成行内块元素 较多 display：inline 转换成行内元素 较少
6.2HTML嵌套规范：
嵌套规范：
- 块级元素一般会作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等，但是：p标签中不要嵌套div,p,h等块级元素
- a标签内部可以嵌套任意元素，但是：a标签不能嵌套a标签
7.CSS三大特性
7.1CSS的继承性
特性：子元素有默认继承父元素样式的特点
可以继承的常见属性（文字控制属性都可以继承，标签控制属性一般都不能继承）
- color,font-style,font-weight,font-size,font-family
- text-indent,text-align
- line-height
📖Note：
- 可以通过调试工具判断样式是否可以继承
继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但显示自己的默认样式
- a标签的color会继承失效
- h标签的font-size会继承失效
7.2CSS的层叠性
特性：
- 给同一个标签设置不同的样式，此时样式会层层叠加，共同作用在标签上
- 给同一个标签设置相同的样式，此时样式会层层覆盖，最终写在最后的样式会生效
📖Note：
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
7.3CSS的优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
📖Note：
- ！important写在属性值的后面，分号的前面
- ！important不能提升继承的优先级，只要是继承优先级最低
- 实际开发中不建议使用！important
当一个标签使用了多个选择器，样式冲突的时候，到底谁生效？
权重叠加计算
场景：如果是复合选择器，此时要通过权重叠加计算方法，判断出最终哪个选择器优先级最高会生效
权重叠加公式：每一级之间不存在进位
复合选择器中：
- 第一级：行内样式的个数
- 第二级：id选择器的个数
- 第三级：类选择器的个数
- 第四级：标签选择器的个数
比较规则：
- 先比较第一级数字，如果比较出来了，之后统统不看
- 如果第一级数字相同，则比较第二级数字，如果比较出来了，之后统统不看
- ... ...
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性
📖Note：
- ！important如果不是继承，则权重最高
- 全是继承的特殊情况：先继承父级
8.盒子模型
盒子的概念：
页面中的每一个标签，都可以看作是一个盒子，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，形象的称之为盒子
盒子模型：
CSS中规定每个盒子分别由：内容区域（content），内边距区域（padding），边框区域（border），外边框区域（margin）构成
8.1内容的宽度和高度
作用：利用width和height属性默认设置的是盒子 内容区域 的大小
8.2边框border
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border: 2px solid #000; //黑色的2像素的实线
| 属性值 | 效果 |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
单方向边框
场景：只给盒子的某个方向单独设计边框
属性名：border-方位名词
属性值：连写的取值
边框的单个属性：
作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style 实线，虚线，点线 边框颜色 border-color 颜色取值 很少单独使用，一般都使用复合属性设置
盒子实际大小计算公式：
需求：盒子尺寸400*400，背景绿色，边框10px，黑色
盒子实际大小初级计算公式：
CSS属性设置width和height时，盒子的需求宽高分别减去边框*2
8.3内边距padding
可以设置四个方向的内边距
padding属性可以当作复合属性使用，表示单独设置某个方向的内边距
padding最多取四个值：上下左右四个方向
padding也会撑大盒子
CSS属性设置width和height时，盒子的需求宽高分别减去内边距*2
8.4CSS3模型：自动内减
操作：给盒子设置属性box-sizing:border-box;
优点：浏览器会自动计算多余大小，自动在内容中减去
8.5外边距margin
也可以当作复合属性使用
8.6清除默认的内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，一般在项目开始前需要先清除这些默认的，后续自己设置
如：
- body标签有默认的margin:8px
- p标签有默认的上下margin
- ul标签默认有上下的margin和padding-left
清除默认样式：
8.7版心居中
版心：网页的有效内容 版心居中
效果：一个大div在浏览器网页居中对齐
外边距折叠-合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：只给其中一个盒子设置margin就好
外边距折叠-塌陷现象
场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
- 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow: hidden
- 转换成行内块元素
- 设置浮动
行内元素的内外边距问题
问题：如果想要通过margin和padding改变行内标签的垂直方向位置，无法生效
即行内标签的margin-top和margin-bottom，padding-top和padding-bottom无法生效
解决方案：添加line-height，改变垂直方向的位置
9.浮动
9.1结构伪类选择器
作用：根据元素在html中的结构关系查找元素
优势：减少对html中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
| 选择器 | 说明 |
|
E:first-child {} |
匹配父元素中第一个子元素，并且是E元素 |
|
E:last-child {} |
匹配父元素中最后一个子元素，并且是E元素 |
|
E:nth-child(n) {} |
匹配父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n) {} | 匹配父元素中倒数第n个子元素，并且是E元素 |
n的注意点：
- n为1，2，3，4，5，6......
- 通常n可以组成常见公式
| 功能 | 公式 |
| 偶数 | 2n、even |
| 奇数 | 2n+1，2n-1，odd |
| 找到前五个 | -n+5 |
| 找到从第五个往后 | n+5 |
结构伪类选择器的易错点：
问题：在下列代码中，如果要找到第一个a标签，如何去查找？
9.2伪元素
伪元素：一般页面中的非主体内容可以使用伪元素（装饰性的元素）
区别：
- 元素：html设置的标签
- 伪元素：由CSS模拟出标签的效果
种类：
伪元素 作用 ::before 在父元素内容的最前添加一个伪元素 ::after 在父元素内容的最后添加一个伪元素 📖Note:
- 必须设置content属性才能生效
- 伪元素默认是行内元素
9.3浮动
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素，行内块元素：从左往右，水平布局，空间不够自动折行
实现两个div在一行排列：
1️⃣块级元素转换成行内块元素
浏览器解析行内块或行内标签的时候，如果标签换行书写，会产生一个空格的距离，所以转行成行内块的方式不能完美实现
2️⃣浮动：让块级标签完美地在一行排列
- 浮动早期：图文环绕
- 现在：网页布局
浮动的特点：
1️⃣浮动元素会脱离标准流（简称"脱标"），在标准流中不占位置
2️⃣浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3️⃣浮动找浮动，下一个浮动元素会在上一个浮动元素后面排列
- 浮动的标签顶对齐，可以使用margin属性移动
4️⃣浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
📖Note：
- 浮动后的标签具备行内块的特点，并且比行内块更高级
- 浮动后的元素不能通过text-align:center或者margin:0 auto居中
- 浮动的优先级高于margin
CSS属性推荐书写顺序：浏览器执行效率更高
- 浮动或display
- 盒子模型相关属性：margin border padding 宽高背景色
- 文字样式
9.4清除浮动
清除浮动：清除浮动给其他元素带来的影响
影响：
- 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
- 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响
原因：子元素浮动后脱标，不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法：
1️⃣直接设置父元素的高度
优点：简单粗暴，方便
缺点：有些布局不能固定父元素高度，如：新闻列表，京东推荐模块
2️⃣额外标签法
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置clear:both
缺点：在页面外添加额外的标签，会让页面的html结构变复杂
3️⃣单伪元素清楚法
操作：用伪元素替代了额外标签
基本写法：
.clearfix::after { content: ''; display: block; clear: both; }补充写法：
.clearfix::after { content: ''; /* 伪元素添加的标签是行内的 */ display: block; clear: both; /* 补充：在网页中看不到伪元素 解决兼容性问题*/ height: 0; visibility: hidden; }优点：项目中使用，直接给标签加类即可清除浮动
4️⃣双伪元素清除法：
优点：项目中使用，直接给标签添加类即可清除浮动
/* .clearfix::before解决外边距塌陷问题 */
/* 外边距塌陷问题 父子标签都是块级，子级加margin会影响父级的位置 */
.clearfix::before,
.clearfix::after {
content: '';
/* 转换显示模式 */
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
clear: both;
}5️⃣给父元素设置overflow:hidden
操作：直接给父元素设置overflow:hidden
10.定位
10.1定位的介绍
可以让元素自由的摆放在网页的任意位置，一般用于 盒子之间 的层叠情况
定位的常见应用场景：
- 可以解决盒子与盒子之间的层叠问题：定位之后的元素层级更高，可以层叠在其他盒子的上面
- 可以让盒子始终固定在屏幕的某个位置
10.2定位的使用
1️⃣设置定位方式
属性名：position
常见属性值：
定位方式 属性值 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 2️⃣设置偏移值
- 偏移值设置分两个方向，水平和垂直方向各选一个使用即可；即left和right选一个，top和bottom选一个
- 选取的原则一般是就近原则（离哪边近用哪个）
10.2.1静态定位
静态定位：默认值，就是之前的标准流
语法：position：static
📖Note：
- 静态定位就是之前的标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指：相对定位，绝对定位，固定定位
10.2.2相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
语法：position：relative
特点：
- 需要配合方位属性实现移动：如果left和right都有，以left为准；top和bottom都有，以top为准
- 不改变标签的显示模式
- 相对于自己原来的位置进行移动
- 在页面中占位置：即没有脱标
应用场景：
- 配合绝对定位（子绝父相）
- 用于小范围的移动
10.2.3绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position：absolute
绝对定位：
- 先找已经定位的父级，如果有这样的父级。就以这个父级为参照物进行定位
- 有父级，父级没有定位，这时以浏览器窗口为参照物进行定位
特点：
- 需要配合方位属性实现移动
- 改变了标签的显示模式特点（如div设置绝对定位后显示模式变成行内块元素）
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置：已经脱标
应用场景：
- 配合相对定位
10.2.4子绝父相
一般都会参照一个有定位的父级进行设置
父级的定位为相对定位，自己为绝对定位
绝对定位查找父级的方式，就近找定位的父级，如果查找不到这样的父级，就以浏览器窗口为参照物进行定位
案例：使用子绝父相，让子盒子在父盒子中水平居中
垂直居中与水平居中相似
案例2：给图片添加遮罩效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 父级：相对定位 */
.banner {
position: relative;
margin: 0 auto;
width: 400px;
height: 400px;
}
/* 子级：绝对定位 */
.mask {
position: absolute;
left: 0;
bottom: 0;
/* 绝对定位的盒子显示模式为行内块元素的特点 加宽高不生效 */
/* 子级和父级的宽度相同 */
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="banner">
<img src="./pic2.jpg" alt="">
<!-- 遮罩 -->
<div class="mask"></div>
</div>
</body>
</html> 
10.2.5固定定位
介绍：死心眼型定位，相对于浏览器窗口进行定位移动
代码：position：fixed
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 具备行内块元素的特点
- 在页面中不占位置：已经脱标
应用场景：
- 让盒子固定在屏幕的某个位置
10.3元素的层级关系
不同布局方式元素的层级关系：
- 标准流<浮动<定位
不同定位之间的层级关系：
- 绝对定位，相对定位，固定定位默认层级相同
- 此时html中写在下面的元素层级更高，会覆盖上面的元素
默认情况下，定位的盒子，后来者居上
z-index属性可以改变元素的层级
z-index属性：整数
z-index属性值取值越大，显示顺序越靠上
📖Note：
- z-index的默认值是0
- z-index的使用必须配合定位使用，其他情况不生效
11.装饰
11.1垂直对齐方式
基线：浏览器在文字类型元素排版中存在用于对齐的基线（baseline）
浏览器在处理行内标签和行内块标签的时候，默认按照文字去解析，基线对齐
问题：当图片和文字在一行中显示的时候，底部不是对齐的
场景：解决行内/行内块元素的垂直对齐问题
属性名：vertical-align
属性值：
属性值 效果 baseline 默认，基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 📖Note：
- 图和文本垂直居中，选中图添加vertical-align属性
- 子级和父级：给子级标签添加vertical-align属性
11.2光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
属性值 效果 default 默认值，通常是箭头 pointer 小手效果，提示用户可以点击 text 工字形，提示用户可以选择文字 move 十字光标，提示用户可以挪动
11.3边框圆角
场景：让盒子的四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
原理：
赋值规则：从左上角开始赋值，顺时针赋值，没有赋值的看对角
边框圆角的常见应用：
1️⃣画一个正圆：用户头像
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半 border-radius: 50%
- border-radius最大为50% 盒子尺寸的一半
2️⃣胶囊按钮：
- 盒子形状为长方形
- border-radius设置为高度的一半
11.4overflow溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示，隐藏，滚动条.....
属性名：overflow
常见属性值：
属性值 效果 visible 默认值，溢出部分可见 hidden 溢出部分隐藏 scroll 无论是否溢出，都显示滚动条 auto 根据是否溢出，自动显示或隐藏滚动条
auto和scroll的区别：
- auto根据内容决定是否显示滚动条
- scroll总是会添加滚动条
11.5元素本身隐藏
场景：让某元素本身在屏幕中不可见，如：鼠标hover之后元素隐藏
常见属性：
- visibility：hidden
- display：none
区别：
- visibility属性占位
- display属性不占位
12.CSS样式拓展
12.1.元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
- 1：表示完全不透明
- 0：表示完全透明
📖Note：
- opacity会使盒子连同内容一起透明
- opacity不常用，设置透明度常用rgba
12.2.边框合并
场景：让相邻的表格边框进行合并，得到细线边框效果
代码：border-collapse: collapse;
12.3.用CSS画三角形
利用盒子边框完成
步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
12.4.焦点伪类选择器
场景：用于选中元素获取焦点时的状态，常用于表单控件
选择器语法：
效果：表单控件获取焦点时默认显示外部的轮廓线
12.5属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择input标签
选择器语法：
选择器 功能 E[attr] 选择具有attr属性的E元素 E[attr="val"] 选择具有attr属性并且属性值为val的E元素
12.6精灵图
场景：项目中将多张小图片，合并成一张大图片，这张大图片称为精灵图
优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
使用步骤：
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图的位置：通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y;
12.7背景图片大小
作用：设置背景图片的大小
语法：background-size: 宽度 高度;
取值：
取值 场景 数字+px 简单方便，常用 百分比 相当于当前盒子自身的宽高百分比 contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大 cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白
background连写：
完整连写：background: color image() repeat position/size;
注意：
background-size和background连写同时设置时，需要注意覆盖问题
解决：
- 要么单独的样式写在连写的下面
- 要么单独的样式写在连写的里面
12.8盒子阴影
作用：给盒子添加阴影效果，体现页面细节
属性名：box-shadow
取值：
参数 作用 h-shadow 必须，水平偏移量，允许负值 v-shadow 必须，垂直偏移量，允许负值 blur 可选，模糊度 spread 可选，阴影扩大 color 可选，阴影扩大 inset 可选，将阴影改为内部阴影
12.9过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：
参数 取值 过渡的属性 all：所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡 过渡的时长 数字+s（秒） 📖Note：
- 过渡需要：默认状态和hover状态样式不同。才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同的状态中，效果不同
①给默认状态设置，鼠标移入移出都有过渡效果
②给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
13.项目前置认知
网页与网站的关系：
网页：相当于每页纸
网站：相当于一本书
骨架结构标签
<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本
<!DOCTYPE html> HTML5
<html lang="en">标识网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN简体中文/en英文
<meta charset="UTF-8">标识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，负责可能出现乱码
常见字符编码：
UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
GB2312：6000+汉字
GBK：20000+汉字
注意：开发中统一使用UTF-8字符编码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
解决浏览器兼容性问题，宽度=设备宽度 移动端网页的时候要用
SEO
SEO(Seaech Engine Optimization)：搜索引擎优化
作用：让网站在搜索引擎上的排名更靠钱
提升SEO的常见方法：
1.竞价排名
2.将网页制作成html后缀
3.标签语义化
SEO三大标签：
- title ：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
ico图标设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。
更多推荐
28
0- 0
已为社区贡献2条内容
所有评论(0)