HTML+CSS基础：CSS篇（问答形式）

一、CSS基础

1. 基础认知

1.1 CSS初识

问题1:CSS的中文名称叫什么?

• 层叠样式表(级联样式表)

问题2:CSS的作用是什么呢？

• 给页面中的HTML标签设置样式(美化网页 布局页面)

问题3:CSS的语法规则是什么？

<style>
 		/* css注释 */
        /* 这里写的都是css */
        /* 选择器 {css属性} */
        /* 选择器: 查找标签 */
        /*选择器 {
          属性: 值;
          属性: 值;
        }*/
div{
    color: green;
    font-size: 30px;
    width: 300px;
    height: 100px;
    background-color: hotpink;
}
</style>

• 使用 {} 包含一个或多个样式声明；
• 每条样式声明以键值对形式出现：属性: 值；
• 属性和值之间使用 : 分隔；
• 每个样式写完之后, 使用;进行结束;
• CSS标点符号都是英文状态下的;

1.2 CSS引入方式

问题1:CSS常见三种引入方式有哪些？

• 内联式 外联式 行内式

问题2:CSS常见三种引入方式的特点区别有哪些（书写位置、作用范围、使用场景）?

2. 基础选择器

2.1 标签选择器

问题1:选择器有什么作用?

• 选择页面中对应的标签（找她），方便后续设置样式（改她)
• 标签选择器{属性:属性值;属性:属性值;} 例如:div { color: green;}

问题2:标签选择器以什么作为选择器?

• 标签名,找到页面中所有这类标签，设置样式.

问题3:标签选择器选择的是一类标签?还是单独某一个标签?

• 选择的是一类标签,而不是单独的某一个标签.

2.2类选择器

问题1:类选择器有什么作用?

• 通过类名,找到页面中所有带有类名的这个标签设置样式.
• . 类名{属性:属性值;属性:属性值;} 例如: .box { color: green;}

问题2:类选择器使用步骤是什么？

• 找到需要修改样式对应的标签
• 给html标签增加 class 属性，在以点+类名的形式显示,每个标签都可以设置class属性.

问题3:类命名有什么注意事项？

• 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

问题4: 类选择器可以应用到不同类型的标签吗?

• 可以

2.3 id选择器

问题1:id选择器有什么作用?id选择器的前缀是什么?

• 通过id属性值，找到页面中带有这个id属性值的标签，设置样式
• #号.
• #id名{属性:属性值;属性:属性值;} 例如 #box{ color: green;};

问题2:id 选择器和类选择器的区别？

• id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！后期搭配Javascript连用
• id选择器以 # 开头
• 类选择器可以看做人的名字,可多人使用,修改样式中用的最多.
• 类选择器以 . 开头

2.4 通配符选择器

问题1:通配符选择器使用什么符号定义?有什么作用?

• *号.
• 找到页面中所有的标签，设置样式

问题2:通配符选择器需要调用吗?后续有啥应用场景?

• 不需要调用,浏览器解释html的时候,会把通配符标签中定义的样式应用到页面的每一个元素中 .
• *{margin;0;padding:0;},清除标签的默认样式

3. 字体样式

3.1 字体大小

问题1:设置字体大小属性名是什么?

• font-size
• 取值 数值+px

问题2:设置字体大小的单位是什么?

• px 像素

问题3:谷歌浏览器默认文字大小是多少

• 16px

3.2 字体粗细

问题1:设置字体粗细属性名是什么?取值分别对应什么?

• font-weight
• 关键字(normal|bold) 纯数字(400不加粗|700加粗)

问题2:实际开发中推荐使用哪种方式设置字体的粗细？

• 纯数字

问题3:使用纯数字设置字体粗细需要单位吗？

• 不需要加单位

3.3 字体样式

问题1:设置字体样式属性名是什么?取值分别对应什么?

• font-style
• 正常（默认值）：normal 倾斜：italic

问题2: font-style 的应用场景是什么？

• 把 em i默认的斜体改为不倾斜.font-style: normal;

3.4 字体系列

问题1:常见字体系列有哪些?

• 无衬线字体（sans-serif） 应用场景:网页中大多采用无衬线字体
• 衬线字体（serif） 应用场景:报刊书籍中应用广泛
• 等宽字体（monospace） 应用场景:一般用于程序代码编写，有利于代码的阅读和编写

问题2:设置字体系列属性名是什么?

• font-family

问题3:windows系统默认的字体系列是哪个?

• 微软雅黑 Microsoft YaHei

3.5 样式层叠问题

相同选择器设置相同的属性,此时样式会层叠（覆盖），写在最下面的会生效.

