CSS基本知识点总结_css知识点总结

1、CSS简介

1.1、CSS是什么？

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

1.2、CSS引入方式

2、CSS选择器

2.1、CSS基础选择器

2.1.1 ID选择器

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

注意点：

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

2.1.2 类选择器

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

注意点：

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

2.1.3 通配符选择器

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

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

2.1.4 标签选择器

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

注意点：

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

2.1.5 属性选择器

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

注意点：

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

2.2、组合选择器

2.3、伪类选择器

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

2.4、伪元素选择器

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

2.5、伪类和伪元素区别

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

3、字体和文本样式

3.1、字体样式

3.2、文本样式

4、背景相关属性

4.1、背景颜色

属性名：background-color

属性值：

注意点：

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

4.2、背景图片

属性名：background-image

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

注意点：

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

4.3、背景平铺

属性名：background-repeat

属性值：

4.4、背景位置

属性名：background-position

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

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

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

5、元素的显示模式

5.1、块级元素

属性：display: block
特点：

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

代表标签：

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

5.2、行内元素

属性：display: inline
特点：

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

代表标签：

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

5.3、行内块元素

属性：display: inline-block
特点：

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

代表标签：

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

6、CSS三大特性

6.1、继承性

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

继承属性：

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height

应用场景：

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

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

6.2、层叠性

特性：

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

6.3、优先级

说明

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

7、盒子模型

7.1、盒子模型介绍

盒子的概念：

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

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

7.1.1 内容的宽度和高度

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

属性：width / height

常见取值：数字 + px

7.1.2 边框 (border)

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

属性：

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

例如：border: 1px solid #333;

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

7.1.3 内边距 (padding)

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

属性名：padding

常见取值：

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

7.1.4 外边距 (margin)

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

属性名：margin

常见取值：

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

7.1.5 盒子实际大小计算公式

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

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

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

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

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

7.1.7 塌陷现象

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

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

解决方式：

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

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

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
1
2
3
4
5
6
7
8

8、 标准流

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

排版规则：

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

9、 浮动

9.1、浮动的特点

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

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

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

9.2、浮动的作用

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

9.3、浮动的代码

属性：float

1. 左浮动： float: left;
2. 右浮动： float: right;

9.4、浮动带来的影响

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

9.5、清除浮动的方法

1. 直接设置父元素高度

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

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

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

3. 单伪元素清除法

基本写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
1
2
3
4
5

补充写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    /* 在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}
1
2
3
4
5
6
7
8

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

4. 双伪元素清除法

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

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

5. 给父元素设置overflow: hidden;

• 优点：简单直接，方便

10、 BFC

10.1、BFC介绍

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

10.2、创建BFC的方法

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

10.2、BFC盒子特点

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

11、定位

11.1、定位的应用场景

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

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

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

11.2、使用定位的步骤

11.2.1 设置定位方式

属性名：position

定位方式：

11.2.2 设置偏移值

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

11.3、定位方式

11.3.1 静态定位

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

11.3.2 相对定位

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

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

应用场景：

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

11.3.3 绝对定位

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

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

应用场景：

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

    <!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>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33

11.3.3 固定定位

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

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

应用场景：

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

12 元素层级（z-index）

12.1、 元素层级关系

1. 不同布局方式的层级关系

• 标准流 < 浮动 < 定位

2. 不同定位之间的层级关系

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

12.2、 改变层级的方式

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

13、 装饰

13.1、 基线

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

13.2、 文字对齐

属性名：vertical-align
属性值：

应用场景：

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

13.3、 光标类型

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

13.4、边框圆角

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

13.5、 overflow

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

13.6、元素隐藏

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

属性：

1. visibility: hidden;
2. display: none;

区别：

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

13.6、元素透明度

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

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