CSS基本知识点总结

发布时间：2023-05-21 文章分类：WEB开发, 电脑百科投稿人：李佳字号：默认 | 大 | 超大打印

1、CSS简介

1.1、CSS是什么？

CSS指的是层叠样式表（Cascading Style Sheets）
CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
CSS节省了大量工作。它可以同时控制多张网页布局。

1.2、CSS引入方式

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中。style标签通常放在head中	当前页面	小案例
外联式	CSS写在单独的CSS文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

2、CSS选择器

2.1、CSS基础选择器

2.1.1 ID选择器

结构：#id属性值 { css属性名: 属性值; }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

2.1.2 类选择器

结构：.class { css属性名: 属性值; }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值成为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
一个标签可以同时有多个类名，类名之前以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

2.1.3 通配符选择器

结构：* { css属性名: 属性值; }
作用：找到页面中所有的标签，设置样式

注意点：默认去除浏览器自带属性margin和padding

2.1.4 标签选择器

结构：标签名 { css属性名: 属性值; }
作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

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

2.1.5 属性选择器

属性	说明
[attribute]	选择多有带 `attribute` 属性的元素
[attribute=value]	选择 `attribute=value`的所有元素
[attribute~=value]	选择 `attribute`属性包含单词 `value`的所有元素
[attribute^=value]	选择其attribute属性值以`value`开头的所有元素
[attribute$=value]	选择其attribute属性值以 `value`结束的所有元素
[attribute*=value]	选择其attribute属性中包含`value`子串的每个元素

结构：标签名 { css属性名: 属性值; }
作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

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

2.2、组合选择器

选择器	作用	格式	示例
后代选择器	找后代	选择器之间通过空格分隔	.father .son { css }
子代选择器	找儿子	选择器之间通过 `>`分隔	.father > .son { css }
并集选择器	找到多类元素	选择器之间通过`,`分隔	div,p,span { css }
交集选择器	找同时满足多个选择器的元素	选择器之间紧挨着	p.red { css }
兄弟选择器	匹配p标签后的所有span元素	选择器之间通过 `~` 分隔	p ~ span
相邻选择器	匹配p标签的第一个span元素	选择器之间通过 `+` 分隔	p + span

2.3、伪类选择器

伪类：将特殊的效果添加到特定的选择器上，不会产生新元素

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E:nth-child(n)	作为父元素的第n个子元素E
E:nth-last-child(n)	选择父元素的倒数第n个子元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个元素
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type	选择父元素内具有指定类型的倒数第n个E元素
E:root	选择匹配元素E所在文档的根元素，也就是html
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型的子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，且该元素也不包含任何文本节点
E:link	选择所有未被访问的链接
E:active	选择活动状态的a链接元素
E:visited	选择已经访问过的元素
E:hover	选择鼠标悬停状态的元素
E:checked	选择`<input type="checkbox" checked>`的元素

2.4、伪元素选择器

伪元素：在内容元素的前后插入额外的元素或样式，这些元素不在html文档中生成，只在外部可见。

选择器	功能描述
::before	创建一个伪元素放在选中元素前
::after	创建一个伪元素放在选中元素后
::first-letter	选各种元素第一行第一个字母
::first-line	选中元素的第一行
::selection	选中鼠标点击拖动选中的高亮部分

2.5、伪类和伪元素区别

伪元素只能在选择器中出现一次，而且只在末尾出现
伪类只设置样式，不会创建新元素。而伪元素会创建新元素
伪类的效果可以通过添加实际的类来实现；伪元素也可以通过添加元素来实现

3、字体和文本样式

3.1、字体样式

属性名	样式	属性值
font-size	字体大小	数字+px
font-weight	字体粗细	正常：normal或数字400; 加粗：bold或数字700
font-style	是否倾斜	正常（默认值）：normal; 倾斜：italic
font-family	字体系列	sans-serif（无衬线字体）; serif（衬线字体）; monospace（等宽字体）
font	字体连写	style weight size family

3.2、文本样式