3.6 字体连写

问题1:字体连写属性的属性名是什么？

• font

问题2:连写属性的编写顺序是什么？能够随意调整顺序吗？必须保留什么属性?

• font: font-style font-weight font-size font-family;
• 各个属性之间用空格隔开
• swsf （稍微舒服–是我师傅）
• 不能随意颠倒顺序
• 必须保留font-size font-family属性

4. 文本样式

4.1 文本缩进

属性名：text-indent

问题1:text-indent属性有什么作用?

• 设置文本段落首行缩进

问题2:em有多大?

• 当前标签(元素)1个文字大小，1em=1font-size

4.2 文本水平对齐方式

属性名：text-align

问题1: 设置文本水平对齐方式有几种？

• 三种 left|center|right

问题2:text-align 是设置哪个方向上的文本对齐？

• 水平方向对齐方式

4.3 文本装饰

属性名：text-decoration

问题1:text-decoration 能够给文本增加哪些装饰？

• underline 下划线
• line-through 删除线
• overline 上划线
• none 默认值 无装饰线

问题2:如何取消a标签默认的下划线

• text-decoration: none;

4.4.1 水平居中方法总结1

问题1:text-align : center 能让那些元素水平居中？

• 文本
• span标签 、a标签(行内元素)
• input标签、img标签(行内块元素)

问题2:text-align : center 需要给以上元素的什么设置?

• 父元素
• text-align : center设置文本水平居中

4.4.2水平居中方法总结2

问题1:如何设置div、p、h（大盒子）水平居中?

• margin : 0 auto
• 盒子水平居中

问题2:margin : 0 auto设置盒子水平居中有什么注意事项?

• 当前元素盒子必须有固定的宽度
• 直接给当前元素本身设置即可

5. 行高

5.1 行高介绍及常见应用

属性名：line-height

问题1:line-height有什么作用

• 控制一行的上下行间距(控制文本行与行之间的间距)

问题2:行高有几部分组成?分别是什么?

• 3部分 上间距. 文本高度. 下间距.

问题3:如何设置单行文本垂直居中?

• line-height与当前盒子的高度相等即可

问题4:网页精准布局时,如何取消上下间距?

• line-height:1

5.2 行高与字体连写

如果同时设置了行高和font连写，注意覆盖问题

书写顺序如下:

font: font-style font-weight font-size/line-height font-family;

font: italic 700 20px/1.5 楷体;
在实际开发中 行高不跟单位 表示的什么意思? 
以文字大小的 1.5 倍作为行高
当前文字大小的1.5倍 20*1.5= 30;
1 在实际开发中 如果父元素指定了字体大小  行高就是: 当前文字大小*1.5  20*1.5= 30;
2 在实际开发中 如果子元素也指定了字体大小 行高就是: 当前子元素文字大小*1.5 30*1.5=45;

6 .常见颜色取值

属性名:

• 文字颜色：color
• 背景颜色：background-color

属性值:

7. 选择器进阶

7.1 后代选择器 重点

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

问题1:后代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开

• 选择器1 选择器2{属性:属性值;属性:属性值;}
• 空格隔开

问题2:后代选择器最终选中的元素是父元素还是子元素?

• 子元素
• 后代选择器选中子孙后代

7.2 子代选择器

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

问题1:子代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开

• 选择器1> 选择器2{属性:属性值;属性:属性值;}
• >隔开

问题2:子代选择器最终选中的元素是父元素还是子元素?

• 子代选择器最终选择的是子元素—>亲儿子

7.3 并集选择器

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

问题1:并集选择器的语法格式是什么？元素之间使用什么符号分开？

• 选择器1,选择器2{属性:属性值;属性:属性值;}
• 元素之间使用,隔开,最后一个选择器的后面不用加逗号

问题2:并集选择器可以使用基础选择器或者复合选择器吗?

• 可以.
• 并集选择器通常一行写一个,提高代码可读性.

7.4 交集选择器

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

问题1:交集选择器的语法格式是什么？选择器之间需要分隔吗?

• 选择器1选择器2 { 属性:属性值;属性:属性值;}
• 不需要分隔.

问题2:交集选择器中如果有标签选择器,标签选择器写在哪里呢?

• 标签选择器必须写在最前面

7.5 链接伪类选择器 重点

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

E:link     	  未访问的链接(把没有点击过的(访问过的)链接选出来)
E:visited     已访问的链接(访问过的链接)
E:hover       鼠标经过时的连接
E:active      鼠标按下未弹起时的链接

问题1:伪类选择器的语法格式是什么,他的作用是什么?

• 选择器:hover{属性:属性值;}

