1. CSS引入方式
1.1. 行内样式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名>
style其实就是标签的属性。- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
1.2. 内部样式（内嵌样式）
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
}
</style>
</head>
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。type="text/css"在html5中可以省略。
1.3. 外部样式（外链样式）
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
- link 是个单标签。
- link 标签需要放在head头部标签中，并且指定 link 标签的三个属性。
| 属性 | 作用 |
|---|---|
rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为 stylesheet，表示被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型，在这里需要指定为 text/CSS，表示链接的外部文件为 CSS 样式表。我们都可以省略 |
href | 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。 |
2. CSS选择器
2.1. 基础选择器
2.1.1. 标签选择器
2.1.2. 类选择器
- 各个类名中间用空格隔开。
- 如果想要差异化选择不同的标签，单独选择一个或某几个标签，可以使用类选择器。
- 样式点定义，结构类（class）调用，一个或多个，开发最常用。
- 多类名：给一个标签指定多个类名，从而达到更多的选择目的。
- 例如：
<div class=“red font20”>超时空要塞</div>
2.1.3. id 选择器
- Id选择器可以为标有特定id的HTML元素指定特定的样式。
- HTML元素以id属性来设置id选择器，CSS中id选择器以
＃来定义。 - Id选择器指定的样式只能在HTML文档中调用一次。
- 样式#定义，结构id调用，只能调用一次，别人切勿使用。
2.1.4. 通配符选择器
- 在CSS中，通配符选择器使用
*定义，它表示选取页面中所有元素（标签）。 - 通配符选择器不需要调用，自动给所有的元素使用样式。
- 特殊情况才使用，例如常见的情况如下：
* {
margin: 0;
padding: 0;
}
2.2. 复合选择器
2.2.1. 后代选择器
- 后代选择器又称为包含选择器，可以选择父元素里面子元素。
- 其写法就是把外层标签写在前面，内层标签写在后面，中间用
空格分隔。 - 当标签发生嵌套时，内层标签就成为外层标签的后代。
父级 子级{属性:属性值;属性:属性值;}、.class h3{color:red;font-size:16px;}
2.2.2. 子选择器
- 子元素选择器（子选择器）只能选择作为某元素的
最近一级子元素。简单理解就是选亲儿子元素。 元素1 > 元素2 { 样式声明 }、.class>h3{color:red;font-size:14px;}
2.2.3. 并集选择器
- 并集选择器可以选择多组标签，同时为它们定义相同的样式。通常用于
集体声明。 - 并集选择器是各选择器通过
英文逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。 元素1, 元素2 { 样式声明 }
2.2.4. 交集选择器
- 交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
- 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，比如：
p.one选择的是类名为.one的 段落标签 。
2.2.5. 伪类选择器
- 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第
1个，第n个元素。 - 伪类选择器书写最大的特点是用冒号表示，例如：
:hover、:first-child。
1. 链接伪类选择器
a:link、a:visited、a:hover、a:active- 注意事项
- 为了确保确保生效，请按照
LVHA的循坏顺序声明：:link、:visited、:hover、:active。 - 因为a链接在浏览器中具有默认的样式，所以我们实际工作中都需要给链接单独制定样式。
2. :focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。- 焦点就是光标，一般情况
<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。 input: focus { 样式 }。
3. CSS字体属性
font-size
font-size属性用于设置字号。p { font-size:20px; }- 可以使用相对长度单位，也可以使用绝对长度单位。
font-family
font-family属性用于设置字体。p { font-family:"微软雅黑"; }- 网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑。
- 可以同时指定多个字体，中间以
逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。p { font-family: Arial, "Microsoft Yahei", "微软雅黑"; }
常用技巧：
- 各种字体之间必须使用英文状态下的
逗号隔开。- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
- 如果字体名中包含
空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
-
为什么使用 Unicode字体？
- 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
xp系统不支持 类似微软雅黑的中文。
-
解决方案
- 方案一： 你可以使用英文来替代。 比如
font-family:"Microsoft Yahei"。 - 方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1";表示设置字体为“微软雅黑”。
- 方案一： 你可以使用英文来替代。 比如
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体。
font-weight
- 可以使用
b和strong标签是文本加粗。 - 可以使用 CSS 来实现，但是 CSS 是没有语义的。
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
font-style
- 字体倾斜除了用
i和em标签。 - 可以使用 CSS 来实现，但是 CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| italic | 浏览器会显示斜体的字体样式。 |
font
font 属性用于对字体样式进行综合设置。
| 属性 | 代码 | 取值 |
|---|---|---|
| 字体系列 | font-family | |
| 字体大小 | font-size | |
| 字体粗细 | font-weight | |
| 字体样式 | font-style | |
| 复合属性 | font: font-style font-weight font-size/line-height font-family |
- 使用
font属性时，必须按上面语法格式中的顺序写，不能更换顺序，并且各个属性间以空格隔开。 - 不需要设置的属性可以省略（取默认值），但必须保留
font-size和font-family属性，否则font属性将不起作用。
4. CSS文本属性
color：文本颜色
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
text-align：文本对齐
- 注意：是让盒子里面的内容水平居中， 而不是让盒子居中对齐。
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
line-height：行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。em是一个相对单位，就是当前元素font-size1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
text-indent：首行缩进
text-indent属性用于设置首行文本的缩进。- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。
- 建议使用
em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
text-decoration：文本装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
CSS外观属性总结
| 属性 | 代码 |
|---|---|
| 文本颜色 | color |
| 文本对齐 | text-align |
| 装饰文本 | text-decoration |
| 文本缩进 | text-indent |
| 行间距 | line-height |
5. Chrome调试工具
Chrome浏览器提供了一个非常好的调试工具，可以用来调试我们的HTML结构和CSS样式。
打开调试工具
打开Chrome浏览器，按下 F12 或者右击页面空白处 --> 检查
使用调试工具
Ctrl+滚轮可以放大开发者工具代码大小。- 左边是HTML元素结构，右边是CSS样式。
- 右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色。
Ctrl+0复原浏览器大小。- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
- 如果有样式，但是样式前面由
黄色叹号提示，则是样式属性书写错误。
6. Emmet语法
Emmet语法的前身是Zenith coding，它使用缩写来提高html/CSS的编写速度，VScode内部已经集成该语法。
快速生成HTML结构语法
- 生成标签直接输入标签名，然后按TAB键即可。例如：
div-->tab--><div></div> - 如果想要生成多个相同的标签，加上
*就可以了。例如：div*3 - 如果有父子级关系的标签，可以用
>。例如：ul > li就可以了 - 如果由兄弟关系的标签，用
+就可以了。例如div+p。 - 如果生成带有类名或者id名字的，直接写
div.demo或者div#two，然后按tab键就可以了。 - 如果生成的div类名是有顺序的，可以用自增符号
$。例如：.demo$*5。 - 如果想要在生成的标签内部写内容可以用
{}表示。
快速生成CSS结构语法
CSS基本采取简写形式即可。例如：w200 --> tab --> width: 200px; lh26 --> tab --> line-height: 26px;。
7. 快速格式化代码
方法一：Vscode快速格式化代码：Shift + Alt + F
方法二：也可以设置当我们保存页面的时候自动格式化代码：
- 文件 --【首选项】–【设置】
- 搜索 emmet.include;
- 在settings.json下的【用户】中添加以下语句：
- “editor.formatOnType”:true,
- “editor.formatOnSave”:true
- 只需要设置一次即可，以后都可以自动保存格式化代码
9. CSS的元素显示模式
9.1. 块级元素
常见的块元素由<h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li> 等，其中<div>标签是最典型的块元素。
- 块级元素的特点：
- 比较霸道，自己独占一行。
- 高度，宽度，外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。- 是一个容器及盒子，里面可以放行内或者块级元素。
注意事项
- 文字类的元素内不能使用块级元素。
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。- 同理，
<h1> ~ <h6>等都是文字类块级标签，里面也不能放其他块级元素。
9.2. 行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个行内元素。
- 高，宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意事项
- 链接里面不能再放链接。
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换下块级模式最安全。
9.3. 行内块元素
- 在行内元素中有几个特殊的标签：
<img />、<input />、<td>，他们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点
- 和相邻行内元素（行内块元素）在一行上，但是它们之间会有
空白间隙。一行可以显示多个行内块元素。 - 默认宽度就是它们本身内容的宽度。
- 高度，行高，外边距以及内边距都可以控制。
9.4、元素显示模式转换
- 特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性。例如想要增加链接
<a>的触发范围。 - 转换为块级元素：
display: block; - 转换为行内元素：
display: inline; - 转换为行内块元素：
display: inline-block;
9.5、单行文字垂直居中
CSS没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。- 解决方案：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。
- 实现原理：行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子高度，则文字会偏上；如果行高大于盒子高度，则文字会偏下。
10. CSS的背景
实际开发常见与logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）。
10.1. 背景颜色
background-color:颜色值;- 默认的值是
transparent透明的
10.2. 背景图片
background-image : url(images/demo.png);- 我们提倡背景图片后面的地址，
url不要加引号。
| 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
10.3. 背景平铺
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
10.4 背景位置
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
- 必须先指定
background-image属性 position后面是x坐标和y坐标。 可以使用方位名词或者精确单位。- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如
lefttop和topleft效果一致 - 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果
position后面是精确坐标， 那么第一个肯定是x第二的一定是y。 - 如果只指定一个数值,那该数值一定是
x坐标，另一个默认垂直居中。 - 如果指定的两个值是
精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
10.5 背景附着
- 背景附着就是解释背景是滚动的还是固定的。
- 语法：
background-attachment : scroll | fixed。
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
10.6 背景简写
background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
10.7 背景透明(CSS3)
- 语法：
background: rgba(0, 0, 0, 0.3); - 最后一个参数是alpha 透明度 取值范围 0~1之间
- 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
- 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。
11. CSS的三大特性
11.1. 层叠特性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠行原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
- 样式不冲突，不会层叠。
11.2. 继承特性（子盒子继承自己没有的父盒子样式）
- CSS中的继承：子标签汇继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。
- 子元素可以继承父元素的样式（
text-，font-，line-这些元素开头的可以继承，以及color属性）。 - 行高的继承性
body {
font: 12px/1.5 Microsoft YaHei;
}
- 行高可以跟单位也可以不跟单位。
- 如果子元素没有设置行高，则会继承父元素的行高的1.5倍。
- 此时子元素的行高是：当前子元素的文字大小的1.5倍。
11.3. CSS优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠特性。
- 选择器不同，则根据选择器权重执行。
| 选择器 | 选择器权重 |
|---|---|
继承 或者 * | 0，0，0，0 |
| 标签选择器 | 0，0，0，1 |
| 类选择器、伪类选择器 | 0，0，1，0 |
| ID 选择器 | 0，1，0，0 |
行内样式 style="" | 1，0，0，0 |
!important | 无穷大 |
注意事项
- 权重是由4组数字组成，但是不会有进位。
- 可以理解为类选择器永远大于标签选择器，ID选择器永远大于类选择器，以此类推。
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
<a>标签由浏览器制定了默认的样式。- 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
| 复合选择器 | 选择器权重 |
|---|---|
div ul li | 0，0，0，3 |
.nav ul li | 0，0，1，2 |
a:hover | 0，0，1，1 |
12. 盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位，学习好盒子模型能非常好的帮助我们布局页面。
- 盒子模型有
元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。 - 盒子里面的文字和图片等元素是
内容区域。 - 盒子的厚度我们成为 盒子的边框 。
- 盒子内容与边框的距离是内边距（类似单元格的
cellpadding）。 - 盒子与盒子之间的距离是外边距（类似单元格的
cellspacing）。
12.1 网页布局
- 先准备好相关的网页元素，网页元素基本都是盒子Box。
- 利用CSS设置好盒子样式，然后摆放到相应位置。
- 往盒子里面装内容。
网页布局的核心本质：就是利用CSS摆盒子。
12.1 盒子边框
- 边框综合设置：
border : border-width || border-style || border-color。
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框的样式：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
| border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
| border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
表格的细线边框
- 通过表格的
cellspacing="0"，将单元格与单元格之间的距离设置为0。但是两个单元格之间的边框会出现重叠，从而使边框变粗。我们可以通过css属性table{ border-collapse: collapse; }解决这个问题。 collapse 单词是合并的意思，border-collapse:collapse;表示相邻边框合并在一起。
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
</style>
12.2 内边距
padding 属性用于设置内边距， 是指边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
当我们给盒子指定 padding 值之后， 发生了 2 件事情：(1) 内容和边框 有了距离，添加了内边距。(2) 盒子会变大了。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右内边距; |
| 2个值 | padding: 上下内边距 左右内边距 ； |
| 3个值 | padding：上内边距 左右内边距 下内边距； |
| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
12.4 内盒尺寸计算（元素实际大小）
- 宽度
Element Height = content height + padding + border （Height为内容高度） - 高度
Element Width = content width + padding + border （Width为内容宽度） 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
12.4.1 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。对此我们有两种方案解决该问题：
- 测量盒子大小的时候，不量边框。
- 如果测量的时候包含了边框，则需要width/height减去边框宽度。
12.4.2 内边距会影响盒子实际大小
- 当我们给盒子指定
padding值之后，发生了两件事情：内容和边框有了距离，添加了内边距；padding影响了盒子实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。 - 对此上述问题，解决方案为：如果保证盒子跟效果图大小保持一致，则让
width/height减去多出来的内边距大小即可。 - 如果盒子本身没有指定
width/height属性，则此时padding不会撑开盒子大小。
12.5 外边距（margin）
margin 属性用于设置外边距，margin 就是控制盒子和盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin 值的简写 （复合写法）代表意思 跟 padding 完全相同。
12.5.1 块级盒子水平居中
- 外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度（width）。
- 盒子左右的外边框都设置为auto。
header { width:960px; margin:0 auto }
- 常见的写法，以下三种都可以：
margin-left: auto; margin-right: auto;margin: auto;margin:0 auto
12.5.2 文字居中和盒子居中区别
- 盒子内的文字水平居中是
text-align: center, 而且还可以让行内元素和行内块元素居中对齐。 - 让行内元素或者行内块元素水平居中，则需给其父元素添加
text-align:center样式。 - 块级盒子水平居中，左右margin 改为
auto。
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
12.5.3 插入图片和背景图片区别
- 插入图片 我们用的最多 比如产品展示类，移动位置只能靠盒模型
paddingmargin。 - 背景图片我们一般用于
小图标背景或者超大背景图片，背景图片只能通过background-position。
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
12.5.4 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认内外边距大小的也不一致。因为我们在布局前，首先要清除下网页元素的内外边距。
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
- 注意事项：
行内元素为了照顾兼容性，除了在转换为块级和行内块元素之外，尽量只设置左右内外边距，不要设置上下内外边距。因为很多情况下，设置上下内外边距是不起作用的。
12.5.5 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
(1) 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
(2) 嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。（如下图所示）
- 实践中，父元素即使没有上外边距，子元素的上外边距似乎也会塌陷。
解决方案：
- 可以为父元素定义上边框（会撑大盒子）。
- 可以为父元素定义上内边距（会撑大盒子）。
- 可以为父元素添加
overflow: hidden。（不会撑大盒子） - 还有其他方法，比如浮动（指的是子盒子）、固定，绝对定位和盒子不会有塌陷问题。
12.6 盒子模型布局稳定性
我们根据稳定性来分，建议如下：按照优先使用宽度 （width），其次使用内边距（padding），再次 外边距（margin）。
width > padding > marginmargin会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。padding会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。width没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
13. PS基本操作
因为网页美工大部分效果图都是利用PS（Photoshop）来做的，所以以后我们大部分切图工作都是在PS里面完成。
- 文件–>打开：可以打开我们要测量的图片。
Ctrl + R：可以打开标尺，或者视图–>标尺。- 右击标尺，把里面的单位改为像素。
Ctrl +加号（+）可以放大视图，Ctrl+减号（-）可以缩小试图。- 按住空格键，鼠标可以变成小手，拖动PS视图。
- 用选区拖动，可以测量大小。
Ctrl + D可以取消选区，或者在旁边空白处点击一下也可以取消选区。
14. CSS3新增内容
14.1 圆角边框（CSS3）
- border-radius 属性用于设置元素的外边框圆角。
- 语法：
border-radius: length; - radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。
- 参数值可以为数值或者百分比。
- 如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
- 如果是一个矩形，设置为高度的一半即可。
- 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角。
- 分开写：
border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。
14.2 盒子阴影（CSS3）
语法：box-shadow: h-shadow v-shadow blur spread color inset
| 参数 | 描述 |
|---|---|
| h-shadow | 必需；水平阴影的位置；允许负值。 |
| v-shadow | 必需；垂直阴影的位置；允许负值。 |
| blur | 可选；模糊距离。 |
| spread | 可选；阴影尺寸。 |
| color | 可选；阴影的颜色。 |
| inset | 可选；将外部阴影（outset）改为内部阴影。 |
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
box-shadow: 10px 10px 10px 10px rgb(0, 0, 0, .3);
}
- 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
- 盒子阴影不占用空间，不会影响其他盒子排列。
14.3 文字阴影（CSS3）
语法：text-shadow: h-shadow v-shadow blur color
| 参数 | 描述 |
|---|---|
| h-shadow | 必需；水平阴影的位置；允许负值。 |
| v-shadow | 必需；垂直阴影的位置；允许负值。 |
| blur | 可选；模糊距离。 |
| inset | 可选；将外部阴影（outset）改为内部阴影。 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 50px;
color: skyblue;
font-weight: 700;
text-shadow: 5px 5px 6px rgb((0), 0, 0, .3);
}
</style>
</head>
<body>
<div>你是阴影，我是火影。</div>
</body>
</html>
15. CSS浮动
15.1 传统网页布局的三种方式
网页布局的本质——用CSS 来拜访盒子。把盒子摆放到相应位置。
CSS提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序）：
- 普通流（标准流/文档流）
所谓标准流，就是标签按照规定好的默认方式排列。- 块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1 ~ h6、ul、ol、dl、form、table - 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em等
- 块级元素会独占一行，从上向下顺序排列。
- 浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
- 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
15.2 为什么需要浮动？
-
如何让多个块级盒子（div）水平排成一列？
- 如何实现两个盒子的左右对齐？
虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：(1) 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。(2) 它不能实现以上第二个问题，盒子左右对齐。- 总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变标签默认的排列方式。
- 浮动最典型的应用：让多个块级元素一行内排列显示。
- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
15.3 什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘。
语法：选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
15.4 浮动特性
加了浮动之后的元素，会有很多特性，需要我们掌握的。
- 浮动元素会脱离标准流（脱标）。
- 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标。
- 浮动的盒子不再保留原先的位子。
- 浮动的元素会一行内显示并且元素顶部对齐。
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
- 在一行显示，三个div都要设置浮动属性。
- 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
- 浮动的元素会具有行内块元素的特性。
- 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定。
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
- 行内元素同理。
15.5 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
(1) 浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距。
(2) 浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
- 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
- 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
15.6 浮动布局注意事项
- 浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。 - 一个元素浮动了，理论上其余的兄弟元素也要浮动。
- 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
15.7 清除浮动
15.7.1 为什么需要清除浮动？
-
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。
-
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
-
准确地说，并不是清除浮动，而是清除浮动后造成的影响。
15.7.2 清除浮动的本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
- 清除浮动的本质是清除浮动元素造成的影响。如果父盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的盒子自动监测高度。父级有了高度，就不会影响下面的标准流了。
- 语法：
选择器 { clear: 属性值; }。 - 清除浮动的策略是：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
15.7.3 清除浮动方法
(1) 额外标签法也称为隔墙法，是W3C推荐的做法。
-
额外标签法会在浮动元素末尾添加一个空的标签。例如：
<div style= “clear: both” ></div>，或者其他标签（如<br />）。 -
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。
注意事项：要求新添加的空标签必须是块级元素
(2) 父级添加 overflow 属性。
- 可以给父级元素添加overflow属性，将其属性值设置为
hidden、auto或scroll。 - 优点：代码简洁。
缺点：无法显示溢出的部分。
(3) 父级添加 after 属性。
:after方式也是额外标签法的升级版。也是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
}
.clearfix { /* IE6、7专有 */
*zoom: 1;
}
- 优点：没有增加额外的标签，结构更简单。
- 缺点：照顾低版本浏览器。
(4) 父级添加双伪元素。
- 也是给父元素添加
.clearfix:before,.clearfix:after {
content: “”;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
16. CSS定位
16.1 为什么需要定位？
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
- 定位则是可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
16.2 定位的组成
- 定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。- 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
- 定位模式：定位模式决定元素的定位方式，它通过
CSS的position属性来设置，其值可以分为四个。
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
- 边偏移：边偏移就是定位的盒子移动到最终的位置。有
top、bottom、left和right四个属性。
| 边偏移属性 | 实例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
| left | top:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
| top | top:80px | 右侧偏移量，定义元素相对于其父元素右边先的距离。 |
16.3 静态定位
- 静态定位是元素的默认定位方式，无定位的意思。
- 语法：
选择器 { position: static; } - 静态定位按照标准流特性摆放位置，它没有边偏移。
- 静态定位在布局时很少用到。
16.4 相对定位（重要）
- 相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）。
- 语法：
选择器 { position: relative; } - 相对定位的特点：（务必记住）
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）。
16.5 绝对定位（重要）
绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）。语法：选择器 { position: absolute; }
绝对定位的特点：
-
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
-
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
-
绝对定位不再占有原先的位置（脱标）。
16.6 子绝父相的由来（重要）
子级是绝对定位的话，父级要用相对定位。
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
- 总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
16.7 固定定位（重要）
固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形。
- 固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变。
- 语法：
选择器 { position: fixed; } - 固定定位的特点
- 1. 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系。
- 不随着滚动条的滚动而滚动。
- 2. 固定定位不再占有原先的位置。
- 固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
- 固定定位小技巧：固定在版心右侧位置。
- 让固定定位的盒子left: 50%。走到浏览器可视区（也可以看作版心）的一半位置。
- 让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置。
- 就可以让固定定位的盒子贴着版心右侧对齐了。
16.8 粘性定位（了解）
- 粘性定位可以被认为是相对定位和固定定位的混合。
- 语法：
选择器 { position: sticky; top: 10px; } - 粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素。（固定定位特点）
- 粘性定位占有原先的位置。（相对定位特点）
- 必须添加top、left、right、bottom其中一个才有效。
- 跟页面滚动搭配使用。兼容性较差，IE不支持。
总结：1、是否占有位置（脱标否）？2、以谁为基准点移动位置？
16.9 定位叠放次序z-index
- 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。
- 语法：选择器
{ z-index: 1; } - 叠放次序特点
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
- 如果属性值相同，则按照书写顺序，后来居上。
- 数字后面不能加单位。
- 只有定位的盒子才有
z-index属性。
16.10 定位的拓展
注意：绝对定位/固定定位的盒子不能通过设置
margin: auto设置水平居中。
- 绝对定位的盒子居中
- 加了绝对定位的盒子不能通过
margin: 0 auto水平居中，但是可以通过以下计算方法实现水平居中和垂直居中。 left: 50%;让盒子的左侧移动到父级元素的水平中心位置。margin-left: -100px;让盒子向左移动自身宽度的一半。
- 加了绝对定位的盒子不能通过
- 定位特殊特性
- 绝对定位和固定定位也和浮动类似。
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
- 脱标的盒子不会触发外边距塌陷
- 浮动元素、绝对定位（固定定位）元素的都不会出发外边距合并的问题。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
16.11 绝对定位（固定定位）会完全压住盒子
- 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字。（图片）
- 但是绝对定位（固定定位）会压住下面标准流所有的内容。
- 浮动之所以不会压住文字，因为浮动产生的目的最初是为了左文字环绕效果的。文字会围绕浮动元素
/* 如果一个盒子既有left属性也有right属性，则默认会执行left属性 同理会执行top属性 */
17. 网页布局总结
通过盒子模型，清除知道大部分html标签是一个盒子。通过CSS浮动、定位可以让盒子排列成为网页。一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
- 标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 - 浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。 - 定位
定位最大的特点是由层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
17.1 定位改变 display 属性
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding、 border、 overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
18. 元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
display显示隐藏visibility显示隐藏overflow溢出显示隐藏
18.1. display属性
- display属性用于设置一个元素如何显示。
- display: none; 隐藏对象。
- display: block; 除了转换为块级元素之外，同时还有显示元素的意思。
display隐藏元素后，不再占有原来的位置。- 后面应用及其广泛，搭配JS可以做很多的网页特效。
18.2. visibility可见性
visibility属性用于指定一个元素应可见还是隐藏。visibility：visible；元素可见visibility：hidden；元素隐藏visibility隐藏元素后，继续占有原来的位置。
18.3. overflow溢出
overflow属性制定了如果内容溢出一个元素的框（超过指定高度及宽度）时会发生什么。
-
visible：不剪切内容也不添加滚动条。 -
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉。 -
scroll：不管超出内容否，总是显示滚动条。 -
auto：超出自动显示滚动条，不超出不显示滚动条。 -
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
-
但是如果有定位的盒子，请慎用overflow：hidden。因为它会隐藏多余的部分。
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