属性名	样式	属性值
text-indent	文本缩进	数字+px; 数字+em（推荐：1em = 当前标签的font-size的大小）
text-align	对齐方式	left: 左对齐; center: 居中对齐; right: 右对齐
text-decoration	文本修饰	underline: 下划线; line-through: 删除线; overline: 上划线; none: 无装饰线
line-height	文本行高	数字+px; 倍数（当前标签font-size的倍数）

4、背景相关属性

4.1、背景颜色

属性名：background-color

属性值：

颜色取值	示例
关键字	red、green、yellow等
rgb表示法	rgb(255,255,255)
rgba表示法	rgba(255,255,255,1)
十六进制	#ffffff;

注意点：

背景颜色默认值是透明的：rgba(0,0,0,0)或transparent
背景颜色不会影响盒子大小，一般在布局中使用，方便看清盒子大小和位置

4.2、背景图片

属性名：background-image

属性值：background-image: url(‘图片的路径’)

注意点：

背景图片默认实在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景不能撑开盒子

4.3、背景平铺

属性名：background-repeat

属性值：

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

4.4、背景位置

属性名：background-position

属性值：background-position: 水平方向位置垂直方向位置

4.5、img标签和背景图片的区别

img标签是一个标签，不设置宽高默认会以原来尺寸显示
背景图片只是装饰的CSS样式，不能撑开元素的宽高

5、元素的显示模式

5.1、块级元素

属性：display: block
特点：

独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高

代表标签：

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等

5.2、行内元素

属性：display: inline
特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签：

a、span、b、u、i、s、strong、ins、em、del等

5.3、行内块元素

属性：display: inline-block
特点：

一行可以显示多个
可以设置宽高

代表标签：

input、textarea、button、select等
特殊情况：img标签有行内块元素特点，但在谷歌浏览器中显示的是inline

6、CSS三大特性

6.1、继承性

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

继承属性：

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height

应用场景：

可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效情况：被浏览器默认样式给覆盖了

6.2、层叠性

特性：

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

6.3、优先级

选择器	示例	权重值
!important	background-color: #fff !important;	正无穷
内联选择器	`<span style='color: #333;'>样式作用元素</span>`	1000
ID选择器	#id	100
类选择器、属性选择器、伪类选择器	.class	10
标签选择器、伪元素选择器	div、p	1
通配符选择器	`*`	0
继承属性	`<div style='color:#333;'><span>样式作用元素</span></div>`	-1

说明

权重值是256进制的
同一行的选择器权重值相加，权重值高的样式生效，如果权重值相同，后面写的覆盖前面
不是同一行的直接找按权重值相加计算，权重值高的样式生效

7、盒子模型

7.1、盒子模型介绍

盒子的概念：

页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局
浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子

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

7.1.1 内容的宽度和高度

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

属性：width / height

常见取值：数字 + px

7.1.2 边框 (border)

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

属性：

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

边框连写形式：边框粗细边框样式边框颜色

例如：border: 1px solid #333;

单方向设置：border-方位名词: 1px solid red;

7.1.3 内边距 (padding)

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

属性名：padding

常见取值：

取值	示例	含义
一个值	padding: 10px;	上下左右都设置为10px
两个值	padding: 10px 20px;	上下设置为10px、左右设置为20px
三个值	padding: 10px 20px 30px	上设置为10px、左右设置为20px、下设置为30px
四个值	padding: 10px 20px 30px 40px	上设置为10px、右设置为20px、下设置为30px、左设置为40px

单方向设置：padding-方位名词: 10px;

7.1.4 外边距 (margin)

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

属性名：margin

常见取值：

取值	示例	含义
一个值	margin: 10px;	上下左右都设置为10px
两个值	margin: 10px 20px;	上下设置为10px、左右设置为20px
三个值	margin: 10px 20px 30px	上设置为10px、左右设置为20px、下设置为30px
四个值	margin: 10px 20px 30px 40px	上设置为10px、右设置为20px、下设置为30px、左设置为40px

单方向设置：margin-方位名词: 10px;

7.1.5 盒子实际大小计算公式

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

问题：当盒子被border和padding撑大后，如何解决？

手动内减：手动计算多余大小，在内容中减去
自动内减：给盒子设置属性 box-sizing: border-box;