问题2:书写:hover的时候有什么注意事项?

• :号的前面与后面都不能用空格哟

8. Emmet语法

作用：通过简写语法，快速生成代码,提高编码效率

常用的语法如下:

补充生成带顺序的结构:div{$}*3

9. 背景相关属性

9.1 背景颜色

问题1:设置背景颜色使用哪个属性,快捷键是?

• background-color:背景颜色 快捷键:bgc

问题2:背景颜色属性的默认值是什么?

• transparent(透明色) rgba(0,0,0,0)

问题3:背景颜色属性为rgba格式时第四个值表示什么意思?

• 透明度,默认是0,透明度的区间是0-1

9.2 背景图片

应用场景:网页的logo 装饰图片 超大背景图 精灵图

问题1:设置背景图片使用哪个属性,快捷键是?

• background-image:背景图片 快捷键:bgi

问题2:背景图片属性的属性值格式是什么样的？

• background-image:url(图片名称)

问题3:背景图片可以撑开盒子吗?

• 背景图片不可以撑开盒子.

问题4:背景图片和背景色的显示层级是?

• 背景图片在上,背景色在下

9.3 背景平铺

问题1:设置背景平铺使用哪个属性,快捷键是?

• background-repeat:背景平铺 快捷键:bgr

问题2:在使用背景图片时，默认背景是平铺的吗？

• 默认是平铺的

问题3:背景平铺有哪些属性,有Z轴吗？

• repeat|no-repeat|repeat-x|repeat-y

9.4 背景位置

问题1:设置背景位置使用哪个属性,快捷键是?

• background-position:背景位置 快捷键:bgp
• background-position:水平方向 垂直方向

问题2:方位名词分别对应哪些方位?

• 水平方向:left / right / center
• 垂直方向:top / bottom / center

问题3:背景位置属性的取值有哪些？

• 方位名词
• 精确单位(数字+px[坐标])
• 混合单位(第一个取值表示水平，第二个取值表示垂直)

9.5 背景连写

问题1:背景相关属性连写的属性名是？

• background

问题2:背景相关属性连写有顺序要求吗？推荐写法是?

• 没有顺序要求
• background:color image repeat position;
• 各个属性之间使用空格隔开

.png)]

9.6 img标签和背景图片的区别

img标签可以撑开盒子,一般展示重要的图片,比背景图要清晰

背景图片不可以撑开盒子.(需要设置盒子的宽高),超大的图片和logo以及精灵图

10. 元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如div独占一行，比如一行可以显示个span。

10.1 块级元素

问题1:块级元素的display属性的属性值是？

• display：block

问题2:块级元素有什么特点?

• 独占一行（一行只能显示一个）
• 宽度默认是父元素的宽度，高度默认由内容撑开
• 可以设置宽高
• 可以存放其他行内元素和块级元素 文本

问题3:块级元素的代表标签有哪些？

• div、p、h系列、ul、li、ol、dl

**注意事项:**文字类块级元素不能放其他块级元素,专注于文本存放（h1~h6、p）,特别不能使用h系列 p包含div标签

10.2 行内元素

问题1:行内元素的display属性的属性值是？

• display：inline

问题2:行内元素有什么特点?

• 一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高
• 只能容纳文本或其他行内元素

问题3:行内元素的代表标签有哪些？

• span a em 等

10.3 行内快元素

问题1:行内块元素的display属性的属性值是？

• display：inline-block

问题2:行内块元素的显示特点有哪些？

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

问题3:行内块元素的代表标签有哪些？

• input button textarea

10.4 元素显示模式转换

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

三种转换模式代码:

• display: block 转换为块元素
• display: inline-block 转换为行内块元素
• display: inline 转化为行内元素（使用较少）

11. HTML嵌套规范注意点

问题1:块元素可以嵌套哪些元素?有什么注意事项?

• 文本、块级元素、行内元素、行内块元素等等
• p标签中不要嵌套div、p、h等块级元素 h系列标签也一样.

问题2:a标签可以嵌套哪些元素?有什么注意事项?

• a标签可以嵌套任意元素
• a标签不能嵌套a

二、 CSS 三大特性

继承性 层叠性 优先级（权重）

1. 继承性

1.1 继承性的介绍

问：继承性的特性是什么？有哪些常见的属性可以继承

• 子元素有默认继承父元素的某些样式（子承父业）

• 文本属性 字体属性 行高 颜色属性

  1.color

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

  3.text-indent、text-align

  4.line-height

div的宽度是块元素自带的特点，并不是继承父元素的宽度

1.2 继承的小应用

好处：可以在一定程度上减少代码
常见应用场景：

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

