HTML进阶
## 表单练习
border-radius为速写属性
border-top-right-radius:0;
border-bottom-right-radius:0;
溢出的部分就算设置了背景颜色也无法遮挡位于他后边的元素
overflow属性:溢出部分处理
cursor属性: 设置鼠标样式
# 表格元素
在CSS技术出现之前，网页通常使用表格布局。
后台管理系统中可能会使用表格。
前台: 面向用户。
后台: 面向管理员。对界面要求不高，对功能性要求高。
表格不再适用于网页布局? -->表格的渲染速度太慢。
表格： table
border-collapse属性:控制单元格之间边框的间距，写在table里边
属性值:separate 表示相邻边框分离
collapse 表示折叠，即相邻边框合并
表格标题： caption
表头： thead
表格主体: tbody
表尾: tfoot
表格行：tr
标题单元格： th (不是只能出现在表头，表体也可以)
单元格： td
<!-- 表示该单元格跨越五列，即占五列的宽度 -->
<td colspan="5">合计:XXXX</td>
<!-- 表示跨越2行 -->
<td rowspan="2">数据1</td>
<!-- 表示选中第奇数个tr -->
tbody tr:nth-child(odd)
<!-- 表示选中第偶数个tr -->
tbody tr:nth-child(event)
# 其他元素
1. abbr元素
表示 内容为缩写词
2. time元素
提供给浏览器或搜索引擎的时间
<time datatime="2019-5-1">今年5月</time> 我录制了HTML 和 CSS课程
3. b元素
以前是一个无语义元素，主要用于加粗字体
现在表示强调，在语音阅读时会重读或可能停顿
4. q元素
一小段引用文本 cite属性:表示引用的文本链接地址(给浏览器看的)
5. blockquote
大段引用的文本 cite属性:表示引用的文本链接地址(给浏览器看的)
6. br元素
无语义
主要用于在文本中换行 无法设置样式 **不太使用
7. hr元素
无语义
主要用于分割 **不太使用
8. meta元素
<!-- 搜索网站时的关键字 -->
<meta name="keywod" content="在线商城,美容">
<!-- 网站作者 -->
<meta name="author" content="yishunxuan,ahvkdsa@qq.com">
<!-- 网站简介 -->
<meta name="description" content="adasskjfjd">
还可以用于搜索引擎优化 (SEO)
9. link元素
链接外部资源(css、图标)
rel属性: relation, 链接资源和当前文件的关系
type属性: 链接资源的MILE类型 (可以不写)
除此之外链接图标另外一种方法:将图标文件放在网站的根目录取名为favicon.ico
CSS进阶
# 其他元素
1. abbr元素
表示 内容为缩写词
2. time元素
提供给浏览器或搜索引擎的时间
<time datatime="2019-5-1">今年5月</time> 我录制了HTML 和 CSS课程
3. b元素
以前是一个无语义元素，主要用于加粗字体
现在表示强调，在语音阅读时会重读或可能停顿
4. q元素
一小段引用文本 cite属性:表示引用的文本链接地址(给浏览器看的)
5. blockquote
大段引用的文本 cite属性:表示引用的文本链接地址(给浏览器看的)
6. br元素
无语义
主要用于在文本中换行 无法设置样式 **不太使用
7. hr元素
无语义
主要用于分割 **不太使用
8. meta元素
<!-- 搜索网站时的关键字 -->
<meta name="keywod" content="在线商城,美容">
<!-- 网站作者 -->
<meta name="author" content="yishunxuan,ahvkdsa@qq.com">
<!-- 网站简介 -->
<meta name="description" content="adasskjfjd">
还可以用于搜索引擎优化 (SEO)
9. link元素
链接外部资源(css、图标)
rel属性: relation, 链接资源和当前文件的关系
type属性: 链接资源的MILE类型 (可以不写)
除此之外链接图标另外一种方法:将图标文件放在网站的根目录取名为favicon.ico
# web字体和图标
## web字体
用户电脑上没有安装相应字体,强制让用户下载该字体
使用@font-face指令制作一个新字体
*** /* 制作一个新的字体，名称叫做 good night */
@font-face{
font-family:"good night";
src:url("./font/晚安体.ttf")
}
p{
font-family:"good night";
}
***
## 字体图标
iconfont.cn
一般用 i元素 i元素默认样式为斜体
一般为行盒，把字体图标看成文字
### 离线字体图标
如果把字体图标文件不与字体图标css放在同一文件夹，需将iconfont.css里的链接地址改动
# 块级格式化上下文
简称:BFC
它是一块独立渲染区域，它规定了在该区域中，常规流“块盒”的布局
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块盒的自动高度和摆放位置，无视浮动元素，更加无视定位元素
BFC渲染区域:
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域:
- 根元素 意味着， <html>元素创建的BFC区域，覆盖了网页中的所有元素
- 浮动和绝对、固定定位元素
- overflow不等于visible的块盒
不常见:
- display等于table、 表格的单元格
- 行块盒
“独立的”释义：
不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部联系，内部的渲染不会影响到外部
具体规则:
创建BFC的元素，它的自动高度需要计算浮动元素(只是浮动元素，定位不行)
创建BFC的元素，它的边框不会与浮动元素重叠(只是浮动元素，定位不行)
创建BFC的元素，不会和他的子元素进行外边距合并
自动高度不可能计算固定定位与绝对定位
设置overflow:hidden使其变为BFC可以让其避开浮动元素
通过设置定位不会避开
.float{
width:100px;
height:200px;
margin:20px;
background:red;
float:left;
}
.container{
height:500px;
background:#008c8c ;
/* BFC 它会避开浮动元素，相当于设置了margin-left,其是相对于包含块的左边缘*/
/* overflow:hidden; */
/* 设置定位不会避开 */
/* position:absolute;
width:100px;
left:20px;
top:20px; */
}
# 布局
## 多栏布局
两栏布局
三栏布局
## 等高
1. CSS3的弹性盒
2. JS控制
3. 伪等高
## 元素书写顺序
主区域代码靠前可以使用侧边栏定位解决
## 后台页面的布局
body元素默认样式：margin不为零
height属性值设为100%前提条件为:该元素的包含块高度确定
# 浮动的细节规则
盒子位置
- 左浮动向上向左排列
- 右浮动向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边(上一个盒子是指顺序上上一个 ，而不是摆放位置)
- 若剩余空间无法容纳浮动盒子，则该盒子向下移动，直至具备足够空间能容纳盒子，然后再向左或向右移动
# 行高的取值
line-height
1. px, 像素值
2. 无单位数字
3. em单位
4. 百分比
# body背景
**画布 canvas**
一块区域
特点:
1. 最小宽度为视口宽度 {宽度和高度可大于视口}
2. 最小高度为视口高度
**HTML元素的背景**
覆盖画布
**body元素的背景**
如果HTML元素有背景，body元素正常 (背景覆盖边框盒)
如果HTML元素没有背景，body元素背景覆盖画布
**关于画布背景图**
数值为相对单位时：如100%， center
1. 背景图的宽度百分比，相对于视口宽度
2. 背景图的高度百分比，相对于HTML元素高度，即网页高度
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于HTML元素高度，即网页高度
# 行盒的垂直对齐
## 多个行盒垂直方向上的对齐
给没有对齐的元素设置vertical-align
预设值
数值
## 图片的底部白边
图片的父元素是一个块盒，块盒的高度自动，图片底部和父元素之间往往会出现空白
这个白边的高度与包含该元素的元素的字体大小有关
解决办法:
1. 设置父元素的字体为0
2. 将图片设置为块盒
# 参考线-深度理解字体
font-size、line-height、vertical-align、font-family
## 文字
文字是由一些文字制作软件制作出来的,比如fontforge
制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型参考线一样。
## font-size
字体大小，设置的是文字的相对大小，一般比实际大小小
文字的相对大小:1000、2048、1024
文字顶线到底线的距离，是文字的实际大小(content-area，内容区)
行盒的背景覆盖的是content-area
## 行高
顶线向上延伸的空间和底线向下延伸的空间，两个空间相等，该空间叫gap(空隙)
gap默认情况下，是字体设计者设计的
top到bottom区域，叫做virtual-area(虚拟区域)
行高就是virtual-area
line-height:normal,默认值，使用文字默认gap
> 文字一定出现在一行的最中间——错误
> content-area一定出现在virtual-area的正中间
## vertical-align
决定参考线: font-size 、font-family、 line-height
一个元素如果子元素出现行盒，该元素内部也会产生参考线
属性值:
baseline: 表示该元素的基线与父元素的基线对齐
super:表示该元素的基线与父元素的基线对齐
sub: 表示该元素的基线与父元素的下基线对齐
text-top:该元素的vertual-area的顶边，对齐父元素的text-top
text-bootm:该元素的virtual-area底边,对齐父元素的text-bottom
top:该元素的virtual-area的顶边，对齐line-box的顶边
bottom:该元素的virtual-area的底边，对齐line-box的底边
middle:该元素的中线(content-area的一半)，与父元素的X字母的高度一半的位置对齐
行盒组合起来可以形成多行，每行的区域叫做line-box,line-box的顶边是该行内所有行盒最高顶边，底边是该行所有行盒里最低底边
实际，一个元素的实际占用高度 (高度自动)，高度计算通过line-box计算。
行盒: inline-box
行框: line-box
数值:相对于基线的偏移量，为正向上偏移，为负向下偏移
百分比:相对于基线的偏移量,百分比相对于自身virtual-area的高度
line-box是承载文字内容的必要条件，以下情况不生成行框:
1. 某元素内部没有行盒
2. 某元素字体大小为0
## 可替换元素和行块盒的基线
图片:基线位置位于图片的下外边距
表单元素:基线位置在内容的底边
行块盒:
1. 行块盒最后一行有line-box,最后一行的基线作为整个行块盒的基线
2. 如果行块盒内部最后一行没有行盒，则使用下外边距作为基线
# 堆叠上下文
堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。
## 创建堆叠上下文的元素
1. html元素（根元素）
2. 设置了z-index（非auto）数值的定位元素
## 同一个堆叠上下文中元素在Z轴上的排列
从后到前的排列顺序：
1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别(z-index, stack level)为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。
# svg
svg: scalable vector graphics，可缩放的矢量图
1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量
## 怎么使用
svg可以嵌入浏览器，也可以单独成为一个文件
xml语言，svg使用该语言定义
xml语言中空元素必须闭合 eg:<rect />
### 如何引用svg文件
在HTML文件中用:
1. 直接嵌套进浏览器
直接将代码粘贴，不要 svg元素之前的部分
2. 使用外部svg文件
img元素
用背景图:background:url()
<embed src="" type="image/svg+xml">
object元素
iframe元素, 但它还会有个网页
## 书写svg代码
<svg style="background:gray;" width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="100" y="100" fill="red" stroke="#000" stroke-width="5"/>
</svg>
width="500" height="1000" 必须写在style外边且用等号
数值一般不加单位
### 矩形:rect
fill:表示填充颜色 transparent表示透明
stroke:表示描边颜色
x、y:表示矩形左上角坐标
坐标原点在整个区域左上角点
### 圆形：circle
### 椭圆：ellipse
### 线条：line
### 折线：polyline
points="200，5000，300，18" 其中各点的坐标用逗号隔开
填充时会把第一个点与最后一个点相连填充封闭区域
### 多边形：polygon
### 路径：path
M = moveto 动点
L = lineto 线
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc 弧线
A
半径1
半径2
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）逆时针（0）
Z = closepath 表示闭合路径会闭合到起点坐标
### 例子
画太极图
# 数据链接
data url
## 如何书写
数据链接：将目标文件的数据直接书写到路径位置
语法：data:MIME,数据
## 意义
优点：
1. 减少了浏览器中的请求
请求
响应
减少了请求中浪费的时间
2. 有利于动态生成数据
缺点：
1. 增加了资源的体积
导致了传输内容增加，从而增加了单个资源的传输时间
2. 不利于浏览器的缓存
浏览器通常会缓存图片文件、css文件、js文件。
3.base64编码方式 会增加原资源的体积到原来的4/3
应用场景：
1. 当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。
## base64
一种编码方式
通常用于将一些二进制数据，用一个可书写的字符串表示。
# 浏览器兼容性
## 问题产生原因
- 市场竞争
- 标准版本的变化
## 厂商前缀
> 比如：box-sizing， 谷歌旧版本浏览器中使用-webkit-box-sizing:border-box
- 市场竞争，标准没有发布
- 标准仍在讨论中（草案），浏览器厂商希望先支持
IE： -ms-
Chrome，safari: -webkit-
opera： -o-
firefox: -moz-
> 浏览器在处理样式或元素时，使用如下的方式：
> 当遇到无法识别的代码时，直接略过。
1. 谷歌浏览器的滚动条样式
实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的
2. 多个背景图中选一个作为背景
## css hack
根据不同的浏览器（主要针对IE），设置不同的样式和元素
1. 样式
IE中，CSS的特殊符号
- *属性，兼容IE5、IE6、IE7
- _属性，兼容IE5~IE6
- 属性值\9，兼容IE5~IE11
- 属性值\0，兼容IE8~IE11
- 属性值\9\0，兼容IE9~IE10
> IE5、6、7的外边距bug，浮动元素的左外边距翻倍
2. 条件判断
## 渐近增强 和 优雅降级
两种解决兼容性问题的思路，会影响代码的书写风格
- 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式
书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。
- 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理
书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。
## caniuse
查找css兼容性
[caniuse.com](https://caniuse.com/)
# 居中总结
居中：盒子在其包含块中居中
## 行盒（行块盒）水平居中
直接设置行盒（行块盒）父元素```text-align:center```
## 常规流块盒水平居中
定宽，设置左右margin为auto
## 绝对定位元素的水平居中
定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto
> 实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况
## 单行文本的垂直居中
设置文本所在元素的行高，为整个区域的高度
## 行块盒或块盒内多行文本的垂直居中
没有完美方案
设置盒子上下内边距相同，达到类似的效果。
## 绝对定位的垂直居中
定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto
# 样式补充
## display:list-item
设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列
先排列次盒子，再排列主盒子
涉及的css：
1. ```list-style-type```
设置次盒子中内容的类型
可从父元素继承
2. ```list-style-position```
设置次盒子相对于主盒子的位置
3. 速写属性```list-style```
**清空次盒子**
list-style:none
## 图片失效时的宽高问题
如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高
## 行盒中包含行块盒或可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关
## text-align:justify
text-align:
- left: 左对齐
- right：右对齐
- center：居中
- justify：除最后一行外，分散对齐 (即平均分散空白)
如果想最后一行也分散对齐可给该元素加::after属性
注意display值为inline-block
.container::after{
content: "";
display: inline-block;
width: 100%;
}
## 制作一个三角形
## direction 和 writing-mode
开始 start -> 结束 end
左 left -> 右 right
开始和结束是相对的，不同国家有不同的习惯
左右是绝对的
direction设置的是开始到结束的方向,其实是对齐方向
writing-mode：设置文字书写方向
## utf-8字符
<style>
p::after{
content: "\6613\987A\8F69";
}
</style>
或
<p>
易顺轩
</p>
5754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