7.1.6 相邻盒子之间margin计算规则

水平方向的盒子，两者距离为margin之和
垂直方向的盒子，两者距离为margin的最大值

7.1.7 塌陷现象

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

结果：导致父元素一起往下移动，引起父元素塌陷

解决方式：

给父元素设置border-top或者padding-top（分割父子元素的margin-top）
给父元素设置overflow: hidden;
转换成行内块级元素 display: inline-block;
设置浮动 float: left;
添加伪类

常用清除浮动和父元素塌陷伪类：

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

8、标准流

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

排版规则：

块级元素：从上到下，垂直布局，独占一行
行内元素 或 行内块元素：从左到右，水平布局，空间不够自动换行

9、浮动

9.1、浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素会受到上面块级元素边界的影响
浮动元素有特殊的显示效果

一行可以显示多个
可以设置宽高

注意点：浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中

9.2、浮动的作用

图文环绕
网页布局，让垂直布局的盒子变成水平布局

9.3、浮动的代码

属性：float

左浮动： float: left;
右浮动： float: right;

9.4、浮动带来的影响

影响：子元素设置浮动，此时子元素脱离标准流无法撑开父元素，会影响页面其他元素的布局

9.5、清除浮动的方法

直接设置父元素高度

优点：简单直接，方便
缺点：有些元素无固定高度，无法设置高度

在父元素内容的最后添加一个块级元素，并给块级元素添加属性 clear: both;

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

单伪元素清除法

基本写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

补充写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    /* 在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

优点：直接给标签添加类即可清除浮动

双伪元素清除法

.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}
.clearfix::after {
clear: both;
}

优点：直接给标签添加类即可清除浮动

给父元素设置overflow: hidden;

优点：简单直接，方便

10、 BFC

10.1、BFC介绍

块格式化上下文（Block Formatting Context）是web页面的可视CSS渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域。

10.2、创建BFC的方法

html标签是BFC盒子
浮动元素是BFC盒子
行内元素是BFC盒子
overflow属性值不为visible是BFC盒子
position: absolute或fixed

10.2、BFC盒子特点

BFC盒子会默认包裹住内部子元素（标准流、浮动流）-> 应用场景：清除浮动
BFC盒子本身与子元素之间不存在margin的塌陷现象 -> 应用场景：解决margin的塌陷

11、定位

11.1、定位的应用场景

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

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

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

11.2、使用定位的步骤

11.2.1 设置定位方式

属性名：position

定位方式：

定位方式	属性值	相对于谁移动	是否占位置
静态定位	static	不能通过方位属性移动	占位置
相对定位	relative	相对于自己原来的位置	占位置
绝对定位	absolute	相对于最近的且有定位的祖先元素移动	不占位置（脱标）
固定定位	fixed	相对于浏览器可视区域	不占位置（脱标）

11.2.2 设置偏移值

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

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

11.3、定位方式

11.3.1 静态定位

介绍：静态定位是默认值，就是标准流，不能通过方位属性进行移动
代码：position: static;

11.3.2 相对定位

介绍：相对于之前的位置进行位移
代码：position: relative;
特点：

需要配合方位属性实现移动
相对于原来的位置进行移动
在页面中占位置,没有脱离标准流

应用场景：

配合绝对定位（子绝父相）
小范围移动

11.3.3 绝对定位

介绍：相对于之前的位置进行位移
代码：position: absolute;
特点：

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置,脱离标准流
相对于最近的有定位（非static）的祖先元素进行移动

应用场景：

配合相对定位（子绝父相）

 <!DOCTYPE html>
 <head>
     <meta charset="UTF-8">
     <title>水平垂直居中</title>
     <style>
         /* 相对于浏览器可视区域进行移动 */
         .father {
             position: absolute;
             top: 50%;
             left: 50%;
             width: 500px;
             height: 500px;
             background-color: pink;
             transform: translate(-50%, -50%);
         }
         /* 相对于最近的有定位（非static）的祖先元素进行移动 */
         .son {
             position: absolute;
             top: 50%;
             left: 50%;
             width: 200px;
             height: 200px;
             background-color: red;
             transform: translate(-50%, -50%);
         }
     </style>
 </head>
 <body>
     <div class="father">
         <div class="son"></div>
     </div>
 </body>
 </html>