1.3 继承失效的特殊情况

1. a标签的color会继承失效
2. h系列标签的font-size会继承失效
3. div的高度不能继承，但是宽度有类似于继承的效果

2. 层叠性

相同选择器设置相同的样式就会出现样式层叠

问题1:如果给同一个标签设置了相同的属性，此时样式会出现什么情况？

• 会层叠覆盖，写在最后的会生效

问题2:如果给同一个标签设置了不同的样式，此时样式会出现什么情况？

• 会层叠叠加，共同作用在标签上

注意点:当样式不冲突时,要先考虑优先级,才能通过层叠性去进行判断

3. 优先级

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

问题1:优先级比较公式是怎样的？

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

问题2:!important能提升继承的优先级吗？

• 不能

问题3:继承的优先级是最高还是最低?

• 只要是继承优先级最低

权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

问题1:复合选择器权重叠加计算的公式是怎样的？

问题2:权重叠加计算每一级之间会有进位问题吗?

• 不会有进位问题。

如果都是继承，谁离他本身近，谁生效

三、 盒子模型

标签=元素=盒子

1. 盒子模型的介绍

问题1：如何理解盒子？

• 网页中每一个标签都可以理解为盒子，通过盒子的视角来进行网页布局
  问题2：盒子模型一共有几个部分组成？分别是什么？
• 四部分组成
• 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

1.1 内容的宽度和高度

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

问题1：设置盒子模型内容区域大小可以通过什么属性设置？

• 宽度:width 高度:height

1.2 border相关属性介绍

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

问题1:边框可以设置哪些样式?

• border-width:边框粗细，单位是 px
• border-style:solid 实线 | dashed 虚线 |dotted 点线
• border-color:边框颜色

问题2:边框连写属性名是什么?连写有顺序要求吗?

• border
• 没有顺序要求
• 如：border : 10px solid red

问题3:如何给盒子单独设置某个方向的边框?

• border-top: 1px solid #000; 设置上边框
• border-right: 1px solid #000; 设置右边框
• border-bottom: 1px solid #000; 设置下边框
• border-left: 1px solid #000;设置左边框

1.3 盒子实际大小初级计算公式

问题1:盒子实际大小初级计算公式是如何进行计算的?

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

问题2:边框会影响盒子实际大小吗? 如何解决?

• 会影响盒子大小
• 手动在内容减去(手动内减)
• 测量盒子内容大小时,不测量边框.

1.4 内边距（padding）-介绍

问题1:padding的作用是什么?

• 设置 边框 与 内容区域 之间的距离

问题2:padding取值有几种,分别表示什么含义?

• 四种
• padding: 5px; 上下左右都是5px
• padding: 5px 10px; 上下 5px 左右10px
• padding: 5px 10px 20px; 上5px 左右10px 下 20px
• padding: 5px 10px 20px 30px; 上右下左(顺时针)

问题3:padding可以单独设置某个方向的内边距吗?

• 可以;
• padding-top: 10px;
• padding-right: 20px;
• padding-bottom: 30px;
• padding-left: 40px;

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

问题1:盒子实际大小终极计算公式是如何进行计算的?

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

问题2 padding会影响盒子实际大小吗?如何解决?

• 会影响盒子实际大小
• 手动在内容中减去（手动内减）
• 利用CSS3盒子模型属性 box-sizing: border-box;

1.6 CSS3盒模型（自动内减）

问题1:实际开发中,如何解决border paddding撑大盒子问题?

方法一:

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

方法二:

• 自动内减
• 给盒子设置属性 box-sizing : border-box ;

1.7 外边距（margin）- 介绍

问题1:margin的作用是什么?

• 设置盒子与盒子之间的距离

问题2:margin取值有几种,分别表示什么含义?

• 四种
• margin: 5px; 上下左右都是5px
• margin: 5px 10px; 上下 5px 左右10px
• margin: 5px 10px 20px; 上5px 左右10px 下 20px
• margin: 5px 10px 20px 30px; 上右下左(顺时针)

问题3:margin可以单独设置某个方向的外边距吗?

• 可以;
• margin-top: 10px;
• margin-right: 20px;
• margin-bottom: 30px;
• margin-left: 40px;

1.8 margin单方向设置的应用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mUyY4Qmo-1664294437287)(assets/1629186801703.png)]

1.9清除默认内外边距

问题1: 为什么要清除内外边距

• 浏览器会默认给部分标签设置默认的margin和padding，
• 清除内外边距可以避免默认样式对布局的干扰

问题2:清除内外边距的解决方法?

淘宝方法:

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}

京东方法:

* {
 	margin: 0;
 	padding: 0;
}

