HTML基础标签与CSS样式
HTML基础标签
标签属性
属性 标签的附加价值和特性 可以通过设置属性值的方式 让标签的某一方面展示行为发生改变
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
属性的格式和书写:
1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 任何标签的属性都有默认值，省略该属性则取默认值。
4. 属性采用键值对的书写方式 key="value"
例子:
<a href="https://www.baidu.com/"></a>
属性名称 href
属性值 "https://www.baidu.com/"
base标签
< . base> 标签为页面上的所有链接规定默认地址或默认目标。
base 写到 之间
< . base target=“_blank”> 把所有的连接 都默认添加 target=“_blank”
特殊字符(转义符号)
让浏览器能够理解 非排版意图 的格式和行为 HTML容许使用特殊字符进行转义行为
转义符对照表(.https://tool.oschina.net/commons?type=2)
| 特殊字符 | 描述 | 转义符 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
注释标签
HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：
<!-- 注释语句 --> ctrl + / 或者 ctrl +shift + /
释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
文本格式化标签(小标签)
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
| 标签 | 描述 |
|---|---|
| b 和 string | 文字以 粗体 方式显示 |
| i 和 em | 文字以 斜体 方式展示 |
| s 和 del | 文字以 |
| u 和 ins | 文字以 下划线 方式展示 |
b i s u 只有表现形式 strong em del ins 的语义更强烈
图片标签img
单词缩写 image(图像)
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
<img src="图像URL" width='图片宽度' height='图片高度' alt='图片描述'>
属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像路径 |
| alt | 文本 | 图片的描述和替代文本 |
| width | 数值(默认单位px) | 图片的宽度 |
| height | 数值(默认单位px) | 图片的高度 |
| title | 文本 | 鼠标悬停显示的内容 |
| border | 数字(非常规) | 设置图片默认边框的宽度 |
列表系列
一系列内容以横列队列 的形势中展现 列表最大的特点就是 整齐 、整洁、 有序.
无序列表 ul>li
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yIMpA15x-1665112495841)(G:\学习资料\十指波\一、HTML CSS\4 网页标签和css样式\课件笔记\assets/1591344548924.png)]
PS:
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性 可以通过CSS修改默认样式
有序列表 ol > li
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
和UL无序列表的表现性质很相似 不同的是 索引器 是有序的数字 用到的地方比较少
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Poi1l6TN-1665112495842)(G:\学习资料\十指波\一、HTML CSS\4 网页标签和css样式\课件笔记\assets/1591344872340.png)]
自定义列表 dl>dt+dd
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6yZilwj5-1665112495845)(G:\学习资料\十指波\一、HTML CSS\4 网页标签和css样式\课件笔记\assets/1591344953660.png)]
div标签 (盒子)
div标签是没有语义的 是DIV+CSS时代的核心标签 单纯进行内容标签的容纳
div是 division 的缩写 意思是 分割 分区 我们可以利用DIV来给页面划分不同的区域 呈现不同内容
语法:
<div>
<p><span>some text.</span>some other text.</p>
</div>
span标签
span标签是没有语义的 通常来组合行内元素，以便通过样式来格式化它们。
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
语法:
<p><span>some text.</span>some other text.</p>
CSS (Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
三种样式表总结（位置）
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHA4Mxm2-1665112495846)(G:\学习资料\Html博客\img\1.png)]
在上面的样式规则中:
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。
CSS (Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
三种样式表总结（位置）
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 基本为0 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
选择器（重点）
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtBANQ7y-1665112495847)(assets/1591429091621.png)]
我们如何把羊群分类 黑 白 灰
选择器干啥的？ 选择标签用的
这就用到基础选择器组：
CSS基础选择器
标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
标签选择器 可以把某一类标签全部选择出来 div span
类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
命名规范
1. 命名需要是具备语义性的单词，不能用 数字 拼音 符号
正确示范 ： wrap description title content
错误示范 : aaaa a1 $we 4tdds
2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名 注意: 书写风格必须统一 不容许出现 _ -一起使用的情况 推荐使用 -
正确示范 : header-nav content-left slide-bar
错误示范 : headernav slideBar ContentLeft
3. 命名需要进行适当的缩写, 单词连接层级不要超过4层
正确示范 : head-tit_ico
错误示范 : header-title-left-logo-icon
多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="melon green fz20">西瓜</div>
<div class="melon cyan">冬瓜</div>
<div class="melon yellow">南瓜</div>
id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
通配符选择器一般用于DEMO页面的统一清除默认margin 和 padding 其他地方应用很少
CSS字体样式属性
font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
| 相对长度单位 | 说明 |
|---|---|
| px | 像素单位 以像素点个数为基础 最常用的单位 |
| em | 相对于当前对象内文本的字体尺寸 |
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:“微软雅黑”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
PS:
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。
方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t7NFwNaU-1665112495849)(assets/1591430218015.png)]
可以通过escape() 来测试属于什么字体。
| 字体名称 | 英文名称 | 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 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
PS:
数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
font:合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
CSS外观属性
color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7 8像素左右就可以了。
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I2FwnzUC-1665112495850)(assets/1591430931994.png)]
DIV 是最常用的块元素 规规矩矩 方方正正 很好管理 被人们称为 “可靠的同志” 但是体格庞大 独占一行
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sF2AQArD-1665112495851)(assets/1591431024729.png)]
行内元素是通常集体出没 能够排成行伍 训练有素 整齐划一
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
PS:
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
- 链接里面不能再放链接。
块级元素和行内元素区别
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素（inline-block）
行内块元素的特点： 同时具备行内元素和块元素的特性
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度, 宽度，行高、外边距以及内边距都可以设置。
注意: 在行内元素中有几个特殊的标签——、、 这些标签虽然可以设置宽度高度 但是在现代浏览器内特性默认展示模式为 行内(inline) 元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uruvoXXq-1665112495852)(assets/1591431225761.png)]
标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
盒子模型（CSS重点）
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
盒子模型（Box Model）
首先，我们来看一张图，来体会下什么是盒子模型。
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
width 元素宽度
width用来给元素设置宽度 注意: 只有块(block)元素或者行内块(inline-block)元素才能够设置
width: 100px;
height 元素宽度
height用来给元素设置高度 注意: 只有块(block)元素或者行内块(inline-block)元素才能够设置
height: 100px;
盒子边框（border）
边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。
语法：
border : border-width || border-style || border-color
边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
盒子边框写法总结表
| 设置内容 | 样式属性 | 常用属性值 |
| 上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
| 下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
| 左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
| 右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
| 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green; /*下边框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注意： 后面跟几个数值表示的意思是不一样的。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3个值 | padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
关于盒子宽度下列正确的是（）
(A) 盒子宽：就是width的大小
(B) 盒子宽： padding-left + width + padding-right
© 盒子宽： border-left + width + border-right
(D) 盒子宽： border-left+ padding-left + width + padding-right + border-right
w 100 padding 10 border 5 ? 实际大小 ？ 130
3关于盒子高度下列正确的是（）
(A) 盒子高：就是height的大小
(B) 盒子高：padding-top +height + padding-bottom
© 盒子高：border-top + height + border-bottom
(D) 盒子高：border-top + padding-top +height + padding-bottom + border-bottom
**4 ** 关于根据下列代码计算 盒子宽高下列说法正确的是（）
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}
(A) 宽度为200px 高度为200px
(B) 宽度为352px 高度为306px
© 宽度为302px 高度为307px
(D) 宽度为302px 高度为252px
外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
- 必须是块级元素。
- 盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}
文字盒子居中图片和背景区别
- 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改为 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */
- 插入图片 我们用的最多 比如产品展示类
- 背景图片我们一般用于小图标背景 或者 超大背景图片
section img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
}
清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案： 避免就好了。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。
盒子模型布局稳定性
开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。
但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin
原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
怪异盒子模型
怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换
select {
box-sizing: border-box; /* 怪异盒子模型 */
box-sizing: content-box; /* 标准盒子模型 */
}
怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度
两种盒子模型区别
主要区别在于盒子的整体宽度高度计算方式不同
- 用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。
- 原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。
- 可以同时设置 box-sizing属性来使用这一特性，是其改变border宽度也不影响其他元素；
- box-sizing:简单理解就是盒子大小基于什么计算的;
盒子模型相关知识点补充说明
高度样式设置auto
图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算
同行宽度问题
一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度 无法完整放入的元素会被挤下一行展示
内外边距问题
- 外边距垂直方向会合并 选最大值 , 水平方向会进行叠加
- 外边距如果父容器没有边界(硬性边界,边框,内边距) 就会产生穿透效果 子元素的外边距会穿透父元素生效
- 内外边距都只能设置为整数 不要设置带小数的 边距 长宽
行高与高度
当行高与高度相等的时候 文本垂直居中
CSS 背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | |
| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景尺寸 | |
| background-size | 背景尺寸 |
背景颜色(color)
语法：
background-color : hex(16进制) | rgb | rbga
背景图片(image)
语法：
background-image : none | url (url)
参数：
none : 无背景图（默认的）
url : 使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
小技巧： 我们提倡 背景图片后面的地址，url不要加引号。
背景平铺（repeat）
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
背景位置(position)
语法：
background-position : length || length
background-position : position || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
背景附着
语法：
background-attachment : scroll | fixed
参数：
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。
背景尺寸
语法：
background-size : width height;
单位 px | % | cover
参数：
width 设置背景图片宽度
height 设置背景图片高度
单位:
px 根据px数值设定
% 根据容器宽度高度为100%参考设置
cover 等比例铺满
说明：
单独设置一个参数为 width , height会等比缩放
背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景大小
background: transparent url(image.jpg) repeat-y scroll 50% 0/cover;
背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
记忆技巧：
交集选择器 是 并且的意思。 即…又…的意思
比如： p.one 选择的是： 类名为 .one 的 段落标签。
用的相对来说比较少，不太建议使用。
并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
记忆技巧：
并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
他，在一起， 在一起 一起的意思
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
子代选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
CSS 三大特性
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 就近原则
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
CSS最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
CSS权重特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
权重是可以叠加的
比如的例子：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
注意：
1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
- 继承的 权重是 0
总结优先级：
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
- 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现
行高的测量
行高我们利用最多的一个地方是： 可以让一行文本在盒子中垂直居中对齐。
做法就是： 文字的行高等于盒子的高度。 line-height = height
vertical-align 垂直对齐模式
以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;
以前我们还讲过让文字居中对齐，是 text-align: center;
但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。
vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。
vertical-align : baseline |top |middle |bottom |sub
设置或检索对象内容的垂直对其方式。
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LX8bov74-1665112495854)(assets/1498467742995.png)]
图片、表单和文字对齐
所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
去除图片底侧空白缝隙
有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法就是：
-
给img vertical-align:middle | top等等。 让图片不要和基线对齐。
-
给img 添加 display：block; 转换为块级元素就不会存在问题了。
溢出的文字隐藏
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
white-space:自动换行
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
text-overflow 文字溢出
| 值 | 描述 |
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…）
注意一定要首先强制一行内显示，再次和overflow属性 搭配使用
多行文本超出隐藏
display: -webkit-box; /* -webkit-inline-box; 行内元素*/
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 控制在第几行的结尾进行显示 ...*/
overflow: hidden;
/*高度 宽度必须规定好 不然...之后一行 也会展示出来*/
opacity 透明
opacity 属性设置元素的不透明级别(0-1)。 opacity: value|inherit;
| 值 | 描述 |
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| inherit | 应该从父元素继承 opacity 属性的值。 |
div {
opacity: .5;
}
PS: IE8 以及以下浏览器 使用opacity 需要写为
filter: Alpha(opacity=50); 0-100
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
伪娘
类 .one
伪类 :link
为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}
链接伪类选择器
-
:link /* 未访问的链接 */
-
:visited /* 已访问的链接 */
-
:hover /* 鼠标移动到链接上 */
-
:active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
非常用复合选择器
-
element+element : 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。
-
element1~element2: 选择器匹配出现在 element1 后面的 element2。
element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。
p+a { /* 紧跟在p标签之后的a标签 */ color: black; } .des~p { /* .des同父级下排在.des之后的所有p 和+不同 并不需要紧跟*/ color: red; }
结构(位置)伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式 - nth-of-type(n): 匹配同类型中的第n个同级兄弟元素 n可以是一个数字，一个关键字，或者一个公式
- :first-of-type: 匹配同类型中的第一个同级兄弟元素 没有() 参数
- :last-of-type: 匹配同类型中的最后一个同级兄弟元素 没有() 参数
- :only-of-type 匹配同类型中的唯一一个指定类型元素 没有() 参数
- :not(s) 匹配每个元素是不是指定的元素/选择器 s为选择器 selector的缩写
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
p:nth-of-type(3) { /* 选择第3个同类别的兄弟元素 n 代表 第几个的意思 */
background-color: #f00;
}
p:first-of-type { /* 选择每个p元素是其父级的第一个p元素*/
color: skyblue;
}
p:last-of-type { /* 选择每个p元素是其父级的最后一个p元素 */
color: pink;
}
p:only-of-type { /* 选择每个p元素是其父级的唯一p元素 */
color: yellow;
}
p:not(.desc) { /* 选中除了类名为desc的其他p标签*/
color: green
}
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器 规定 值都加 引号
/* 获取到 拥有 该属性的元素 */
div[class^='font'] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$='footer'] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*='tao'] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
</div>
伪元素选择器（CSS3)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
/* 首字特殊样式 */
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素 注意: IE9下 不支持:: 所以保证兼容可以写为 :
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
#CSS精灵技术（sprite） 小妖精 雪碧
精灵技术产生的背景
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tjAoUIV3-1665112495855)(assets/image-20200617182805484.png)]
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
精灵技术本质
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOtYIAEm-1665112495855)(assets/image-20200617182852289.png)]
精灵技术的使用
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SKE7iMhS-1665112495856)(assets/Wed, 17 Jun 2020 182939.png)]
.bg-tp1 {
width: 20px; height: 20px;
background: url('css_sprites.png') -10px -10px;
}
.bg-tp2 {
width: 20px; height: 20px;
background: url('css_sprites.png') -50px -10px;
}
.bg-tp3 {
width: 20px; height: 20px;
background: url('css_sprites.png') -10px -50px;
}
.bg-tp4 {
width: 20px; height: 20px;
background: url('css_sprites.png') -50px -50px;
}
制作精灵图
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做，不过前端也要自食其力不要过度依赖美工。
我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
表格 table (会写)
表格的表现形式为 横行纵列 多行多列为表格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gcdDDuuN-1665112495856)(assets/image-20200618171449543.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8PDSEwl-1665112495857)(assets/image-20200618171529038.png)]
创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。
注意：
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像一个容器，可以容纳所有的元素
表格属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | leftcenterright | 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x)#xxxxxxcolorname | 不赞成使用。请使用样式代替。规定表格的背景颜色。 |
| border | px | 规定表格边框的宽度。默认为 border=“0” 不赞成使用 |
| cellpadding | px**%* | 规定单元边沿与其内容之间的空白。 |
| cellspacing | px**%* | 规定单元格之间的空白。 |
| width | *%*pixels | 规定表格的宽度。 |
表头标签
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
<table border="1" align="right">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<th>张三</th>
<td>男</td>
<td>119</td>
</tr>
<tr>
<th>小花</th>
<td>女</td>
<td>17</td>
</tr>
</table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vHYEqmvd-1665112495858)(assets/image-20200618172808371.png)]
表格结构（了解）
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：
<thead></thead>：用于定义表格的头部。
必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
PS: thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P8fRCuqf-1665112495859)(assets/image-20200618173810544.png)]
表格标题 caption
表格的标题： caption
定义和用法
caption 元素定义表格标题。
<table>
<caption>我是表格标题</caption>
</table>
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
合并单元格(难点)
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
<table width="400" height="100" border="1">
<tr>
<td>张三</td>
<td>12</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2">不明</td>
</tr>
<tr>
<td>王五</td>
<td>33</td>
<td>男</td>
</tr>
</table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RlCR10g7-1665112495859)(assets/image-20200618175118996.png)]
<table width="400" height="100" border="1">
<tr>
<td>张三</td>
<td>12</td>
<td rowspan="3">男</td>
</tr>
<tr>
<td>王五</td>
<td>33</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5v5hW536-1665112495860)(assets/image-20200618175241531.png)]
相关样式(CSS) 仅了解
table, th, td {
border: 1px solid blue;
}
请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-34wqPMuv-1665112495860)(assets/image-20200618175430831.png)]
折叠边框 border-collapse
border-collapse 属性设置是否将表格边框折叠为单一边框：
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid blue;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hRyUfH6H-1665112495861)(assets/image-20200618175723994.png)]
| 值 | 描述 |
|---|---|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
单元格边框距离 border-spacing
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式 border-collapse: separate ）。
table{
border-collapse:separate;
border-spacing:10px 50px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YTH7cTbD-1665112495861)(assets/image-20200618180541156.png)]
标题位置 caption-side
该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
caption {
caption-side: bottom
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9KGGfNo-1665112495862)(assets/image-20200618180811984.png)]
| 值 | 描述 |
|---|---|
| top | 默认值。把表格标题定位在表格之上。 |
| bottom | 把表格标题定位在表格之下。 |
| inherit | 规定应该从父元素继承 caption-side 属性的值。 |
总结表格
-
表格提供了HTML 中定义表格式数据的方法。
-
表格中由行中的单元格组成。
-
表格中没有列元素，列的个数取决于行的单元格个数。
-
实际开发中表格表现基本使用成熟UI库实现
表单标签 (常用)
表单目的是为了收集用户信息。
在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E5m336oH-1665112495862)(assets/image-20200618181401612.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZSREaoc3-1665112495863)(assets/image-20200618181440560.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iGucYxFJ-1665112495863)(assets/image-20200618181507023.png)]
表单组成部分
表单控件：input select textarea button
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：label
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域： form
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input 控件 (最常用)
在上面的语法中，<input> 标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input >标签还可以定义很多其他的属性，其常用属性如下表所示。
| 常用属性 | 属性值 | 描述 |
|---|---|---|
| type | 见下表 | 控制input的类型 |
| name | 自定义 | 控件名称 作为提交数据时的 key |
| value | 自定义或输入 | input控件中的默认或用户输入的文本 |
| size | 正整数 | input在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 规定控件容许输入的最大字符数 |
| required | required | 必填 |
| readonly | readonly | 内容只读 |
| placeholder | 文本 | 用户输入提示文本 |
| multiple | multiple | 文件上传可选多文件 |
type属性分类
| 常用类型属性 | 描述 | 补充 |
|---|---|---|
| text | 单行文本输入框 | 明文 |
| password | 密码输入框 | 密文 |
| radio | 单选按钮 | 单选 |
| file | 输入字段和 "浏览"按钮，供文件上传。 | multiple 属性可以开启多文件选择 |
| checkbox | 复选框 | 多选 |
| submit | 提交按钮 | 提交按钮会把表单数据发送到服务器 |
| button | 普通按钮 | 多数情况下，用于通过js联动 |
| reset | 重置按钮 | 重置按钮会清除表单中的所有数据 |
| image | 图像形式的提交按钮。 | 自定义按钮 用的少 |
| hidden | 隐藏的输入文本 | 输入不显示 防止窥屏 |
| number 新增 | 仅限数字 | 只能输入数字 |
| date 新增 | 日期选择 | 年/月/日 |
| tel 新增 | 电话号码 | 非有效限制 |
| time 新增 | 时间选择 | 00:00 |
| email 新增 | 电子邮件 | 非有效限制 |
| search 新增 | 查询框 | 可点击x清除内容 |
label标签(理解)
label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for 属性规定 label 与id值一致的表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea控件(文本域)
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YIODi3aF-1665112495864)(assets/image-20200618185056084.png)]
下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
- <select></select>中至少应包含一对<option></option>。
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
- action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 - method
用于设置表单数据的提交方式，其取值为get或post。 - name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
浮动(float)
普通流(normal flow)
这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
常规文档流
浮动
定位
浮动(float)
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-icWR5JQu-1665112495865)(assets/image-20200620173235971.png)]
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。
什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器 {
float:属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
浮动详细内幕特性
浮动脱离标准流，脱标 不占位置，会影响标准流。浮动只有左右浮动。
1. 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
2.一个父盒子里面的子盒子，如果需要所有子元素一行对齐显示，就需要所有子元素都进行浮动。
3. 元素添加浮动后，元素会变为块元素。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
总结： 浮动 —>
浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的， 是否占有位置
- 浮动
脱离文档流的，原来还在文档流的元素，会向上移动 - 元素浮动以后，会尽量向页面的左上或是右上漂浮，直到遇到
父元素的内边距或者其他元素的浮动元素 - 如果浮动的元素上边是一个没有浮动的块级元素，则浮动的元素不会超过块级元素
- 浮动的元素不会超过上边的兄弟元素
- 浮动会更改元素的显示方式 :
block
版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
最普通的，最为常用的结构
两列左窄右宽型
通栏平均分布型
清除浮动
靡不有初，鲜克有终。
既然搭建了高架桥和空轨 自然也要有个终点站，不然跑着跑着脱轨了就很尴尬。
为什么要清除浮动
我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 但是，你不能说浮动不好 。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响
如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0e1oDSP4-1665112495865)(assets/image-20200620174511620.png)]
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
内容溢出时处理 overflow
overflow 属性规定当内容溢出元素框时发生的事情。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。）
代表网站： 百度、淘宝网、网易等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r65QEswP-1665112495866)(assets/image-20200620174746776.png)]
注意： content:“” 尽量不带点
使用before和after双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等
进阶安全版
使用方法：
.clearfix{
zoom:1;
}
.clearfix:after,.clearfix:before{
content:"";
display:table;
}
.clearfix:after{
clear:both;
visibility:hidden;
font-size:0;
height:0;
}
定位(position)
如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。
定位原理上可以帮助你快速精准 脱离文档流束缚的情况下将元素放在你想放置的位置。就跟精确制导定位系统一样，输入坐标就可以轻松搞定。
定位在网页中的应用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwIGQnno-1665112495866)(assets/image-20200622170642102.png)]
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
- 定位模式(定位的分类)
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
- 边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
静态定位(static)
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
PS： 静态定位其实没啥可说的。
静态定位唯一的用处： 就是 取消定位。 position: static;
相对定位 relative
神游物外，谓形体不动而心神向往，如亲游其境，以精神相交。
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2FsbnBj-1665112495867)(assets/image-20200622172335757.png)]
注意：
- 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
- 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）
如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。
绝对定位absolute
哥白尼提出的“日心说”，有力地打破了长期以来居于宗教统治地位的“地心说”，实现了天文学的根本变革。
绝对定位的位置参考为相对定位父级的左上角定点
绝对定位于相对定位设置 left right时 都会保留自身外边距
绝对定位通过边偏移移动位置，但是它完全脱标，完全不占位置。
绝对定位元素的宽度高度100% 是相对于定位父级来的 不是结构父级
绝对定位与相对定位不同的地方在于
- 绝对定位完全脱标 相当于自建一个新的层级
- 绝对定位的移动相对坐标原点为 相对定位父级的左上角原点
- 没有相对定位父级的情况下 以浏览器窗口显示区域(window view)左上角为定位原点
- 有相对定位父级(绝对、固定或相对定位)的父元素/祖先的情况下 以相对定位父级的左上角为定位原点
- 绝对定位的宽度百分比 继承自相对定位父级 并不继承于 结构父级
子绝父相
布局中最常见的就是 结构父级为相对定位(relative)，需要定位的子元素为绝对定位（absolute） 。 因为一般父元素需要在常规文档流中占据位置，子元素又需要将其作为定位父级来确定原点参考系（绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位）。 所以用的最多的就是 父级为relative 子元素为 absolute的 子绝父相 组合形式。
当然子绝父相只是最常用的组合 定位父级也可以是 absolute fixed
子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dqN0uHzL-1665112495867)(assets/image-20200622174207998.png)]
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
-
首先left 50% 父盒子的一半大小
-
然后走自己外边距负的一半值就可以了 margin-left。
另一种方法比较省事
设置 margin为 auto
top left right bottom 四个方向设置为0
让外边距自动拉扯元素位置进行平衡
固定定位fixed(认死理型)
固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
- 固定定位的元素跟父亲没有任何关系，只认浏览器(window view)。
- 固定定位完全脱标，不占有位置，不随着滚动条滚动。
ie6等低版本浏览器不支持固定定位。
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cejulbyQ-1665112495868)(assets/image-20200622174710722.png)]
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2; font-weight: 700
注意：
-
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
-
如果取值相同，则根据书写顺序，后来居上。
-
后面数字一定不能加单位。
-
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
四种定位总结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
定位模式转换
跟 浮动一样， 元素添加了 绝对定位(absolute)和固定(fixed)定位之后， 元素模式也会发生转换， 都转换为 块(block)模式。
定位使用注意
定位元素会脱标并且独立新开文档流层级，高度依赖定位会导致浏览器压力大，并且在后期维护中因为定位元素并不能跟随文档流进行流动，所以维护成本高。
实际开发中 能用文档流+盒子模型处理的布局 轻易不使用浮动 能用浮动处理的布局 不要使用定位 。 只有在最关键的时刻才使用定位进行布局调整。
初始化样式表
reset 重置性样式表
original author : Eric Meyer https://meyerweb.com/
重置浏览器标签的样式表,因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
normalize 标准性样式表
original author : Nicolas Gallagher https://github.com/necolas/normalize.css/wiki
Normalize.css 是一个可定制的 CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的 [CSS 重置样式集。
- 保护有用的浏览器样式而不是去掉他们。
- 一般化的样式：为大部分HTML元素提供。
- 修复浏览器自身的bug并保证各浏览器的一致性。
- 优化css可用性：用一些小技巧。
- 解释代码：用注释和详细的文档来。
注意：Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
Normalize 对比 Reset
1. Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。
2. Normalize.css 修复了浏览器的bug
它修复了常见的桌面端与移动端浏览器的bug。这往往超出了Reset所能做到的范围。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到的部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。
量图工具 pxcook https://assets.fancynode.com.cn/pxcook/client/mac/PxCook_v3.9.940_build_201911131134.dmg)
教程文档
https://www.fancynode.com.cn/pxcook/docs
css3 新增样式
CSS3 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式，利用css3 我们可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。
border-radius 圆角属性
这个属性允许你为元素添加圆角边框
语法:
border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;
border-radius: top-left top-right bottom-right bottom-left
/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y
复合与单例写法对比
border-radius:2em;
/*对应单例写法为*/
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 2em 1em 4em / 0.5em 3em;
/*对应单例写法为*/
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
1-4个值所对应
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
x 方向 % 对应容器宽度
y方向 % 对应容器高度
| 描述 | 值 |
|---|---|
| 定义弧线半径 | length |
| 使用%定义角落的形状。 | % |
border-image 边框图片 (了解)
这个属性允许你为元素添加图片作为边框
语法:
border-image: source slice width outset repeat|initial|inherit;
border-image: url(border.png) 30 round;
| 值 | 描述 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 路径 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。 |
border-shadow 盒子阴影
这个属性允许你为盒子添加阴影效果
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式(内/外)
box-shadow: 10px 10px 20px 25px #ccc inset;
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 参数 | 描述 |
|---|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 | 阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 | 阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部 |
| blur | 可选。模糊距离 | 此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊 |
| spread | 可选。阴影的大小 | 此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小 |
| color | 可选。阴影的颜色。rgba hex rgb | 此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 | 此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影 |
CSS3 渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
线性渐变
从一个方向到另一个方向的 水平 垂直 斜线 渐变
线性渐变 - 从上到下（默认情况下）
background-image: linear-gradient(#e66465, #9198e5);
线性渐变 - 从左到右
background-image: linear-gradient(to right, red , yellow);
线性渐变-左上到右下
background-image: linear-gradient(to bottom right, red, yellow);
任意角度
background-image: linear-gradient(angle, color-stop1, color-stop2);
background-image: linear-gradient(-90deg, red, yellow);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
多种颜色
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
/*彩虹色*/
使用透明度 transparent
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
重复线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变
中心向外成圆形扩散渐变
background-image: radial-gradient(shape, size at position, start-color, ..., last-color);
shape 形状 circle(圆形) 或 ellipse(椭圆形) 默认值为 ellipse 椭圆
普通模式
background-image: radial-gradient(red, yellow, green);
分配比例
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
设置形状 :
background-image: radial-gradient(circle, red, yellow, green);
默认为椭圆 ellipse
重复渐变
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
CSS3 transform 2D变幻
注意 transform无法作用于 行内元素
容许元素在2D平面上进行变幻 包括 平移(translate) 旋转(rotate) 缩放(scale) 倾斜(skew)
语法
transform: translate(20px,30px) rotate(30deg) scale(3,4) skew(20deg,30deg);
transform-origin: x-axis y-axis z-axis;
translate 平移
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(50px,100px);
rotate 旋转
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: rotate(30deg);
scale 缩放
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform: scale(2,3);
skew 倾斜
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
transform: skew(30deg,20deg);
CSS3 transition 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
语法
transition: property duration timing-function delay;
property 过渡的属性名称 width left 等数值型或 color颜色
duration 过渡需要的时间 s ms
timing-function 过渡速度曲线
delay 延时时长 m ms
timing-function 曲线属性
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 了解 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
cubic-bezier即为贝兹曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BoJ3q7C6-1665112495868)(assets/1044952-20161130172404584-1510385710.jpg)]
示例:
.case {
width: 100px;
height: 20px;
background-color: red;
transition: .5s ease 1s;
}
.case:hover {
width: 300px;
height: 100px;
background-color: blue;
}
CSS3 帧动画 amimation @keyframes
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的
@keyframes 关键帧
通过@keyframes设置自定义名称的动画关键帧 在动画关键节点设置数值
- animationName：动画名称，开发人员自己命名；
- percentage：为百分比值，可以添加多个百分比值；
- properties：样式属性名称，例如：
color、left、width等等。
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
//or
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}
animation 播放动画
animation-name
它是用来设置动画的名称，可以同时赋值多个动画名称，用
,隔开：
.selector {
animation-name: none | IDENT[,none | IDENT]*;
}
animation-duration
它是用来设置动画的持续时间，单位为
s，默认值为0：
.selector {
animation-duration: <time>[,<time>]*;
}
animation-timing-function
和
transition-timing-function类似：
.selector {
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>);
}
animation-delay
它是来设置动画的开始时间，单位是
s或者ms，默认值为0：
.selector {
animation-delay: <time>[,<time>]*;
}
animation-iteration-count
它是来设置动画循环的次数，默认为
1，infinite为无限次数的循环：
.selector {
animation-iteration-count: number | infinite
}
animation-direction
它是来设置动画播放的方向，默认值为
normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：：
.selector {
animation-direction: normal | alternate [, normal | alternate]*;
}
animation-play-state
它主要是来控制动画的播放状态：
running代表播放，而paused代表停止播放，running为默认值：PS: animation-play-state 无法通过animation复合书写 只能单例设置 与 transform-origin 一样
.selector {
animation-play-state:running | paused [, running | paused]*;
}
animation 复合写法
它是
animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写：
.selector {
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}
.selector {
animation: move
}
CSS 文本补充
css2
| 属性 | 描述 | 属性值 |
|---|---|---|
| color | 设置文本颜色 | rgb HEX rgba |
| direction | 设置文本方向。 | ltr(左->右) rtl(右->左) |
| letter-spacing | 设置字符间距 | px |
| line-height | 设置行高 | px |
| text-align | 对齐元素中的文本 | left center right justify (两端对齐) |
| text-decoration | 向文本添加修饰 text-decoration: underline wavy red; 红色波浪下划线 wavy 波浪线 | none (默认 无效果) underline (下划线) overline(上划线) line-through ( 删除线) |
| text-indent | 缩进元素中文本的首行 | em px |
| text-transform | 控制元素中的字母 | capitalize 每个单词首字母大写 uppercase 全部大写 lowercase 全部小写 |
| vertical-align | 设置元素的垂直对齐 | baseline 基线 默认 middle 中线 super 文本上标 sub 文本下标 top 顶端对齐最高元素顶端 text-top 元素顶端与父元素字体顶端 bottom 底端与最低元素底端 text-bottom 底端与父元素字体底端 |
| white-space | 设置元素中空白的处理方式(主要控制换行) | normal 默认 忽略空白 pre 保留空白 nowrap 文本不换行 pre-wrap 保留空白 正常换行 pre-line 合并空白 保留换行符 |
| word-spacing | 设置字间距 | px em |
css3
| 属性 | 描述 | 属性值 |
|---|---|---|
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | left right justify center |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | clip 剪裁 ellipsis 省略号 |
| text-shadow | 向文本添加阴影。text-shadow: h-shadow v-shadow blur color; | h-shadow 水平偏移 v-shadow 垂直偏移 blur 阴影模糊值 color 颜色 |
| word-break | 规定非中日韩文本的换行规则。 | break-all 单词内换行 keep-all 只能在半角空格或连字符处换行 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | normal 单词内不换行 break-word 单词内可换行 |
单行文本展示省略号
.text {
width: 200px;
text-overflow: ellipsis; /*超出部分省略号*/
overflow: hidden; /*内容超出宽度隐藏*/
white-space: nowrap; /*文本不换行显示*/
}
CSS3 弹性布局 flex
摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
布局的传统解决方案，基于盒状模型，依赖
display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，时至今日 flex已经成为主流布局方式 ， 尤其在移动端 小程序等方面表现出色。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局, 行内元素也可以使用 Flex 布局。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基础概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKboesM3-1665112495869)(assets/bg2015071004.png)]
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做
main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做
main size，占据的交叉轴空间叫做cross size。
容器属性
一共有6种css属性用于调整flex 布局
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）默认横向 row。
.box { flex-direction: row | row-reverse | column | column-reverse; } row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Z8l80X0-1665112495870)(assets/bg2015071005.png)]
flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w8V8OhA4-1665112495870)(assets/bg2015071006.png)]
它可能取三个值。
（1）nowrap（默认）：不换行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GA3Lx6TI-1665112495871)(assets/bg2015071007.png)]
（2）wrap：换行，第一行在上方。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aMk2KMxS-1665112495871)(assets/bg2015071008.jpg)]
（3）wrap-reverse：换行，第一行在下方。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V94arpwO-1665112495872)(assets/bg2015071009.jpg)]
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>; }
3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-egTjNWdt-1665112495872)(assets/bg2015071010.png)]
它可能取6个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。space-evenly:每个间隙距离相等. (兼容处理:用 space-between配合before+after使用)
3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNCndHYt-1665112495873)(assets/bg2015071011.png)]
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yot9wq9t-1665112495873)(assets/bg2015071012.png)]
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。
orderflex-growflex-shrinkflex-basisflexalign-self
4.1 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item { order: <integer>; }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QIjnBD0k-1665112495874)(assets/bg2015071013.png)]
4.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item { flex-grow: <number>; /* default 0 */ }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TvKws9B2-1665112495874)(assets/bg2015071014.png)]
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item { flex-shrink: <number>; /* default 1 */ }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BHC4tOhf-1665112495875)(assets/bg2015071015.jpg)]
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */ }
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQpJoNxl-1665112495876)(assets/bg2015071016.png)]
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
web字体
字体格式
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
字体图标
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont).
字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药...
字体图标使用流程
总体来说，字体图标按照如下流程：
设计字体图标
假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图：
之后保存为svg格式，然后给我们前端人员就好了。
其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。
上传生成字体包
当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
推荐网站： http://icomoon.io
icomoon字库
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
推荐网站： http://www.iconfont.cn/
阿里icon font字库
http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！
fontello
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。
Glyphicon Halflings
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
Icons8
提供PNG免费下载，像素大能到500PX
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tp9U2Tr-1665112495876)(assets/1513132290173.png)]
下载兼容字体包
刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来就好了
当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。
字体引入到HTML
得到压缩包之后，最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。
-
首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2Fs2Da8-1665112495877)(assets/1498032122244.png)]
第一步：在样式里面声明字体： 告诉别人我们自己定义的字体
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }第二步：给盒子使用字体
span { font-family: "icomoon"; }第三步：盒子里面添加结构
span::before { content: "\e900"; } 或者 <span></span>追加新图标到原来库里面
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做
把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。
阿里图标
非阿里员工必须使用新浪微博账号或者Github登录，来储存自己需要的图标。
有一个缺点是如果你找好了所需要的图标，点击下载之后，那个图标就在购物车中消失了，就像你网购买了购物车的东西之后，该商品就从购物车中消失了一样。
这时你可以在购物车界面中新建一个项目，这样下次点开图标库还能找到以前选中的一些图标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GGycoMWm-1665112495877)(assets/image-20200702164922614.png)]
这些图标不仅可以下载图标的代码——前端工程师需要
还可以下载图标的PNG格式——UI设计师需要
还可以编辑图标的信息：比如颜色，位移，大小，旋转角度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GEZRMoh-1665112495877)(assets/image-20200702164838852.png)]
选好图标之后，点击下载，下载一个压缩包后，解压，将文件添加到项目中。
使用方法
解压好的文件 中有个名为demo_index.html的文件 点开，里面有详细的字符使用的三种方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gfdd1ZmZ-1665112495878)(assets/1772636-20190831213422905-186200377.png)]
1.Unicode 引用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kqxzCzn-1665112495879)(assets/1772636-20190831213719688-1536009748.png)]
Unicode 是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
Unicode 使用步骤如下：
第一步：拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
第二步：定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>
“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。
2.font-class 引用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zs2KPHX7-1665112495879)(assets/1772636-20190831213856881-601263346.png)]
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。
3.Symbol 引用 (了解)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iuiUDBGE-1665112495879)(assets/1772636-20190831214033933-1066239175.png)]
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤如下：
第一步：引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代码（引入一次就行）：
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
CSS高级
兼容处理
不同的用户会通过不同的浏览器访问我们的网站, 我们需要针对绝大部分主流用户浏览器进行兼容处理 . 兼容处理主要包括两种方案(优雅降级, 渐进增强) 和两种 技巧(前缀兼容与HACK兼容)
邀请用户升级浏览器
这种方式目前比较普遍 , 在用户通过老版浏览器登录网站的时候 通过服务判断用户 浏览器版本内核 从而返回升级页面. 省时省力 但是对用户不够友好
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7I3UtOf-1665112495880)(assets/image-20200703184255103.png)]
meta强制解析模式
x-ua-compatible 用来指定IE浏览器解析编译页面的model
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。
使用一行代码来指定浏览器使用特定的文档模式。
2、在一些情况下，我们需要限定浏览器对文档的解析到某一特定版本，或者将浏览器限定到一些旧版本的表现中。可以用如下的方式： 使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析。 3、为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。 4、多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。目前最实用的最新写法为
X-UA-Compatible定义浏览器的渲染方式； 如果存在客户端Chrome Frame并启用，那么浏览器访问页面会被Chrome内核渲染（这一点没太大意义，因为你开发的项目不能要求用户在客户端来安装Chrome Frame）；也就是说IE浏览器变身Chrome是可以的，但前提是客户端安装了Chrome Frame 使用IE内核浏览器来访问，会渲染至该浏览器的最高版本，比如你使用IE9浏览器，那么就算在兼容模式切换至IE7，但仍会渲染成IE9的样子（当然IE7浏览器是不会渲染成IE9的,不然想想都好美丽）。※ 对多核浏览器(360 搜狗)等进行强制指定渲染内核 http://se.360.cn/v6/help/meta.html
//content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。//若页面需默认用极速核，增加标签
//若页面需默认用ie兼容内核，增加标签： // 若页面需默认用ie标准内核，增加标签：兼容前缀
不同浏览器因为内核不同,针对同一条css属性的兼容支持程度也不同,我们可以通过加 兼容前缀的方式 让一些标准样式在浏览器内可以使用。
| 浏览器前缀 | 浏览器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
使用方式：
如果css样式在主流浏览器中需要加兼容前缀才能生效, 就先写兼容写法 最后写标准写法。
.selector {
-moz-box-shadow:2px 2px 5px #969696; /*firefox*/
-webkit-box-shadow:2px 2px 5px #969696; /*webkit*/
box-shadow:2px 2px 5px #969696; /*opera或ie9*/
}
关于chrome浏览器内核小知识:
chrome的内核确切的bai说是Chromium引擎，它是使用苹果公司的WebKit作为浏览器内核du原型，是WebKit内核的zhi一个分支。
Chromium引擎虽然是属于WebKit的分支，却把WebKit的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。因此Chromium引擎和其它基于WebKit的引擎所渲染页面的效果也是有出入的。基于以上原因，有的地方会把Chromium引擎跟WebKit区分开来，有的地方则直接把Chromium引擎归为WebKit都是可以的。
关于国内浏览器内核小知识:
国内浏览器内核基本为webkit内核或 chrominm引擎内核 拼接 Edge 或 IE内核形成 , 比如360浏览器就有内核切换模式, 针对css属性规则上都直接沿用了webkit内核规则, 所以国内开发以chrome为开发浏览器也是考虑这层原因。
兼容查询
学会利用工具网站 查询样式在各个浏览器的兼容情况，从而选择更合适的方案。
工具网站
地址： https://www.caniuse.com/
使用方法：
- 在输入框输入需要查询兼容性的 样式属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMKGpgAZ-1665112495880)(assets/image-20200703163608096.png)]
- 查看下方浏览器兼容表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1zssjRJ-1665112495881)(assets/image-20200703163632000.png)]
表头为不同的浏览器品牌 主要查看 IE Edge firefox chrome safari opera这几个主流浏览器的兼容情况
倒数第二行是当前用户主流浏览器版本，以黑色背景包裹。为主要兼容参考一般我们只看倒数三行的兼容情况
红色标签代表 完全不兼容
绿色标签代表 完全兼容
黄色标签代表 兼容但需要加 兼容方案
兼容方案
鼠标移入黄色版本的标签会提示兼容方案
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RgLKEjuk-1665112495881)(assets/image-20200703165946974.png)]
鼠标移入 绿色标签 (左上角有黄色图标) 时会提示添加对应的兼容前缀
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GqjT09q7-1665112495882)(assets/image-20200703170158123.png)]
随着发展 css的兼容性会越来越好 目前绝大部分css属性都是主流浏览器全兼容, CSS3样式大部分兼容IE8以上大部分浏览器。
HACK 兼容(了解)
hack兼容方式主要应对老版本IE浏览器(IE6 IE7 IE8 IE9) 进行单独样式处理
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。 类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><[endif]-->这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。这里进行简单举例 资料后配一份hack常见兼容处理方案(虽然对于当前开发环境来说基本用不上).
条件注释法:
| 注释标识 | |
|---|---|
| hello只在IE浏览器显示 | |
| hello只在IE6浏览器显示 | |
| hello只在IE6以上(包括)版本IE浏览器显示 | |
| hello只在IE8上显示 | |
| hello在IE浏览器上不显示 |
属性前缀法:
| hack | 写法 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
|---|---|---|---|---|---|---|---|---|---|---|---|
| * | *color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | N | N | Y | N | Y | N | Y | N | Y | Y |
说明：在标准模式中
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
.selector {
background-color:red; /* 所有浏览器 */
background-color:blue !important;/* 除了ie6的浏览器 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0;/*IE9, IE10*/
_background-color:green; /* 只有IE6生效 */
*+background-color:pink; /* 只有IE7生效 具体小版本有差别 */
}
选择器前缀法:
*html 前缀只对IE6生效
+html *+前缀只对IE7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
优雅降级和渐进增强（取决于需求）
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
农村包围城市的味道
先说一个简单的例子，例如先完成了页面的基本布局，没有任何特效，那么加个小动画，加个文字阴影等，就是渐进增强了
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
类似蹦极，由高处往低处下落
让一部分人先富起来带动另一部分人富起来的感觉
区别：渐进增强是向上兼容，优雅降级是向下兼容。
建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。
3D变换 transform3D
浏览器中我们除了可以实现 x y两轴的2D变换 也可以开启3D效果 3D效果经常用于一些复杂的绚丽效果展示 可以用来构建基础的3D模型空间
3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility
坐标轴
在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZhfaPHfS-1665112495882)(assets/740839-20160404190248937-1489051755.png)]
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
理解透视距离原理：
d: 3D坐标系 z轴的长度
z: 元素沿着Z轴移动的距离
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGfCPqYi-1665112495883)(assets/1498446715314.png)]
translateX(x)
仅水平方向移动**（X轴移动）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NYFhLNj1-1665112495883)(assets\1498459697576-1594020371084.png)]
主要目的实现移动效果
translateY(y)
仅垂直方向移动（Y轴移动）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGMuU8k0-1665112495884)(assets/1498459770252.png)]
translateZ(z)
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
perspective
设置3D空间的景深 也就是z轴的深度, perspective 属性只影响 3D 转换元素。
perspective: 1000px;
perspective-origin
默认情况下， 坐标系的Z轴位于父元素的水平中线与垂直中线的交界处, 我们也可以通过设置perspective-origin来调整位置
使用绝对定位样式移动元素时, 此时坐标系的X轴和Y轴以设置了相对定位的祖先元素的中点为原点
使用transform的位移样式或是相对定位样式移动元素时, 此时坐标系的X轴和Y轴以元素的中点为原点\
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8sa8ygu-1665112495884)(assets/image-20200706154532173.png)]
要注意的是, 在调整z轴的位置的时候 用户的视角也会跟着发生变化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mpBD5BG-1665112495885)(assets/image-20200706154719968.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdMrZFwg-1665112495885)(assets/image-20200706154719968.png)]
transform-style
使被转换的子元素保留其 3D 转换
transform-style: flat|preserve-3d;
| 值 | 描述 |
|---|---|
| flat | 子元素将不保留其 3D 位置。 |
| preserve-3d | 子元素将保留其 3D 位置。 |
backface-visibility （了解)
backface-visibility 属性定义当元素不面向屏幕时是否可见。
| 值 | 描述 |
|---|---|
| visible | 背面是可见的。 |
| hidden | 背面是不可见的。 |
visibility
visibility 控制一个元素是否可见
visibility: visible(默认) | hidden
设置为 hidden 时 元素不可见但是保留渲染位置 只是视觉上的看不见
注意: display:none; 实现的效果是 元素不进行渲染 在页面上不存在 与 visibility有本质区别
使用display：
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
4、visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
5、opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
filter 滤镜
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
| Filter | 描述 |
|---|---|
| none | 默认值，没有效果。 |
| blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 |
| brightness(%) | 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 |
| contrast(%) | 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：``**** **** (必须)这是设置阴影偏移量的两个 值. **** 设定水平方向距离. 负值会使阴影出现在元素左边. ****设定垂直距离.负值会使阴影出现在元素上方。查看****可能的单位.**如果两个值都是0**, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).**** (可选)这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).**** (可选)这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 **** (可选)查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用color**color**属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。 |
| grayscale(%) | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| hue-rotate(deg) | 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 |
| invert(%) | 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 |
| opacity(%) | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 |
| saturate(%) | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。 |
| sepia(%) | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| url() | URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter: url(svg-url#element-id) |
| initial | 设置属性为默认值， |
| inherit | 从父元素继承该属性 |
原图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OV6i4SJM-1665112495885)(assets/pineapple.jpg)]
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
/* 模糊 */
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mPwFXKyP-1665112495886)(assets/image-20200706155751988.png)]
img {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
/* 曝光 亮度*/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dmPLZOfx-1665112495886)(assets/image-20200706155952483.png)]
img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
/* 对比度 */
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RShTbaFY-1665112495887)(assets/image-20200706160056285.png)]
CSS 变量
css中我们可以统一设置 变量 方便页面维护
声明
变量声明的时候，变量名之前加上两根连词线（–）即可。例如：
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
/* foo 与 bar是变量名称 他们的值分别是 #7F583F 和 #f7EFD2*/
变量大小写敏感、变量名等这些参考 js 变量名规则肯定不会错，而变量名中存储的值的书写规则仍然采用 css 的规则，如： --x: 20px 30px 而不是 --x: '20px 30px' 。
变量使用：var() 函数
var() 函数是用来读取变量，如下例：
a {
--foo：#f1f2f5;
--bar: red;
color: var(--foo);
text-decoration-color: var(--bar);
}
var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。并且，第一个参数后面的全部算第二个参数，不管有多少个逗号，比如：
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
另外， var() 函数也可作为其他变量的值，但也仅作为其他变量的值使用：
html{
--primary-color: red;
--logo-text: var(--primary-color);
/* 无效 */
var(--primary-color): green;
}
变量作用域
css变量遵从 css优先级的原则 变量值会被覆盖
html {
--color: blue;
}
div {
--color: green;
}
#alert {
--color: red;
}
* {
color: var(--color);
}
<p> 我的颜色为 blue</p>
<div>我的颜色为 green</div>
<div id="alert">我的颜色为 red</div>
CSS content 计数器
CSS 计数器通过一个变量来设置，根据规则递增变量。
使用计数器自动编号
CSS 计数器根据规则来递增变量。
CSS 计数器使用到以下几个属性：
counter-reset- 创建或者重置计数器counter-increment- 递增变量content- 插入生成的内容counter()或counters()函数 - 将计数器的值添加到元素
要使用 CSS 计数器，得先用 counter-reset 创建：
以下实例在页面创建一个计数器 (在 body 选择器中)，每个
元素的计数值都会递增，并在每个
元素前添加 “Section <计数值>:”
| 属性 | 描述 |
|---|---|
| content | 使用 ::before 和 ::after 伪元素来插入自动生成的内容 |
| counter-increment | 递增一个或多个值 |
| counter-reset | 创建或重置一个或多个计数器 |
1. counter-reset
该属性定义计数器的名称，可以同时定义多个计数器，定义数字时代表初始值，缺省默认为0：
div.count{
counter-reset: count1 count2;
}
/* count1 和 count2 是计数器名称 自定义命名*/
如上代码定义两个计数器count1和count2，初始默认为0。
2. counter-increment
该属性接收两个参数，第一个参数代表计数器的名称，第二个代表每次递增的值，缺省时默认为1
div.count:before{
counter-increment: count1 2;
}
此行代码定义计数器count1单次自增值为，此时计数器默认初始值为0+2=2；若这里将数字2缺省，则默认自增值为1，此时计数器初始值为0+1=1。
- counter()/counters()
该方法为计数器调用方法，接收两个参数，第一个参数为计数器名称，第二个为数值类型
cursor 鼠标指针样式
可以通过设置cursor 给元素添加鼠标移入时的样式
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（北/西）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
FC (格式化上下文)
FC的全称是: Formatting Contexts,是 W3C CSS2.1规范中的一个概念。
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
BFC
BFC(Block Formatting Contexts) 直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。
IFC
IFC(Inline Formatting Contexts) 直译为"内联格式化上下文"， IFC的line box (线框) 高度由其包含行内元素中最高的实际高度计算而来 (不受到竖直方向的padding/margin影响)。
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,便得line box宽度缩短。同个IFC下的多个line box高度会不同。
FFC
FFC (Flex Formatting Contexts) 直译为"自适应格式化上下文"，display 值为 flex 或者 inline-flex 的元素将会生成自适应容器(flex container) ，Flex Box由伸缩容器和伸缩项目组成。
通过设置元素的display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。
简单地说, Flexbox定义了伸缩容器内伸缩项目该如何布局。
GFC (了解)
后期讲响应式 自适应 和移动端布局的时候进行补充
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器 (grid container) 上定义网格定义行(griddefinition rows) 和网格定义列 (grid definition columns) 属性各在网格项目 (grid item) 上定义网格行(gridrow) 和网格列 (grid columns)为每一个网格项目(grid item)定义位置和空间。
那么GFC有什么用呢,和table又有什么区别呢?首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。
BFC形成条件
-
根元素
-
float 属性不为 none
-
position 为 absolute 或 fixed
-
display 为inline-block, table-cell, table-caption , flex， inline-flex
-
overflow 不为 visible ( hidden auto scroll )。
那BFC一般有什么用呢？比如常见的多栏布局,结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候BlochFormatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局
通俗翻译下: 形成一个完全独立的大箱子 箱子中的子元素与外部元素隔绝开来 不管内部元素怎么搞 都不会影响到外部, 内部形成一个独立的文档流。
BFC元素所具有的特性
BFC布局规则特性：
1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 计算BFC的高度时，自然也会检测浮动的盒子高度。
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的主要用途
清除浮动影响
处理外边距穿透&合并
实现两栏|三栏自适应布局
iframe 内联框架 (了解)
可以将另一个网页通过iframe框架引入到当前页面
<iframe width='200' height='200' src='http://www.baidu.com/'></iframe>
| 属性 | 值 | 描述 |
|---|---|---|
| width | px*%* | 定义 iframe 的宽度。 |
| height | px*%* | 规定 iframe 的高度。 |
| frameborder | 1 || 0 | 规定是否显示框架边框 |
| name | frame_name | 规定 iframe 的名称。 |
| scrolling | yesnoauto | 规定是否在 iframe 中显示滚动条。 |
| seamless | seamless | 规定 看上去像是包含文档的一部分。 |
| src | URL | 规定在 iframe 中显示的文档的 URL。 |
| srcdoc | HTML_code | 规定在 中显示的页面的 HTML 内容。 |
css细节技巧
padding与margin 百分比
margin和padding都可以使用百分比值的，就是 margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度
利用这个特性可以实现高度等比自适应布局，解决图片渲染导致高度不统一发生的频闪问题
视口单位(Viewport units)
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GpuxKoyh-1665112495888)(assets/1210235-20170918162531150-539160393.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rJSl9w7g-1665112495888)(assets/1210235-20170918162831821-1344168854.jpg)]
文本模糊化 & 不容许选中文本
.text {
color: transparent;
text-shadow: #111 0 0 5px;
user-select: none;
}
可编辑 contentEditable属性
contenteditable 属性指定元素内容是否可编辑。
style标签也可以放在body中，并且也可以添加contenteditable 属性，这就造成我们可以实时编辑样式表。
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
页面资源缓存问题
客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。服务端只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jNXcpiAt-1665112495888)(assets/3962242691-5c452d6477c53_articlex.png)]
对于静态文件，例如：CSS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。但是对于动态页面，就是动态产生的页面，往往没有包含 Last Modified 信息，这样浏览器、网关等都不会做缓存，也就是在每次请求的时候都完成一个 200 的请求。
为了保证用户及时能够获取到最新修改过的外链文件或者资源, 我们需要给资源添加版本号。
版本号一般以时间戳 或者 版本信息+ 时间戳
<link rel="stylesheet" href="css/reset.css?20200708200603">
固定定位的盒子靠近版心右侧对齐
跟绝对定位的盒子居中对齐原理差不多。
left 50% 然后 margin-left 版心宽度一半。
项目实战
第一步 准备开发工具&素材&图纸
-
审查布局类型 ( 上中下 | 上(左右)下 | 左右
-
找版心
-
寻找页面上的公共要素
- 字号
- 颜色
- 背景颜色 #2221ff
- 文本颜色 #ccc
- 装饰颜色
- 行高
- 间隙
- 组件
-
搭建结构
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
