【前端】CSS基础知识

语法：.类名{ 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">

李斯啦果

关注

27
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
【前端】CSS基础知识

CSS，标签选择器，类选择器，id选择器，通配符选择器，line-height，标签水平居中方法，复合选择器，后代选择器，子代选择器，并集选择器，交集选择器，hover伪类选择器，背景平铺，background-position，元素的三种显示模式，HTML嵌套规范， CSS的继承性，CSS的层叠性，CSS的优先级，盒子模型，border，padding，自动内减，margin，清除内外边距，版心居中，外边距合并现象，塌陷现象，清除浮动，定位，子绝父相，用CSS画三角形，精灵图，SEO三大标签
复制链接

扫一扫

专栏目录

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

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

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

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线，虚线，点线
边框颜色	border-color	颜色取值

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

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

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

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

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

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

选择器	功能
E[attr]	选择具有attr属性的E元素
E[attr="val"]	选择具有attr属性并且属性值为val的E元素

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

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