2、一些关于盒子的现象

2.1 外边距的正常现象

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

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

 <div class="box1"></div><div class="box2"></div>

	div {
            display: inline-block;
            width: 300px;
            height: 300px;
        }

        .box1 {
            background-color: red;
            margin-right: 100px;
        }

        .box2 {
            background-color: pink;
            margin-left: 100px;
        }

2.2 外边距折叠现象 – ① 合并现象

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

问题1:请描述垂直布局的块级元素合并现象? 解决方法是什么?

• 上面的盒子有 margin-bottom，下面的盒子有 margin-top，取最大值
• 解决方法:只给其中一个盒子设置margin即可

---

2.3 外边距折叠现象 – ② 塌陷现象

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

问题1:请描述互相嵌套的块级元素塌陷现象?

• 互相嵌套的块级元素,子元素设置margin-top 会作用在父元素上

问题2:视频老师里介绍几种解决办法,分别是什么?,推荐使用哪种?

• 解决方法:
  • 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
  • 给父元素设置overflow：hidden(推荐使用)
  • 转换成行内块元素
  • 设置浮动

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

水平方向:设置margin和padding布局中有效！(左右)

垂直方向:设置margin(上下)和padding(上)布局中无效！

如果想要行内元素垂直方向生效,转换为块级和行内块元素就可以啦,或者使用行高

2.5 不会撑大盒子的特殊情况(扩展)

不会撑大盒子的特殊情况（块级元素）

问题1:如果子盒子没有设置宽度，此时宽度默认是多少?

• 宽度默认是父盒子的宽度
  问题2:在什么情况下padding或者border不会撑大盒子?
• 盒子没有指定 width / height 的属性。

四、 CSS布局-浮动

1、结构伪类选择器

作用：根据元素在HTML中的结构关系查找元素.(根据文档结构来选择器元素)

1.1 结构伪类选择器-查找单个

问题1: 结构伪类选择器有什么应用场景?

• 常用于查找某父级选择器里面的子元素

问题2: 结构伪类选择器的优势是什么?

• 减少对于HTML中类名的依赖，有利于保持代码整洁

问题3:学习几个结构伪类选择器,分别是什么?

• 4个
• 重点是**E:nth-child(n)**{}
  

1.2 结构伪类选择器-查找多个

问题1:nth-child 的 n可以写哪些值?

• 数字 关键字 公式
• n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
• n可以是关键字: even 偶数，odd 奇数
• n可以是公式:如果n是公式，则从0开始计算

问题2:nth-child 的 n 的可以使用哪些关键字？分别代表什么含义？

• even 偶数 / odd 奇数

问题3:nth-child 中可以使用 n 吗？表示什么含义？能用其他字母吗？

• 可以使用n,表示选中所有的孩子,不能使用其他字母

n的注意点：

• . n为：0、1、2、3、4、5、6、……

2. 通过n可以组成常见公式

公式	功能
2n even	偶数
2n + 1 2n - 1 odd	奇数
5n	5、10、15…
n + 5	从第 5 个开始（包含第 5 个）一直到最后
-n + 5	前 5 个（包含第 5 个）

1.3 nth-of-type结构伪类选择器(了解-扩展)

`:nth-child`与`:nth-of-type`区别

`E:nth-child(n)`:首先根据 `:nth-child(n)` 找到孩子，再去看前面的 `E` 是否匹配

`E:nth-of-type`(n):首先看 `E` 指定的元素，之后再去看 `:nth-of-type` 的第几个孩子