11.3.3 固定定位

介绍：相对于浏览器进行定位
代码：position: fixed;
特点：

需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置,脱离标准流
相对于最近的有定位（非static）的祖先元素进行移动

应用场景：

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

12 元素层级（z-index）

12.1、元素层级关系

不同布局方式的层级关系

标准流 < 浮动 < 定位

不同定位之间的层级关系

相对、绝对、固定默认层级相同
在HTML中写在下面的元素层级更高，会覆盖上面的元素

12.2、改变层级的方式

给元素添加属性z-index;属性值越大，层级越高

13、装饰

13.1、基线

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

13.2、文字对齐

属性名：vertical-align
属性值：

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

应用场景：

解决文本框和表单按钮无法对齐问题、
解决input和img无法对齐问题
解决div中的文本框无法贴顶问题
解决div不设置高度时，img标签下会存在额外间隙问题
使用line-height让img标签垂直居中问题

13.3、光标类型

介绍：设置鼠标光标在元素上时显示的样式
属性名：cursor
属性值：

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

13.4、边框圆角

介绍：让盒子四角变得圆润，增加页面细节，提高用户体验
属性名：border-radius
取值：数字+px、百分比

13.5、 overflow

介绍：控制溢出部分的显示效果

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

13.6、元素隐藏

介绍：让元素本身在浏览器中不可见

属性：

visibility: hidden;
display: none;

区别：

visibility: hidden;隐藏元素本身，并且在网页中占位置
display: none;隐藏元素本身，并且在网页中不占位置

13.6、元素透明度

介绍：让元素整体（包括内容）一起变透明
属性名：opacity
属性值：0 ~ 1之间的数字

1：表示完全不透明
0：表示完全透明

标签 css, select, 知识

1、CSS简介

1.1、CSS是什么？

1.2、CSS引入方式

2、CSS选择器

2.1、CSS基础选择器

2.1.1 ID选择器

2.1.2 类选择器

2.1.3 通配符选择器

2.1.4 标签选择器

2.1.5 属性选择器

2.2、组合选择器

2.3、伪类选择器

2.4、伪元素选择器

2.5、伪类和伪元素区别

3、字体和文本样式

3.1、字体样式

3.2、文本样式

4、背景相关属性

4.1、背景颜色

4.2、背景图片

4.3、背景平铺

4.4、背景位置

4.5、img标签和背景图片的区别

5、元素的显示模式

5.1、块级元素

5.2、行内元素

5.3、行内块元素

6、CSS三大特性

6.1、继承性

6.2、层叠性

6.3、优先级

7、盒子模型

7.1、盒子模型介绍

7.1.1 内容的宽度和高度

7.1.2 边框 (border)

7.1.3 内边距 (padding)

7.1.4 外边距 (margin)

7.1.5 盒子实际大小计算公式

7.1.6 相邻盒子之间margin计算规则

7.1.7 塌陷现象

8、 标准流

9、 浮动

9.1、浮动的特点

9.2、浮动的作用

9.3、浮动的代码

9.4、浮动带来的影响

9.5、清除浮动的方法

10、 BFC

10.1、BFC介绍

10.2、创建BFC的方法

10.2、BFC盒子特点

11、定位

11.1、定位的应用场景

11.2、使用定位的步骤

11.2.1 设置定位方式

11.2.2 设置偏移值

11.3、定位方式

11.3.1 静态定位

11.3.2 相对定位

11.3.3 绝对定位

11.3.3 固定定位

12 元素层级（z-index）

12.1、 元素层级关系

12.2、 改变层级的方式

13、 装饰

13.1、 基线

13.2、 文字对齐

13.3、 光标类型

13.4、边框圆角

13.5、 overflow

13.6、元素隐藏

13.6、元素透明度

8、标准流

9、浮动

12.1、元素层级关系

12.2、改变层级的方式

13、装饰

13.1、基线

13.2、文字对齐

13.3、光标类型