```html
<div class="box">
        <h1>变红</h1>
        <p>变粗变红</p>
        <p>变细</p>
 </div>

.box p:nth-child(1) {
      color: red;
}
.box p:nth-of-type(1) {
    color: red;
    font-weight: 700;
 }

2、伪元素

伪元素基本介绍

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

伪元素是由CSS模拟出来的标签效果,而不需要HTML标签,可以简化HTML结构.

问题1:::before 和 ::after 会在什么位置创建元素？

• ::before 在父元素内容的最前面插入元素；
• ::after 在父元素内容的最后面插入元素。

问题2:伪元素必须要指定什么属性?

• content属性

问题3:伪元素创建出来的元素属于什么显示模式?

• 行内元素

3、标准流

• 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素.简单理解就是标签(元素)按照默认的方式进行显示.

问题1:标准流中块级元素的排版规则是？

• 从上往下、垂直布局、独占一行

问题2:标准流中行内/行内块元素的排版规则是？

• 从左往右、水平布局、空间不够自动换行

4、浮动

4.1 浮动的介绍

可以让多个块级盒子(div)水平排列成一行，实现两个盒子的左右对齐

问题1:浮动的作用是什么？

• 早期作用：文字环绕
• -现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右,同时也可以解决行内块元素之间的空隙

问题2:浮动的语法怎么写?

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

4.2 浮动的特点

1. 浮动元素会脱离标准流(脱标)
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素会受到上面元素边界的影响
5. 浮动元素会一行显示并且元素顶部对齐,可以设置宽高(行内块相似特性)
6. 浮动的元素不能通过text-algin:center;和margin:0px auto;进行水平居中

扩展补充:css书写顺序

为什么要使用书写顺序:这样写浏览器解析页面速度更快

• 注意点:咱们是写完了代码在去调整规范

0.定位

1.浮动/display

2.盒子模型:margin padding border 宽度 高度背景色

3.文字样式 text font line

5、清除浮动

5.1 清除浮动的介绍

问题1:清除浮动的含义是什么？

• 清除浮动带来的影响

问题2:如果子盒子全部浮动，父盒子的高度能被撑开吗？为什么？

• 不能
• 子盒子浮动后会脱标,一旦脱标,不占位置.

问题3:清除浮动的目的是什么?

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

5.2 清除浮动的方法

5.2.1 直接设置父元素高度

问题1:直接给父元素设置高度有什么优缺点？

• 优点：简单粗暴，方便.
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块.

---

5.2.2 额外标签法

问题1:额外标签法如何使用?

• 1.在父元素内容的最后添加一个块级元素;
• 2.给添加的块级元素设置 clear:both;

问题2:额外标签法有什么优缺点？

• 优点:通俗易懂.书写方便 W3C推荐.
• 缺点:添加无意义的标签,让页面的HTML结构变得复杂.

---

5.2.3 单伪元素清除法(父级添加)

问题1:单伪元素清除浮动的代码是什么?

.clearfix::after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

5.2.4 双伪元素清除法(父级添加)

问题1:双伪元素清除浮动的代码是什么?

.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

5.2.5 给父元素设置overflow : hidden

直接给父元素设置 overflow : hidden;方便简洁.

5.2.6 小结

清除浮动方法总结:

1. 直接设置父元素高度

2. 额外标签法

3. 单伪元素清除法(推荐)

4. 双伪元素清除法(推荐)项目中推荐使用

5. 给父元素设置overflow : hidden 案例推荐使用

   拓展：BFC解释

   通俗理解：BFC 是一个独立的布局环境,可以理解为一个存在于页面上单独的容器,有他自己的摆放规则,不会影响其他盒子

五、CSS布局-定位

1、定位

1.1 定位的应用场景介绍

问题1:一个完整的网页布局有几部分组成, 各自特点分别是什么?

• 标准流
  • 块级元素独占一行 → 垂直布局
  • 行内元素/行内块元素一行显示多个 → 水平布局
• 浮动
  • 让多个块级元素一行显示或者左右对齐.
  • 让多个块级盒子水平布局就用浮动
• 定位
  • 可以让元素自由的摆放在网页的任意位置
  • 可以让盒子始终固定在屏幕中的某个位置
  • 一般用于 盒子之间的层叠情况

问题2:定位的常见应用场景是什么？

• 可以让盒子始终固定在屏幕中的某个位置
• 解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上

1.2 定位的基本使用

问题1:定位有哪两部分属性构成?各自有什么作用?

• 定位方式:用于指定元素的定位方式，通过 position 属性设置
• 偏移值:根据定位方式确定最终位置，通过 top、bottom、left、right 四个属性设置

问题2:定位方式有几种,偏移值有方向呢?

• 4种
• 静态定位:static
• 相对定位:relative
• 绝对定位:absolute
• 固定定位:fixed
• 水平方向:left、right
• 垂直方向:top、bottom

问题3:定位的使用步骤是什么?

1 设置定位的方式：position

2 设置偏移值：水平+垂直就近各取一个

2、 静态定位

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

问题1:静态定位的属性值是什么?

• position:static

问题2:静态定位能通过偏移值属性进行移动吗？

• 不能，静态定位的元素就是默认的标准流情况.

3、 相对定位

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

问题1:相对定位的属性值是什么?

• position: relative;

问题2:相对定位的特点是什么?
1.相对定位的元素他还是占有原来的位置

2.相对定位的元素他是针对于自己的左上角来进行定位

3.相对定位的元素他是会保留之前的元素 显示模式

4.相对定位的元素他不脱离标准流

4、 绝对定位

拼爹型定位，相对于非静态定位的父元素进行定位移动.

问题1:绝对定位的属性值是什么?

• position: absolute;

问题2:绝对定位是否需要配合方位属性实现移动？

• 需要配合方位属性实现移动

问题3:绝对定位默认相对于谁进行移动位置?

• 默认相对于浏览器可视区域进行移动

问题4:绝对定位的盒子会脱标吗？

• 会脱标，不在占有原来的位置,脱标之后类似于行内块元素.

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

绝对定位相对于谁移动？

1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
2. 祖先元素中有定位 → 相对于 最近的 带有定位 的祖先元素进行移动

5、 固定定位

固定定位（fixed）是相对浏览器的可视窗口来定位移动；

可以在浏览器的页面滚动时,元素位置保持不变.

问题1:固定定位position的属性值是什么？是否需要配合方位属性实现移动？

​ fixed, 需要配合方位属性实现移动.

问题2:固定定位的元素相对于谁进行移动？
​ 相对于浏览器可视区域进行移动

问题3:固定定位的元素在网页中是否占位置？

​ 在页面中不占位置 → 已经脱

6、子绝父相介绍

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

问题1:子绝父相的含义是什么？

• 子元素：绝对定位
• 父元素：相对定位

问题2:子绝父相的应用场景是什么？

• 让子元素相对于父元素进行自由移动

问题3:子绝父相有什么好处?

• 父元素是相对定位，则对网页布局影响最小.

• 父级使用相对定位：

  • 不脱标，在标准流中占据空间
  • 绝对定位的儿子们都参考父亲进行定位

• 子级使用绝对定位：

  • 脱标，不影响其他元素的摆放
  • 自己则相对父级任意摆放位置

6.1 子绝父绝特殊场景

问题1:子绝父绝在什么场景下会使用?

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

原因:

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

6.2 子绝父相水平居中

注意:绝对定位的盒子**不可以使用 margin: 0 auto; **实现水平居中.

问题1:绝对定位的盒子实现水平居中的步骤是什么？

1. left: 50%; 向右移动到父盒子宽度的一半；
2. margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半(transform：translateX（-50%）；)

6.3 子绝父相水平垂直居中

问题1:绝对定位的盒子实现水平垂直居中的步骤是什么？

1. left: 50%; 向右移动到父盒子宽度的一半；
2. margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半；
3. top: 50%; 向下移动到父盒子高度的一半；
4. margin-top: -高度的一半; 利用负数向上移动子盒高度的一半。
   • left: 50%;
   • top: 50%;
   • transform: translate(-50%, -50%);.

7、 元素的层级关系

问题1: 标准流、浮动、定位元素之间的层级关系是什么样？

​ 标准流 < 浮动 < 定位

问题2: 不同定位元素之间的层级关系是什么样？
​ 相对、绝对、固定默认层级相同
​ 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

更改定位元素的层级

问题1: 通过什么属性可以修改定位元素的层级？需要加px单位吗?

z-index：数字；默认都是0。

四、CSS装饰

1、垂直对齐方式

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

问题1:设置行内/行内块元素垂直对齐方式的属性是什么？
​ vertical-align,只对行内/行内快元素有效,块级元素无效.

​ vertical-align: baseline | top | middle | bottom;

问题2:垂直对齐方式的常见取值有哪些？

• baseline: 默认,基线对齐.
• -top: 顶部对齐.
• middle: 中部对齐. 重点
• bottom: 底部对齐.

vertical-align 可以解决的问题

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

2、 光标类型

问题1:光标类型属性的属性名是什么？
​ 属性名：cursor

问题2:光标类型属性的常见属性值有哪些？

• default:默认值,通常就是箭头

• pointer:小手效果,提示用户可以点击 重点

• move:十字光标,提示用户可以移动

• text:工字型,提示用户可以选择文字

• not-allowed:禁止,提示用户

3、 边框圆角

问题1：边框圆角的属性的属性名是什么？
border-radius
问题2：常见的取值有哪些？
数字+px 百分比

3.1 边框圆角的常见应用

问题1：如何画一个圆形？

1. 盒子必须是正方形
2. 设置 → border-radius:50% 重点

问题2：如何画一个圆角矩形(胶囊按钮)

1. 盒子要求是长方形
2. 设置 → border-radius：盒子高度的

3.2 用CSS画三角形技巧

问题1:CSS画三角形实现原理是什么
​ 利用盒子边框完成

问题2:用CSS画三角形的步骤是什么呢？

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

4、溢出部分显示效果

问题1：设置溢出部分显示效果的属性名是什么？
​ 属性名：overflow

问题2：设置溢出部分显示效果的常见属性值有哪些？

​ visible: 默认值,溢出部分可见.

​ hidden:溢出部分隐藏 重点

​ scroll:无论是否溢出,都显示滚动条

​ auto:根据是否溢出,自动显示或隐藏滚动条.

4.1 元素本身隐藏属性

问题1:设置元素隐藏的常见属性是什么

1. visibility：hidden
2. display：none

问题2:设置元素本身显示与隐藏的常用代码是什么？

1. 元素隐藏 → display：none 重点
2. 元素显示 → display：block 重点

问题3:visibility: hidden 和 display：none 有什么区别？

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

4.2 元素整体透明度(扩展)

问题1:设置元素整体透明度属性名是什么?

• 属性名：opacity

问题2:取值是多少?

• 取值0-1之间, 1：表示完全不透明, 0：表示完全透明.

5、 表格边框合并

问题1:让表格单元格之间边框进行合并，可以使用什么属性完成？

​ 边框合并 → border-collapse：collapse

6、 选择器拓展

6.1链接伪类选择器

问题1:选中超链接的不同状态，常用哪些伪类选择器？

/* 未访问的连接* */
a:link {}
/* 已访问的连接 */
a:visited {}
/* 鼠标经过时的连接 */
a:hover {}   重点
/* 鼠标按下弹起时的连接 */
a:active {}

问题2:选中超链接的不同状态，常用哪些伪类选择器？

按照LVHA顺序书

6.2 焦点伪类选择器

问题 1:选中表单控件获取焦点的状态，可以使用什么伪类选择器？

​ :focus { }

6.3 属性选择器

问题1:选中页面中所有的文本框，使用属性选择器如何实现呢？

input[type="text"] { }

7、背景图片

问题1：设置背景图片大小的属性是什么？
background-size：宽度 高度；

问题二：与之前学习的background属性的连写？

• background: color image repeat position/size;

注意点

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

1. 要么单独的样式写连写的下面
2. 要么单独的样式写在连写的里面

8、文字阴影效果

问题1:文字阴影的属性是什么？

• text-shadow

问题2：文字阴影的取值常见的有哪些？

阴影可以叠加设置，每组阴影取值之间以逗号隔开

9、盒子阴影效果

问题1：盒子阴影的属性是什么？

• box-shadow

问题2：盒子阴影的取值参数有哪些？

10、过渡效果

问题1：过渡属性的属性名是什么？

• transition

问题2：过渡属性的常见取值有哪些什么？

• 过渡属性名：all:所有能过渡的属性都过渡、具体属性名
• 过渡的时长：数字+s

问题3： 过渡属性给谁设置？
• 过渡属性给需要过渡的元素本身加

注意点：

1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
   ① 给默认状态设置，鼠标移入移出都有过渡效果
   ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

五、拓展

1、精灵图

• 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
• 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用精灵图的步骤：

1. 创建一个盒子
2. 设置盒子大小为小图片大小
3. 设置精灵图为盒子的背景图片
4. 将小图片左上角坐标 取负值，设置给盒子的background-position：x y

2、网页与网站

• 网页：相当于是每页纸。网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等。
• 网站：相当于一本书籍。提供特定服务的一组网页集合。例如：百度、淘宝、京东等；
• 多个同主题网页整合在一起，就称之为网站。

3、骨架结构标签

3.1 DOCTYPE文档说明

• 文档类型声明，告诉浏览器该网页的 HTML版本

注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

3.2 网页语言

• <html lang="en">标识网页使用的语言
• 作用：搜索引擎归类 + 浏览器翻译
• 常见语言：zh-CN 简体中文 / en 英文

3.3 字符编码

<meta charset="UTF-8">标识网页使用的字符编码

• 作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
• 常见字符编码：
  1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
  2. GB2312：6000+ 汉字
  3. GBK：20000+ 汉字
• 注意点：开发中 统一使用 UTF-8 字符编码 即可

4、SEO三大标签

• SEO（Search Engine Optimization）：搜索引擎优化
  1. title：网页标题标签
  2. description：网页描述标签
  3. keywords：网页关键词标签
• 作用：让网站在搜索引擎上的排名靠前
• 提升SEO的常见方法：
  1. 竞价排名
  2. 将网页制作成html后缀
  3. 标签语义化（在合适的地方使用合适的标签）
  4. …不归前端人员管

5、ico图标

• 场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
  

<link rel="shortcut icon" href="icon图标路径" type="image/x-icon">

6、版心

• 场景：把页面的主体内容约束在网页中间
• 作用：让不同大小的屏幕都能看到页面的主体内容
• 版心类名常用：container、wrapper、w 等
• 代码：

.container{
	width: 1200px;
	margin:0 auto;
}