前端知识&HTML常用标签
20200210
1、浏览器及内核介绍：
chrome谷歌：
特点——简洁、快速、安全
内核——webkit,Blink
费用——收费
前缀—— -webkit-
Firefox火狐——Mozilla公司：
特点——非盈利、Gecko项目开源
内核——Gecko
前缀—— -moz-
Safari苹果——苹果公司：
特点——移动端
内核——webkit
前缀—— -webkit-
Opera欧朋——挪威 opera software ASA：
特点——自主研发presto内核
内核——presto、blink
前缀—— -o-
IE——Microsoft：
特点——IE和Windows系统捆绑推向市场
内核——trident
前缀—— -ms-
1）使用trident内核的IE，及一些国产浏览器
2）使用Gecko内核的Mozilla Firefox
3）使用blink内核的chrome、opera
4）使用webkit内核的Safari、chrome，及一些国产的双核浏览器
2、前端页面的构成:
1）HTML——超文本标记语言 Hypertext Markup Language，结构层
结构层由HTML标记语言创建，负责页面的语义
2）css——层叠样式表 cascading style sheets,样式层或表现层
表现层负责页面的样式
3）JavaScript——脚本语言，行为层
行为层主要负责描述页面的动态效果3、什么是HTML？
HTML是超文本标记语言。
HTML是使用标记来描述网页的一种语言。
HTML是的一种语法简单、结构清晰的语言
4、HTML文档——网页
扩展名：.html
文件名的格式：主文件名.扩展名
5、HTML标签语法：
标记——标签、元素
HTML标签：由尖括号包围的关键词
单标签：<标签名 />或<标签名>
双标签：<标签名>[内容]</标签名>
<标签名 属性名=“属性值”>[内容]</标签名>
空元素严格模式下在开始标签中进行关闭
HTML的注释：ctrl + /
<!-- HTML注释内容 -->
6、HTML文档的结构
<!DOCTYPE html> <!-- 文档声明 -->
<!-- <!doctype> 文档声明也称为文件类型定义（DTD），作用告诉浏览器给文档的版本信息，让浏览器的解析器知道应该用哪种规范来解析文档。必须写在HTML文档的第一行，是一条声明语句，不是一个HTML标签
<!DOCTYPE html> 用HTML5的语法去解析页面
-->
<html lang="en"><!-- 网页的根元素，双标签，html标签和head标签是父子关系也称嵌套关系-->
<head> <!--网页的头部信息，双标签，head标签和body标签是兄弟关系也称并列关系-->
<meta charset="UTF-8"><!--HTML文档的元信息，单标签
字符集：ASCII（0-9、大写和小写英文字母、一些特殊符号），国内常用——utf-8、GBK
utf-8——国际编码，通用型较好
GBK——包含全部中文字符，其中针对简体汉字的编码方式GB2312
-->
<title>网页基本结构</title><!--网页标题-->
</head>
<body><!--网页的主体内容，双标签-->
</body>
</html>7、常用标签：
块级标记：
1）标题标签：h系列标签
h1~h6大小依次减小，重要程度依次减弱；
h1在同一个网页中只能使用一次；其他标签可以重复使用
特点：默认情况下宽度100%；默认情况下高度自适应；独立成行；自带间距和加粗
2）段落标记：p标签
特点：默认情况下宽度100%；默认情况下高度自适应；独立成行；自带间距
3）div标签：无语义
语法：<div>[内容]</div>
特点：默认情况下宽度100%；默认情况下高度自适应；独立成行
其他标签：
4）br标签：强制换行标签——不产生新段落的情况下进行换行
语法：<br />或 <br>
5）hr标签：水平分割线标签
语法：<hr />或 <hr>
特点：默认自带间距、自带边框
行级标签：
文本格式化标记——
6）span标签：万能标签，用于区分样式，双标签
7）b标签：是一个实体标签，用来呈现文字的粗体效果
8）strong标签：是一个语义标签，作用加强字符的语义，用来表示重要文本，在文本中呈现粗体效果
9）i标签：定义与文本中其他部分不同的部分，将这一部分文本呈现为斜体，没有特殊语义
10）em标签：用来呈现被强调的文本，在文本中呈现斜体效果
11）sub标签：定义下标
12）sup标签：定义上标
13）del标签：定义删除线
特点：默认情况下宽度自适应、默认情况下高度自适应、默认情况下横向显示（相邻的行内元素会排列在同一行中，直到一行排不下，才会换行
14）a标签：超链接标签
语法：<a href="链接的URL地址" title="鼠标悬停时显示的提示信息" target="_blank|_self">链接文本</a>
target属性：
_blank 在新窗口打开
_self 在当前窗口打开
特点；默认情况下宽度自适应、默认情况下高度自适应、默认横向显示、默认文字颜色为蓝色，访问过后文字颜色为紫色、自带下划线
可以使用#作为网址的占位符，代表当前页面
锚点使用：跳转到长页面的某个位置、跳转到不同页面的目标位置
定义锚点：<a name="锚点名称"></a> <div id="锚点名称">[内容]</div>
引用锚点：<a href="#锚点名称">链接文字</a> <a href="demo-03.html#box1">demo-03.html box1</a>
行块级标签：
15）img标签：图片标签
语法：<img src="图片的路径" title="鼠标悬停时呈现的提示信息" alt="图片占位">标签&语义化&优先级&文本样式
20200211
1、路径：
1）绝对路径：带有域名的文件的完整路径或盘符下的某个路径
2）相对路径：/表示根目录 ./表示当前目录，可以省略 ../表示上一级目录 ../../表示上上级目录 文件名/ 引用下一级目录
2、语义化
什么是html语义化？
根据页面内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有利于SEO，便于团队开发和维护。如：标题用h1~h6,段落使用p标签
语义化的好处：
1）在没有css的情况下，页面也能呈现出较好的内容结构；
2）语义化使代码更具有可读性，便于团队开发和维护；
3）语义化有利于用户体验
4）语义化有利于SEO搜索引擎优化3、特殊字符：
空格
小于< <
大于> >
& &
已注册 ®
版权符号 ©
商标 ™
等文本样式&表格&列表&表单
20200212
1、什么是css?
css——层叠样式表 cascading style sheet
主要用于html页面文本内容、图片外形、版本的布局等外观样式的设置
2、css语法规则
1）语法：
选择器 声明语句 ; 声明语句 ; 声明语句
div{ width: 200px; height: 200px; background-color: red; }
属性名称 : 属性值
2）注释：
/* css注释内容 */3、css样式的引入方式
1）行内样式——内联式
语法：<div style="width: 100px; height: 100px;"></div>
适用于：个别元素添加特殊样式时
缺点：作用范围小，尽量不要使用
2）内部样式——嵌入式
语法：
<head>
<style type="text/css">css样式</style>
</head>
适用于：单个html文档需要特殊样式时
优点：相对于行内样式，代码能够复用
3）外部样式——外链式，引入的是扩展名为.css的文件
语法：
<head>
<link href="css文件的路径" rel="stylesheet" type="text/css">
</head>
rel属性：当前文档与被链接文档之间的关系。只有stylesheet得到所有浏览器的支持，表示外部文件的类型是css文件
适用于：多个html文档拥有相同样式的时
创建步骤：
（1）新建一个扩展名为.css的文件，保存到网站目录的css文件夹中
（2）打开新建的.css文件，设置编码方式：
@charset "utf-8";
（3）在html文档中链接后缀名为.css的文件：
<link href="css文件的路径" rel="stylesheet">
4）样式表的优先级：
行间样式>内部样式>外部样式
外部就近原则
4、基础选择器：选择器——找对象
1）通配符选择器 *：单独使用匹配所有元素
2）元素选择器——标签选择器、类型选择器
结构中：<标签名></标签名>
样式中：标签名{ css样式 }
3）class选择器——类选择器
结构中：<标签名 class="类名"></标签名>
样式中：.类名{ css样式 }
选择器的命名规范：
名称尽量有含义；
名称建议以英文字母开头，可以包含字母、数字、连字符（-_）；
除了连字符之外的特殊符号不允许使用（包含空格）；
不能使用中文汉字、纯数字，不能以数字开头；
类名会区分大小写
4）id选择器
结构中：<标签名 id="id名"></标签名>
样式中：#id名{ css样式 }
注意：id名称在本页中只能出现一次
5）选择器的优先级：一般来说选择器的权值越大，优先级越高
基本选择器的权值由小到大分别为：
通配符选择器（0）<标签选择器（1）<class选择器（10）<id选择器 （100）<行间样式（1000）
如果选择器的权值相同，后写的内容会覆盖先写的内容；
行间样式拥有最高优先级但是高不过!important
background-color: lightcoral !important;
5、文字属性
1）font-size 属性：字号，单位像素
浏览器的默认字号为16像素
2）font-family属性：字体、字族
如果字体名称包含空格，或字体名称为中卫，字体名称上加引号；
多个字体名称作为一个回退系统来保存，如果第一个字体不被浏览器支持，则尝试下一个，多个字体之间
用逗号隔开；
中英文混排的文字，英文字体要排在中文字体前面；
Arial,"Times New Roman","微软雅黑","宋体"
3）font-weight属性：文字加粗，范围100~900之间，100~400之间都是normal
font-weight: normal; 正常（相当于400）
font-weight: bold; 加粗（相当于700）
font-weight: 900;
4）font-style属性：文字样式
font-style: normal; 正常
font-style: italic; 斜体字
5）line-height属性：文字的行高。文字设置行高后，会在行高的范围内垂直居中，但行高撑不起盒高。没有
设置单位的行高值，表示字号的倍数
6）font属性
font: [font-style] [font-weight] font-size[/line-height] font-family;
注意：只有同时具有font-size属性和font-family属性时，简写生效6、文本属性
1）color属性：文字颜色
英文名称：transparent透明、red红色、green绿色、blue蓝色
十六进制色值：由0-9a-f组成，六位十六进制数 红色#ff0000--#f00 #332344 #332244--#324
rgb(r,g,b):r-red红色 g-green绿色 b-blue 蓝色 取值范围0-255
rgba(r,g,b,a):r-red g-green b-blue a-alpha透明度，取值范围0-1之间，0表示完全透明，1表示完全
不透明，0~1之间表示半透明效果
2）text-align属性：文本水平对齐方式，设给块级元素。图片的水平对齐也可以设置
text-align: left; 默认值，左对齐
text-align: center; 居中对齐
text-align: right; 居右对齐
3）text-decoration属性：文本装饰线
text-decoration: none; 去掉文本装饰线
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 删除线
4）text-indent属性：文本块首行缩进，单位px、em(字符宽度的倍数)、百分比(相对于父元素宽度的百分之多少)7、css长度单位
px：相对于显示器屏幕分辨率而言，值固定，计算比较容易
em：相对长度单位，相对于父元素的font-size属性值而言
浏览器默认字号为16像素，未经调整的浏览器都符合1em=16px
特点：值不固定；会继承父元素的字号大小
%：相对长度单位
rem：相对于根元素的字体大小的单位，是css3新增的单位
浏览器在默认情况下，1rem = 16像素。在IE8及更早版本的浏览器中不兼容
8、html中的列表
1）无序列表
语法：
<ul>
<li></li>
<li></li>
</ul>
特点：
宽度100%；高度自适应；独立成行；自带间距、填充、自带列表符（清除自带列表符list-style: none;）
2）有序列表
语法：
<ol>
<li></li>
<li></li>
</ol>
3）自定义列表：
语法：
<dl>
<dt>定义列表的标题，或专业术语</dt>
<dd>定义列表项或对专业术语的解释</dd>
<dt>标题</dt>
<dd>列表项</dd>
</dl>
注意；浏览器显示，dd中的内容会默认缩进显示9、表格语法
可以将数据有效地组织在一起，并以网格的形式显示。
特性：有内容的、没有固定宽度的单元格，由内容撑开;
没有固定宽度的空单元格，默认平分表格宽度
语法：
<table border="1">
<caption>表格标题</caption>
<tr><!--行-->
<th>表头单元格，默认文字加粗，并且水平、垂直居中</th>
<th>表头</th>
</tr>
<tr>
<td>表格单元格，默认水平居左，垂直居中</td>
<td>表格单元格</td>
</tr>
<tr>
<th>表头单元格</th>
<td>表格单元格</td>
</tr>
</table>
<table border="1">
<thead><!--表格的头，用来放置标题之类的东西-->
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
</thead>
<tbody><!--表格的身体，用来放置数据-->
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
<tfoot><!--表格的底部，用来放置脚注之类的内容-->
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>10、表格属性
border属性：表格边框
border="1|0" border="0"表格没有边框
cellpadding属性：单元格内容和单元格边框之间的距离，单位像素
<table border="1" cellpadding="20"></table>
cellspacing属性：单元格之间的间距，单位像素，默认大小为2像素
<table border="1" cellspacing="2"></table>
合并单元格：
跨行合并单元格：rowspan
跨列合并单元格：colspan
11、表格常用css属性
border-collapse属性：设置表格的行和单元格的边是否合并还是独立
border-collapse: separate; 边框独立
border-collapse: collapse;相邻边合并
border-spacing属性：当表格边框独立时，行和单元格的边框在横向和纵向上的间距
如果两个长度值，第一个用于横向间距，第二个用于纵向间距
如果只有一个长度值，这个值作用于横向和纵向的间距
border-spacing: 10px 20px;
表格优点：方便排列一些有规律的、结构均匀的内容或数据
表格的缺点：产生垃圾代码、影响页面下载时间、灵活性不打、难于修改12、表单属性
用于采集不同类型的用户输入数据，发送给服务器，实现用户和服务器之间的数据交互
1）表单标签form：用于申明表单，定义数据采集范围
注意：一个页面可以有多个表单标签，但是标签之间是相互独立的，不能嵌套；
用户向服务器发送数据时一次只能提交一个表单中的数据；如果要提交多个表单，需要使用JavaScript中的异步交互方式来实现
语法：<form action="提交表单时向何处发送表单数据" method="get|post" name="表单名称">表单元素</form>
method属性：提交表单时所用的http方法，默认为get方式
get方式：将数据作为URL地址的一部分发送给服务器；安全性比较低；有长度限制；请求的数据可以被缓存，能够保留在浏览器的历史记录中；能作为书签被收藏。
https://www.baidu.com/?username=123&psd=asd
https://www.baidu.com/?参数名=参数值&参数名=参数值
post方式：将数据隐藏在http数据流中进行传输；安全性比get方式要高；对数据长度没有限制；请求数据不会被缓存，也不会再浏览器的历史记录中保存，更不会作为书签被收藏。
https://www.baidu.com/
2）input表单域
<input type="" name="" value="初始值">
<input type="text" > 单行文本输入框
<input type="password" placeholder="提示信息"> 密码框
<input type="radio"> 单选按钮
<input type="checkbox"> 复选框
checked属性：用于单选按钮和复选框的默认选中，可以直接在input元素中写checked或checked="checked"
<input type="submit" value="提交"> 提交按钮
<input type="reset" value="重置"> 重置按钮
<input type="button" value="">普通按钮
<button>按钮</button>，默认类型为submit
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
<input type="file"> 上传文件
注意：实现后台上传文件，必须在form表单中添加enctype属性
<form action="#" enctype="multipart/form-data"></form>
<input type="image" src="图片的路径" alt="提示性文字"> 图片形式的按钮
注意：input必须与src属性和alt属性配合使用
<input type="hidden" value="值"> 隐藏域。对用户是不可见的，目的是收集或发送信息到服务器，有利于程序处理信息
3）select下拉列表
<select name="">
<option value="html" selected>html</option>/*列表项，加载时预先选定的选项*/
<option value="css">css</option>
</select>
selected属性，用于下拉列表的默认选中，可以直接写selected或selected="selected"
4）textarea多行文本域：一般用于需要输入大量文本的位置
<textarea cols="1" rows="3"></textarea>
cols属性：cols="1"表示宽度，一行最多可以输入一个汉字，两个字符
rows属性：表示行数
textarea{ resize: none; } 禁止用户调整多行文本域的大小
5）label标签：表单标注——扩大点击范围，一般与单选按钮、复选框组合使用。关联式方式：
显示方式：
<input type="checkbox" id="eat">
<label for="eat">吃饭</label>
隐式方式：
<label><input type="checkbox">吃饭</label>
6）表单相关属性：
readonly属性：只读属性，不能修改，可以被提交
disabled属性：禁用表单元素，被禁用的元素不可用，不可点击，不会被提交
maxlength属性：允许输入的最多的字符数
size属性：控制input的长度
value属性：初始值
placeholder属性：文本域的提示信息
checked属性：用于单选按钮和复选框的默认选中
selected属性，用于下拉列表的默认选中css选择器&盒模型
20200213
1、css选择器进阶——复合选择器
1）后代选择器——选择器之间用空格隔开
选择器1 选择器2{ css样式 } /*在选择器1范围内的所有的选择器2全部生效*/
2）子代选择器——只能选择第一级子元素
父选择器>子选择器{ css样式 }
3）群组选择器——分组选择器，选择器之间用逗号隔开
选择器1, 选择器2{ css样式 } /*选择器1和选择器2都具有相同的属性*/
4）交集选择器——两个以上的选择器组成
结构中：<div class="active"></div>
样式中：div.active{ css样式 }
5）伪类选择器：用来添加选择器的特殊效果
语法：选择器:伪类{ css样式 }
链接的不同状态都可以以不同的方式显示：
a:link{ 链接的默认样式 }
a:visited{ 链接访问过后的样式 }
a:hover{ 鼠标悬停到链接上的样式 }
a:active{ 鼠标按下时的样式 }
四个伪类状态都生效： LV-Ha2、盒模型Box Model
css盒模型也称为框模型，在页面布局中，将页面的元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范。包含：元素内容content、内填充padding、边框border、外间距margin等几个要素。css盒模型的本质是一个盒子，封装周围的html元素。
标准盒模型的计算公式:
盒子的实际宽度= width属性+ padding-left + padding-right + border-left + border-right
盒子的总宽度= width属性 + padding-left + padding-right +border-left + border-right + margin-left + margin-right
盒子的实际高度= height属性+ padding-top + padding-bottom + border-top + border-bottom
盒子的总高度= height属性+ padding-top + padding-bottom +border-top + border-bottom + margin-top + margin-bottom盒模型的相关属性：
1）内容属性：
width属性：元素的宽度
属性值：auto|数值|inherit
height属性：元素的高度
max-width属性：最大宽度 min-width属性：最小宽度
max-height属性：最大高度 min-height属性：最小高度
2）padding属性：内填充、内边距，元素边框和元素内容之间的空白区域
单边内填充：
padding-top属性：上内填充
padding-right属性： 右内填充
padding-bottom属性：下内填充
padding-left属性： 左内填充
复合写法：
padding: npx;
padding: npx mpx;
padding: npx mpx xpx;
padding: npx mpx xpx ypx;
注意：百分比——上下内填充与左右内填充百分数值是相对于父元素的width属性计算的。
3）border属性：边框
border-width属性：边框的宽度，属性值单位像素
border-style属性：边框的样式
border-style: none; 没有边框
border-style: solid; 单实线
border-style: double; 双实线
border-style: dashed; 条状虚线
border-style: dotted; 点状虚线
border-color属性：边框颜色。默认的边框颜色是元素本身的前景色
复合写法：
border-width: npx;
border-width: npx mpx;
border-width: npx mpx xpx;
border-wdith: npx mpx xpx ypx;
border-color属性、border-style属性
单边属性：
border-top属性：上边框
border-top-width属性：上边框的宽度
border-top-style属性：上边框的线型
border-top-color属性：上边框的颜色
border-top: border-top-width border-top-style border-top-color;
border-right属性：右边框
border-bottom属性：下边框
border-left属性：左边框
border简写：
border: border-width border-style border-color;
4）margin属性：外间距、外边距——定义元素周围的空间
单边外间距：
margin-top属性：上外间距
margin-right属性：右外间距
margin-bottom属性：下外间距
margin-left属性：左外间距
复合写法：
margin: npx;
margin: npx mpx;
margin: npx mpx xpx;
margin: npx mpx xpx ypx;
盒子的水平居中：
width属性
margin: 0 auto;
注意：行级元素实际不占上下外边距
margin值得问题：
（1）父子关系外边距塌陷问题——元素嵌套关系，子元素的margin值会叠加给父元素
现象：给子元素设置外间距，会和父元素的外间距合并，最终会表现其中较大的外间距的值
原因：父盒和子盒公用一个上外间距的区域
解决方法：
给父元素设置边框或内填充；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
（2）兄弟关系的外边距叠加——元素并列关系，垂直方向上相邻的margin值相遇会出现叠加
现象：上一个盒子设置下外间距，下一个盒子设置上外间距，两个值相同时，取当前值，如果两个值不同，取较大值
原因：上、下两个兄弟关系的盒子共用一个外间距区域
解决方法： 给两个盒子都套一个父盒子，父盒添加overflow属性背景属性&css特性&标签分类&浮动属性
20200214
1、背景属性
1）background-color属性：背景颜色，默认值为transparent透明
关键词|十六进制色值|rgb(r,g,b)|rgba(r,g,b,a)
背景颜色应用于内容区、padding、border区域
2）background-image属性：背景图片
语法：background-image: url(图片的路径);
background-image: none; 表示无背景图，默认值
3）background-repeat属性：背景图是否重复
background-repeat: repeat; 默认值，背景图在水平方向和垂直方向重复
background-repeat: repeat-x; 背景图在水平方向重复
background-repeat: repeat-y; 背景图在垂直方向重复
background-repeat: no-repeat; 背景图不重复
4）background-position属性：背景图的位置
语法：background-position: xpos ypos;
属性值：
关键词：left|center|right top|center|bottom
保证不超过两个关键词，一个是水平方向，一个是垂直方向；如果只出现一个关键词，另一个关键词默认center
长度值：图像的左上角0px 0px，负值向盒外，正值向盒内
百分比：图像在左上角0% 0%，右下角100% 100%
如果只有一个百分比数值，这个值作为水平方向的值，垂直方向将假设为50%
5）background属性：
background: background-color background-image background-repeat background-position;
注意：如果某一个属性不需要可以省略2、css的三大特征
1）层叠性
1）样式冲突，遵循就近原则
2）样式不冲突，不会层叠，但会叠加
2）继承性——子元素会继承父元素的样式
可以继承的属性：
字体系列属性——font-family字体系列属性、font-size字号属性、font-weight文字加粗属性、font-style文字的风格属性、line-height行高属性
文本系列属性——text-indent文本缩进属性、text-align文本水平对齐方式属性、color文本颜色属性
列表中list-开头的属性
3）优先级
选择器的权值越大，优先级越高；权值相同时，谁在后面显示谁
基本选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器权值计算方式：组成复合选择器的所有单一选择器的权值累加
.box div{ } 权值：10+1=11
#box .box p{ } 权值：100+10+1=111
行间样式的优先级高于id选择器的优先级；
继承样式的权值为0，子元素中设置的样式，会覆盖继承到的样式；
在样式中定义!important，优先级高于行间样式;3、标签分类 —— 行级标记、块级标记、行块标记
1）行级元素 inline-level
常用的行级元素：span、b、i、em、strong、a、del、sub、sup等
默认宽度随元素的内容变化而变化；
默认高度由内容撑开；
不会独立成行，相邻的行内元素会排列在同一行中，直到一行拍不下，才会换行；
换行和空格会被解析；
具有部分盒模型特征。
使用：一般用来容纳文本和其他内联元素，通常被包含在块元素中使用。
2）块级元素 block-level
常用的块级元素：h1、h2、h3、h4、h5、h6、p、div、ul、li、ol、dl、dt、dd等
默认宽度撑满父元素的宽度；
默认高度由内容撑开；
垂直布局；
具有盒模型特征。
使用：块级元素中可以添加块级元素、行级元素、行块元素
3）行块元素 inline-block
常用的行块元素：img、input等
具有块级标记的特征：可以设置宽、高、内填充、外间距
具有行级标记的特征：默认横向显示，直到一行排不下才会换行；换行和空格会被解析4、框类型转换 —— display属性
display: none; 元素不会被显示——隐藏元素，不占位
display: block; 元素的显示，将元素显示为块级元素，具有块级元素的特征
display: inline; 将元素显示为行级元素，具有行级元素的特征
display: inline-block; 将元素显示为行块元素，具有行块元素的特征
5、浮动
1）什么是浮动？
文档流：可以显示的对象在排列时所占的位置
浮动：使元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另外一个浮动元素的边框为止
注意：元素的水平方向浮动，元素只能左右移动而不能上下移动
2）浮动属性：
float: left; 元素向左浮动
float: right; 元素向右浮动
float: none; 默认值，元素不浮动
3）浮动的特性：
浮动会使元素脱离正常文档流；
浮动元素可以提升层级；
浮动可以使行级元素支持宽高；
浮动可以使块级元素由内容撑开；
元素添加浮动之后，不占位，父级盒高度为0
4）浮动带来的影响
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，会影响与父元素同级的后续元素的正常布局
5）清浮动的几种方法：
（1）为浮动元素的父级盒加固定的高度——不够灵活
（2）为浮动元素的父级盒加浮动——会产生新的浮动问题
（3）为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto——可能会导致内容显示不完全；代码简洁
（4）在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both;——代码冗余；通俗易懂、书写方便
（5）推荐方式：给浮动元素的父级盒加类名.clearfix
.clearfix{ *zoom:1; }
.clearfix::after{
content: "";
display: block;
clear:both;
visibility: hidden;
height: 0;
}
不会在结构上产生冗余代码，可以重复使用，符合闭合浮动思想，结构语义化正确6、overflow属性 —— 溢出隐藏，包含水平方向和垂直方向
overflow-x属性：只包含水平方向
overflow-y属性：只包含垂直方向
overflow: visible; /*溢出显示，默认值*/
overflow: hidden;/*溢出隐藏*/
overflow: scroll; /*溢出显示滚动条*/
overflow: auto;/*自动*/
overflow: inherit; /*继承*/
7、clear属性——清浮动
clear: left; 清除左侧浮动
clear: right; 清除右侧浮动
clear: both; 清除两侧浮动
伪元素选择器&浮动
20200217
1、浮动
目的：为了让多个块级元素在同一行显示
最核心的关键点：怎么排列、是否占位2、伪元素选择器
1）element::before{ content:"伪元素的内容"; 属性名称: 属性值; }
在element的内部，内容之前添加"伪元素的内容"
2）element::after{ content:"伪元素的内容"; 属性名称: 属性值; }
在element的内部，内容之后添加"伪元素的内容"3、样式重置——css reset
网页在显示的过程中，由于浏览器的内核不同、版本不同，对默认样式属性值的解析也不同。
将所有元素的自带样式去掉，然后重置，可以在不同内核、不同版本的浏览器中，都能解析到相同的属性值定位技术
20200218
1、css的定位机制
css的定位机制：普通文档流、浮动、定位
1）定位原理：允许元素相对于其正常位置、或相对于父元素、或相对于浏览器窗口本身的位置
元素位置的调整：left|right属性、top|bottom属性
2）定位属性：
静态定位position: static; 默认值
相当于没有定位，元素出现在正常文档流中；
相对定位position: relative; ——相对于本身的位置进行定位
一般用于元素的微调；作为绝对定位的参考元素
（1）不影响元素本身的特性
（2）相对定位仍然占位
（3）如果没有定位偏移量，对元素本身没有任何影响；如果定义了定位偏移量，相对于原来位置发生偏移
（4）提升层级
绝对定位position: absolute;——相对于最近的定位父元素定位（定位父级）
（1）使元素完全脱离正常文档流，不占位
（2）有定位父级相对于定位父级发生偏移；没有定位父级相对于整个文档发生偏移
（3）使行级元素支持宽高；没有设置宽度的块级元素宽度自适应
（4）提升层级
绝对定位的步骤：——子绝父相
为要做特殊定位的盒子（定位盒）添加position: absolute;绝对定位，设置初始位置，通过top|bottom、left|right属性：
top: 0;| bottom: 0;
right: 0; | left: 0;
为定位盒的父级盒（有固定宽度和高度），添加position: relative; 相对定位
回到定位盒，通过top|bottom、left|right属性进行精确定位
固定定位position: fixed;——相对于浏览器窗口进行定位
（1）元素定位后脱离正常文档流，不占位
（2）始终相对于浏览器的四个角为原点进行定位，不会随页面内容滚动而滚动
（3）使行级元素支持宽、高；没有设置宽度的块级元素宽度自适应
（4）提升层级
2、定位属性总结
position: absolute; 绝对定位 元素不占位 相对于定位父级盒
position: fixed; 固定定位 元素不占位 相对于浏览器窗口来定位
position: relative; 相对定位 元素占位 相对于元素本身的位置来定位
position: static; 静态定位 元素占位 相当于没有定位
定位偏移属性：
left: 0; right: 0; 水平方向偏移量设置
top: 0; bottom: 0; 垂直方向偏移量设置
3、脱离文档流属性总结
float: left|right; 脱离文档流，但不脱离文本流
position: absolute | fixed; 既脱离文档流，又脱离文本流
注意：所有元素都能使用以上属性。元素脱离文档流后，不再区分块级和行级元素，都具有共同的属性，宽度由内容撑开，可以设置width和height属性及所有的盒模型属性解决图片间隙&对齐方式&自适应布局
20200219
1、定位层级
z-index属性，定位盒叠放次序的调整，z-index属性值越大，叠放次序越高
值可能为：正整数、负整数、0（默认值）
只对定位元素生效；
数值越大叠放次序越高；
如果取值相同，则根据书写顺序，后来居上；
正值向上调整层级，负值向下调整层级；
属性值没有单位2、定位实现盒子的水平、垂直居中——绝对居中
1）margin负间距
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置为50%；
将元素分别左移和上移，移动元素宽度和高度的一半
2）margin: auto；实现绝对定位元素的居中
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left: 0; right: 0; top: 0; bottom: 0;
为居中盒设置margin: auto;3、常见属性--vertical-align属性
vertical-align属性：设置元素的垂直对齐方式
vertical-align: baseline; 将元素放在父元素的基线上 默认值
vertical-align: top; 顶端对齐
vertical-align: middle; 中部对齐
vertical-align: bottom; 底部对齐
vertical-align: super;上标 <sup></sup>
vertical-align: sub; 下标 <sub></sub>4、解决图片间距问题
将图片转成块级元素，解决下方间隙;
为图片设置垂直对齐方式(vertical-align属性)，解决下方间隙；
为图片的父元素设置高度，并添加overflow属性，解决下方间隙；
为图片的父元素设置font-size属性或line-height属性，属性值为0，解决下方间隙问题：
5、解决文本框和按钮不对齐现象
为input元素设置vertical-align属性;
为input元素设置浮动属性
6、显示隐藏属性
1）display属性
display: none; 元素的隐藏，将整个元素隐藏，不占用任何空间
display: block; 元素的显示
2）visibility属性
visibility: hidden; 元素内容不可见，只隐藏内容，占位空间仍然保留
visibility: visible; 元素可见
3）设置元素位置，让其消失
如设置margin-top: 500px; 移除可视区域
4）overflow属性实现，将要隐藏元素移出父元素的范围
overflow: hidden;
5）opacity属性，实现元素的不可见
opacity: 0;7、透明度属性
1）opacity属性——元素的不透明度，将内容、背景全部透明
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器下支持
取值范围：0~1之间，0表示完全透明，1表示完全不透明，0-1之间表示半透明
2）filter属性——filter: Alpha(opacity=x)
兼容性：仅支持IE6、7、8、9，在IE10及以上版本中被废除
取值范围：0~100之间，0表示完全透明，1表示完全不透明，0-100之间表示半透明
3）rgba(r,g,b,a)——用于颜色的不透明度设置
兼容性：IE6、7、8不支持，IE9及更早版本的浏览器中都支持
r--red 红色 0-255之间
g--green 绿色 0-255之间
b--blue 蓝色 0-255之间
a--alpha 透明度 0-1之间8、多栏布局
什么是自适应？
自适应：让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本页面的问题
自适应布局：解决在不同大小的设备上呈现相同网页的问题
8.1、两列自适应布局
html结构中——左右两个盒子；
左边固定宽度，右侧宽度100%；
为左侧盒子设置position:absolute;
右侧盒子添加子盒，设置padding-left，属性值为左侧盒子的宽度
8.2、圣杯布局——三列布局
1、html结构中——先主体内容后侧边栏；
2、两侧固定宽度，中间内容宽度设置width: 100%;
3、主体内容和左右侧边栏分别加浮动float: left;
4、左侧设置margin-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度；
5、将中间露出来：在外面的大盒子上设置padding: 0 右侧边的宽度 0 左侧边宽度；
6、分别为左侧边和右侧边设置position:relative; 左侧设置left:-左侧边的宽度;还原左侧边。
7、右侧边设置right:-右侧边宽度;还原右侧边8.3、双飞翼布局——三列布局
1、html结构中——先主体结构后侧边；
2、两侧固定宽度，中间宽度设置为width: 100%;
3、主体内容和左、右侧边分别加浮动float:left;
4、左侧边设置marign-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度;
5、在主体内容盒的子盒上设置margin:0 右侧边宽度 0 左侧边的宽度（padding和margin设置都行）;将中间内容露出来9、等高布局
（1）利用内外间距相抵消，为父元素设置overflow:hidden;实现
每一列使用padding值撑开背景色；并且每一列使用padding撑开的多余的占位让margin负值抵消；
父级盒设置溢出隐藏
优点：结构简单，兼容所有浏览器
缺点：伪等高，需要合理控制margin和padding值
（2）利用内容撑开父元素的特点，为每一列添加对应的容器，进行相互嵌套，并在每个容器中添加背景颜色
三个嵌套的div负责背景，三列放在最内侧的div盒子中；
通过相对定位，分配三列的背景的位置；
通过margin负值，将内容移到对应的背景的位置；
父元素设置溢出隐藏
优缺点：扩展性好，可以实现自适应，结构嵌套复杂
（3）利用边框模拟背景，实现等高的显示效果
左、右边框颜色、内容背景分别负责三列的背景颜色；
通过margin值，同步列的位置
特点：扩展性差，三列+的布局不适用精灵图&BFC
20200220
1、css技巧
1）css sprites——精灵技术、雪碧技术，通常也称“css图像拼合”或“贴图定位”。将一堆小图整合到一张大图上，
通过background-image、background-repeat属性显示图片，并且使用background-position属性实现图片的精确显示，
减少服务器对图片的请求数量。
优点：
减少网页的http请求，提高页面的性能；
减少图片命名上的困扰；
更换风格方便
缺点：
必须要限定容器的大小，背景图片位置需要计算；
维护的时候比较麻烦
css sprites的使用步骤：
制作具有多个状态的拼合图片；
给要显示背景的盒子一个固定的尺寸，以背景的方式加载，让其局部显示；
通过background-position背景图定位属性控制不同的显示状态
2）css小箭头
使用css绘制两个三角形，通过绝对定位让两个三角形不完全重叠，处于上层的三角形比处于下层的三角形的偏移属性多1像素
在IE6-中添加font-size: 0; line-height: 0; 目的——为了让i标签的height: 0; 生效
3）css滑动门技术
目的：为了使各种特殊形状的背景能够自适应元素中文本内容的多少
核心：利用css sprites、盒子的padding属性，适应不同字数的导航栏2、BFC——block formatting context
1）什么是BFC？
块级格式化上下文，web页面可视化css视觉渲染的一部分，是页面中一个独立的渲染区域。用于决定块盒子的布局和浮动相互影响范围
的一个区域，可以改变父元素的渲染规则。
2）怎样生成BFC？
根元素
float: left|right;
position: absolute|fixed;
overflow: hidden|scroll|auto;
display: inline-block;
3）BFC特性：
内部的元素会在垂直方向是上一个接一个放置；
垂直方向上的距离由margin值决定，属于同一个BFC的两个相邻元素的margin值会发生重叠；
每个元素的左外间距与包含快的左边界相接触，浮动也是如此；
BFC区域不会与float元素区域重叠；
计算BFC的高度时，浮动子元素也会参与计算；
BFC是页面上的一个隔离的独立的容器，容器中子元素不会影响到外面元素，反之亦然
4）BFC解决的问题：
（1）外间距折叠问题——避免margin值叠加问题
（2）自适应两栏或三栏布局
自适应两栏布局——左侧固定宽度，右侧不设宽，则右侧宽度为自适应，随浏览器窗口宽度的变化而发生相应的变化
自适应三栏布局——左右两边宽度固定，中间不设宽，则中间宽度为自适应，随着浏览器窗口的变化而发生相应的变化
（3）防止字体环绕
（4）清浮动阴影效果&ps操作
20200221
1、盒子和文字阴
1）盒子阴影box-shadow属性
box-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影的大小 阴影颜色 内阴影|外阴影(默认值)；
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
x轴偏移量--水平方向的偏移，正值向右偏，负值向左偏
y轴偏移量——垂直方向的偏移，正值向下偏，负值向上偏
inset内阴影
注意：可以向一个元素中添加多个阴影，多组阴影之间用逗号隔开
2）文字阴影text-shadow属性
text-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影颜色；2、文本溢出处理
1）单行文本溢出
text-overflow: clip;文字溢出后直接修剪
text-overflow: ellipsis; 文字溢出后用省略号代表被修剪的文本
text-overflow: string; 文字溢出后用给定的字符串表示被修剪的文本。只在火狐浏览器中生效
注意：要实现文本溢出处理，需要与white-space属性和overflow属性配合使用
2）多行文本溢出显示省略号
（1）使用webkit的css扩展属性
.box1{
width: 200px;
border: 2px solid #000;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/*将标签设置为弹性伸缩盒子*/
-webkit-line-clamp: 2;/*行数*/
-webkit-box-orient: vertical;/*伸缩盒子元素的排列方式*/
}
（2）使用伪元素模拟溢出显示省略号的效果
.box2{
width: 200px;
border: 2px solid #000;
height: 60px;
line-height: 30px;
overflow: hidden;
position: relative;
}
.box2::after{
content: "......";
position: absolute;
right: 0;
bottom: 0;
background: #fff;
padding-left: 4px;
padding-right: 10px;
}3、PS操作——Photoshop
1）打开文件：“文件”菜单-->“打开” ctrl+o
2）新建文件：“文件”菜单--“新建” ctrl+n
3）ctrl+s保存
注意：背景为透明，工作区显示灰白格子
4）常见工具
（1）移动工具 v
有多个图层并且有分组的psd文件，需要在属性栏勾选“自动选择”--“图层”
（2）矩形选框工具 m
设置ps中的单位：“编辑”菜单--“首选项”--“单位与标尺”--将标尺和文字改为“像素”
标尺：ctrl+r “视图”--“标尺”
参考线：在标尺上按住鼠标左键拖动，拉出参考线；水平参考线和垂直参考线的临时切换使用alt键。删除参考线只需要将参考线拖回到标尺即可；“视图”菜单--“清除参考线”
信息面板：F8 “窗口”菜单--“信息”
自由变换 ctrl + T
取消选区 ctrl+d
（3）拾色器--吸管工具 i
（4）文字工具 t
“窗口”菜单--“字符”
（5）抓手工具 空格键临时切换
（6）放大镜工具：z
在放大镜工具状态下，点击鼠标左键放大，按住alt键点击鼠标左键缩小；
在放大镜工具状态下，向外拖动放大，向内拖动缩小；
按住alt键，滚动鼠标滚轮，向外滚表示放大，向内滚表示缩小
（7）切片工具c ,shift+c工具组组内切换
在切片工具状态下，按住Ctrl键临时切换成切片选择器工具
（8）保存切片：Ctrl + alt + shift + s--“预设”（选择图片的格式），单击“存储”--选择保存位置，选择格式（仅限图像），切片（选中的切片），输入文件名--“保存”
（9）Ctrl + z撤销
（10）盖印可见图层 ctrl+alt+shift+e4、图片格式
1）psd： 是ps的源文件格式，分层文件
2）在页面中用到的图片格式
jpg格式--jpeg：不支持透明，色彩丰富；适合复杂颜色及形状，网页中的高清大图
文件小；有损压缩，反复保存图片质量会下降
gif格式：支持透明和不透明，色彩丰富，支持动画；适用于色彩单一的图标、动画图片
文件小，没有兼容性问题；只支持256种颜色
png格式：支持透明、不透明、半透明；适用于网页中的小图，存在半透明效果的图片
png8: 功能跟GIF相似
png24:色彩丰富，对半透明效果的细节显示较好，IE6不支持
无损压缩；不支持动画，色彩丰富的图片尺寸较大
webp格式：文件较小，支持有损和无损压缩，支持动画、透明；浏览器兼容性不好；适用于支持webp格式的app和webview5、拆分页面的原则
精确到1像素；
先上下，后左右，从外向里
先整体，后局部，再到细节
圆角属性&兼容问题&csshack
20200226
1、边框圆角border-radius属性
border-radius: 20px; /*元素四周都有20px的圆角*/
border-radius: 10px 30px;/*左上角和右下角各有10像素，右上角和左下角各有30像素的圆角*/
border-radius: 10px 20px 30px;/*左上角有10像素，右上角和左下角各有20像素，右下角30像素的圆角*/
border-radius: 10px 20px 30px 50px;/*左上角10像素，右上角20像素，右下角30像素，左下角50像素的圆角*/
border-top-left-radius: 30px; /*左上角的圆角设置*/
border-top-right-radius: 30px;/*右上角的圆角设置*/
border-bottom-right-radius: 30px;/*右下角的圆角设置*/
border-bottom-left-radius: 30px;/*左下角的圆角设置*/
2、兼容问题
IE8兼容问题：
1）IE8下图片边框问题：
解决方案:img{ border:none; }
2）IE8中背景复合属性写法问题
background: url(images/pic2.jpg) no-repeat 0 0;
3）IE低版本浏览器的透明度设置问题
opacity: 0.5;
filter: Alpha(opacity=50);
background: rgba(0,0,255,.5);
4）指定鼠标指针形状为手型， 并兼容所有浏览器
cursor: pointer;/*鼠标指针为手型*/
cursor: crosshair;/*鼠标指针为十字形*/
cursor: text;/*鼠标指针为文本的I型*/
cursor: wait;/*程序正忙*/
cursor: move;/*对象是可移动的*/
cursor: help;/*可用的帮助信息*/
cursor: default;/*默认光标*/
cursor: auto;/*默认*/
IE低版本浏览器兼容问题：
5）在IE6及更早版本的浏览器中定义小高问题
font-size: 0;
line-height: 0;
6）IE6及更早版本浏览器中浮动时产生的双边距问题
父元素加overflow: hidden;
子元素
float: left;
margin-left: 20px;
display: inline;
7）IE7中子元素相对定位，父元素overflow:hidden|auto失效的问题
父元素overflow: hidden; position: relative;
子元素position: relative;
8）IE7及更早版本的浏览器中，块级元素转行块元素，不在一行显示问题
display: inline-block;
*display: inline;
*zoom: 1;
9）IE7及更早版本的浏览器中，在li中出现2个或两个以上的子元素有浮动，li之间会产生空白间隙问题
vertical-align: top|middle|bottom;3、css Hack
1）条件级Hack
if条件：是否、大于（gt）、大于等于(gte)、小于(lt)、小于等于(lte)、非指定版本(!)
2）属性级Hack
_: 选择IE及以下版本
*：IE6、7
\9: 选择IE6+
\0: 选择IE8+、opera15
3）选择级Hack
*html IE6及更早版本浏览器
*+html IE7
Hack有风险，使用需谨慎！
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
html5新增属性
20200227
1、HTML5的新特性
1）在网页上绘制图形的canvas元素
2）多媒体相关video和audio元素
3）对本地离线存储的更好支持
本地存储：提供了两种在客户端存储数据的新方法
localStorage 没有时间限制的数据存储
sessionStorage 针对session的数据存储
离线应用：用户可以在应用离线的时候查看网站信息
4）新增的语义化的标签和表单控件2、HTML5中新增的语义化标签
新增的结构元素：
1）header标签：网页的头部区域或文档中某个内容区块的头部，双标签
一种具有引导和导航作用的结构元素，通常可以包含整个页面或一个内容区域的标题、搜索、相关logo图片等
2）footer标签：网页的底部区域或文档中某个内容区块的底部，双标签
通常可以包含：网页中的版权信息、相关阅读链接、文档的作者、使用条款等
3）nav标签：网页的导航区域，双标签
通常可以包含：网页中主要的导航链接组、传统的导航条、侧边栏导航、页内导航、翻页操作等
4）article标签：网页中独立的完整的内容，可以包含header标签，双标签
通常可以包含：一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件
5）section标签：网页中内容的章节，双标签
通常可以包含页面中内容的分区，文章中章节
6）aside标签：侧边栏，表示当前网页或文章的附属信息，双标签
通常可以包含：与主要内容相关的引用、侧边栏、广告、链接组等
7）hgroup标签：标题组，双标签
通常包含多个标题
8）address标签：联系信息，双标签，文字自带斜体效果
通常包含：文档的作者或文档的编辑者名称、电子邮箱、地址、电话号码等
新增其他标签：
1）figure标签：自带间距
语法：<figure>
被主体内容引用的，相对独立的内容块，可以包含：图片、图表、代码块等
<figcaption>定义figure中的标题</figcaption>
</figure>
注意：在一个figure标签中只允许放一个figcaption标签
2）mark标签：定义带有标记的文本，目的吸引用户。默认自带背景颜色（黄色）和文字颜色（黑色），双标签
3）time标签：日期时间标签，定义公历时间，双标签
<time>2020年2月27日</time>
<time pubdate="pubdate" datetime="2020-2-27"></time>
pubdate属性：当前内容的发布时间
注意：datetime属性定义日期时间，如果没有该属性，必须在元素内规定日期和时间
4）progress标签：进度条
<progress></progress>
<progress max="100" value="50"></progress>
max属性：最大值
value属性：初始值
5）canvas标签：图形容器，如果绘制形状必须使用JavaScript来绘制3、HTML5兼容
最新版本的Chrome、Firefox、Safari、Opera支持部分HTML5特性。IE9支持部分HTML5特性
HTML5新标签在IE低版本中有兼容问题：
1）使用JavaScript新增元素的方式解决：
<script>
var ele = document.createElement("header"); //创建一个header元素，赋给ele变量
var oBox = document.getElementById("box"); //通过id名称获取元素，赋给oBox变量
oBox.appendChild(ele); //将新建元素追加到父元素中
</script>
<style>
header{
display: block;
}
</style>
2）使用谷歌提供的html5shiv.js解决兼容问题
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
4、新增多媒体标签
1）音频标签
audio 标签
<audio src="音频文件的路径">您的浏览器不支持audio元素播放音频。</audio>
IE8及更早版本的浏览器中不支持audio元素
HTML5中支持的音频格式：
ogg 支持的浏览器Chrome、Firefox、Opera10+
MP3 支持的浏览器Chrome、Firefox、Opera10+、IE9+、Safari5+
wav 支持的浏览器Chrome、Firefox、opera、Safari
常用属性：
src属性：音频文件的URL地址
controls属性：播放控件
loop属性：重复播放
muted属性：静音播放
source标签：可以链接不同格式的音频文件。浏览器使用第一个可以识别的格式
<audio controls>
<source src="videoAudio/biubiubiu.ogg">
<source src="videoAudio/hanmai.mp3">
<source src="videoAudio/nada.wav">
您的浏览器不支持audio元素播放音频。
</audio>
2）视频标签
video标签
<video src="视频文件的路径">您的浏览器不支持video元素播放视频。</video>
IE8及更早版本的浏览器中不支持video元素
HTML5中支持的视频格式：
ogg 支持的浏览器Chrome、Firefox、Opera
MEPG4 支持的浏览器Chrome、Firefox、Safari、IE9+
WebM 支持的浏览器Chrome、Firefox、Opera
常用属性：
src属性：视频文件的路径
controls属性：播放控件
loop属性：重复播放
muted属性：静音播放
width属性、height属性 设置视频播放器的宽度和高度，单位像素
poster属性：预览图片
source标签：可以链接不同格式的视频文件。浏览器使用第一个可以识别的格式
<video controls>
<source src="videoAudio/butterfly.ogg">
<source src="videoAudio/movie.mp4">
<source src="videoAudio/PPAP.webm">
您的浏览器不支持video元素播放视频。
</video>5、新增的表单元素和属性
新增表单标签--input类型
input、button、select-option、textarea
1）url类型：包含访问协议的URL地址的输入域，在提交表单时，会自动验证URL域的内容
2）email类型：包含e-mail地址的输入域，在提交表单时，会自动验证e-mail地址
3）search类型：用于检索关键字的输入域，多用于手机客户端
4）tel类型：用于输入电话号码的输入域，为移动端网页开发服务，在PC端网页中不生效，在移动端页面中点击tel类型的输入域时，跳出虚拟电话键盘（0-9、*、#）
5）number类型：用于包含数值的输入域
<input type="number" max="10" min="0" step="2" value="0">
max属性：最大值 min属性：最小值 step属性：合法的数字间隔，默认值为1
注意：当用户输入非法的数值时，会弹出相应提示信息，并阻止表单提交
6）range类型：生成一个数字滑动条
<input type="range" max="10" min="0" step="2" value="0">
注意：
range类型和number类型功能基本一致，
区别：外观样式不同、默认值不同。
range 类型的min属性默认值为0，max属性默认值为100
7）color类型：生成一个颜色选择器，值为十六进制色值(六位十六进制数)
8）date类型：日期选择器，包含年、月、日
9）datetime类型：输入日期时间（UTC时间）——手动
UTC+8 东8区
UTC-10 西10区
10）datetime-local类型：日期和时间选择器，包含年、月、日、时、分（无时区）
11）month类型：月选择器，包含年、月
12）time类型：时间选择器，包含时、分
13）week类型：周选择器，包含年、周（全年的第几周）
14）datalist类型：选项列表，与input元素配合使用
使用input元素的list属性和datalist的id属性关联
<input list="listCon">
<datalist id="listCon">
<option value="北京">北京</option>
<option value="重庆">重庆</option>
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</datalist>
表单属性：
1）min、max、step属性
输入域中所允许的最小值、最大值、步长
用于包含数字的input类型，如input的number、range类型
2）placeholder属性
为输入域设置提示信息
3）list属性
通过input元素和datalist元素实现可选的下拉列表；使用input元素的list属性和datalist的id属性关联
4）autocomplete属性：是否启用自动完成功能
autocomplete = "off" 元素不采用自动完成功能
autocomplete = "on 元素启动自动完成功能
5）autofocus属性：自动获取焦点
6）form属性：定义表单元素所属的表单区域
7）required属性：提交表单时，表单元素不能为空，如果设置value值，该属性失效
8）pattern属性：对用户输入内容做验证（正则表达则）
9）multiple属性：选择多个值
用于上传域和email类型的输入域css3新增属性
20200228
1、css3
选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面2、css2和css3
css2: 性能和访问相对较差；偏向于表现；部分效果需要使用图片实现；无兼容
css3: 性能和效果都能得到兼顾；实现动画效果；在css2中需要使用图片实现的可以在Css3中使用代码实现；部分属性需要兼容处理
3、渐进增强和优雅降级
渐进增强：针对低版本浏览器进行页面建构，保证最基本功能的实现，然后再针对高级的浏览器进行效果设置、交互的实现，达到更好的用户体验
优雅降级：一开始构建完美的用户体验，然后再针对低版本的浏览器进行兼容
4、浏览器私有前缀——兼容性前缀
浏览器 内核 css兼容性前缀
Chrome|Safari webkit -webkit-
firefox gecko -moz-
Opera presto -o-
IE trident -ms-
书写顺序：先写带有私有前缀的css3属性，再写标准的css3属性
Autoprefixer插件，为css3属性自动生成兼容性前缀：在css文件中按下F1，执行“Autoprefixer run”
5、选择器
1）属性选择器
css2中的属性选择器：
element[attr]{ } 指定了属性名，但没有指定属性值得element元素
element[attr=value]{ } 指定了属性名，并且指定了属性值为value的element元素
element[attr~=value]{ } 指定了属性名，并且属性值可以为词列表中的包含指定属性值value的element元素
css3中的属性选择器：
element[attr^=value]{ } 指定了属性名，并且属性值以value开头的element元素
element[attr$=value]{ } 指定了属性名，并且属性值以value结尾的element元素
element[attr*=value]{ } 指定了属性名，并且属性值中包含value的element元素
2）结构性伪类选择器
:root{ } 匹配根元素
element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式
偶数：even 或 2n
奇数：odd 或 2n+1
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素，n可以是数值、关键词、表达式
element:nth-of-type(n){ } 一组元素中选择特定类型的元素，n可以是数值、关键词、表达式
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算
3）状态伪类选择器
element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素
6、border-radius属性，圆角
border-top-left-radius: 左上角圆角设置
border-radius: 100px;
border-radius: 50%;
7、css3背景属性
1）多背景
background-image: url(图片的路径), url(图片的路径);
多个背景图片之间用逗号隔开。背景图显示越靠前，书写顺序越靠前
2）background-size属性：背景图尺寸设置
background-size: 数值;
background-size: 100px;/*等比例缩放*/
background-size: 100px 100px; /*根据尺寸缩放*/
background-size: 100% 100%;/*以元素的百分比来设置背景图片的宽、高*/
background-size: cover; 覆盖，等比例缩放到铺满整个盒子，但是背景图可能无法完整显示在盒子中
background-size: contain; 包含，等比例缩放到图片完整显示在盒子中，但是背景图可能无法铺满整个盒子
3）background-origin属性：背景图片的定位区域
background-origin: content-box; 背景图片相对于内容区域定位
background-origin: padding-box; 背景图片相对于内填充区域定位
background-origin: border-box; 背景图片相对于边框区域定位
4）background-clip属性：背景颜色的绘制区域
background-clip: content-box; 背景被裁剪到内容区域，仅在内容区显示
background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区域显示
background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示8、css3渐变属性
1）线性渐变 linear-gradient
background-image: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
方向：ndeg(n为数值)、left|right|top|bottom|left top|left bottom|right top|right bottom
重复线性渐变：
background-image: repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
2）径向渐变 radial-gradient
background-image: radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);
中心点的位置：x y| left|right|center|top|bottom|left top|left center|left bottom ...
background-image: -webkit-repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);
background-image: repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);用户界面&多栏布局&过渡&2D&3D
20200302
1、用户界面
1）resize属性：用户是否可以对元素进项调整
resize: none; 不允许用户调整元素尺寸
resize: both; 用户可以调整元素的宽度和高度
resize: horizontal;只允许用户调整元素的宽度
resize: vertical; 只允许用户调整元素的高度
注意：如果要使resize属性生效，必须与overflow属性配合使用，overflow的属性值可以是auto|hidden|scroll
2）box-sizing属性：允许以特定的方式定义匹配某个区域的特定元素
box-sizing: content-box; 默认值，在width属性和height属性之外增加padding属性和border属性
box-sizing: border-box; 内容的宽度和高度的得到，通过width属性和height属性减去padding属性值，减去border属性值2、多列布局——多栏布局
1）column-count属性：元素被分隔的列数
column-count: n; 元素内容被分隔成n列
column-count: auto; 由其他属性决定列数
2）column-width属性：列的宽度
column-width: npx; 每一列的宽度
column-width: auto; 由其他属性确定列宽
3）column-gap属性：列与列之间的间隔
column-gap: npx; 两列之间的间隔
column-gap: normal; 两列之间的间隔为常规间隔，W3C建议值为1em
4）column-rule属性：列边框--列与列之间的分隔线
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width属性：分割线的宽度
column-rule-style属性：分割线的线型（solid|double|dotted|dashed）
column-rule-color属性：分割线的颜色（关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)）
5）column-span属性：跨列合并
column-span: all; 横跨所有列合并3、transition属性：过渡属性
transition: transition-property transition-duration transition-timing-function transition-delay;
transition: css样式（属性名称） 动画的执行时间（单位秒|毫秒） 速度类型 动画的延迟时间（单位秒|毫秒）;
css样式: all表示所有属性
动画的执行时间：默认0
速度类型：
ease 默认值，平滑过渡
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
注意：必须要设置transition-duration属性动画的执行时间，否则动画的执行时间为0，不会产生过渡效果
transition: width 2s, background 10s;
4、css3变形——transform属性
2D变形：
1）平移
transform: translate(x,y); 元素从当前位置移动到给定的x轴和y轴的坐标位置
transform: translateX(x); 沿着x轴的方向移动
transform: translateY(y); 沿着y轴的方向移动
注意：水平向右值为正，垂直向下值为正值
transform: translate(50px);沿着x轴方向移动
2）旋转
transform: rotate(ndeg);
角度为正值，元素沿着顺时针方向旋转n度；角度为负值，沿着逆时针方向旋转
3）缩放
transform: scale(x,y); 元素沿着x轴和y轴做缩放
transform: scaleX(x); 沿着x轴方向缩放
transform: scaleY(y); 沿着y轴方向缩放
x和y的取值：0-1缩小，1表示正常大小，1以上表示放大，负值时，先翻转后缩放
transform: scale(0.5); x轴和y轴等比例缩放
4）倾斜
transform: skew(x,y); 元素沿着水平方向和垂直方向倾斜，单位deg
transform: skewX(x); 沿着x轴方向倾斜
transform: skewY(y); 沿着y轴方向倾斜
transform: skew(30deg);沿着x轴方向倾斜
注意：transform: rotate(360deg) scale(3);元素既要旋转又要缩放
transform-origin属性：元素基点位置的调整，必须与transform属性配合使用
3D变形必备属性：
1）transform-style属性：
transform-style: preserve-3d; 创建3D空间
2）perspective属性：透视属性，近大远小，单位像素
注意：以上两个属性均需要写在父元素中
3D空间的轴线：x轴（右为正）、y轴（下为正）、z轴（向外为正）
3D变形效果：
1）平移
transform: translateZ(z); 沿着z轴平移
transform: translate3d(x,y,z); 沿着x轴、y轴、z轴移动
2）旋转
transform: rotateX(xdeg); 沿着x轴方向旋转
transform: rotateY(ydeg); 沿着y轴方向旋转
transform: rotateZ(zdeg); 沿着z轴方向旋转
transform: rotate3d(x,y,z,angle); 沿着x轴、y轴、z轴旋转
3）缩放：
transform: scaleZ(); 沿着z轴缩放
transform: scale3d(x,y,z); 沿着x轴、y轴、z轴缩放3种居中方法&帧动画&弹性盒子
20200303
1、盒子的绝对居中——水平、垂直居中
1）margin负间距实现带有width属性和height属性的绝对定位元素的居中
2）margin: auto;实现带有width属性和height属性的绝对定位元素的居中
3）transform: translate();实现绝对定位元素的居中
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}2、帧动画
1）定义关键帧
@keyframes 动画名称（英文）{
0%{ } 动画的开始
50%{ }
100%{ } 动画的结束
}
@keyframes 动画名称（英文）{
from{ } 动画的开始
to{ } 动画的结束
}
2）引用关键帧
animation: animation-name animation-duration [animation-timing-funciton] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];
animation: 动画名称 动画的执行时间（s|ms） 动画的类型(linear|ease|ease-in|ease-out|ease-in-out) 延迟时间 播放次数(默认为1次,infinite无限循环播放) 动画的运动方向(alternate正向反向轮流播放|reverse反向播放|normal正向播放|alternate-reverse反向正向轮流播放) 动画结束之后显示的状态(forwards动画结束时的状态|both动画结束或开始时的状态|backwards动画开始时的状态)
3）animate.css动画库
在动画库中预设了抖动shake、闪烁flash、弹跳bounce、翻转flip、旋转rotateIn|rotateOut、淡入淡出fadeIn|fadeOut
使用步骤：
1）引入文件：<link rel="stylesheet" href="css/animate.css">
2）使用：<div class="animated bounce">内容</div>
animated类名是基本类名，必须添加；第二个类名为实现指定动画的样式名3、弹性盒子--flex
1）弹性盒子——css3中新增的布局方式。是一种当屏幕大小、设备类型不同的时候，都能够确保元素拥有恰当的布局方式
弹性性盒模型的内容包括：弹性容器、弹性子元素（项目）
引入弹性盒布局的目的：用一种较为有效的方式对容器中的子元素进行排列、对齐、分配空白空间，即使弹性子元素的尺寸发生动态变化，弹性盒布局也能正常工作
2）设置弹性盒子：
display: flex; 将元素设置为弹性盒容器
display: inline-flex; 将元素设置为弹性盒容器
注意：设置为flex布局之后，子元素的float、clear、vertical-align属性都会失效
3）基本概念：
容器
项目
主轴：默认水平方向，向右
主轴的起点
主轴的终点
交叉轴：默认垂直方向，向下
交叉轴的起点
交叉轴的终点
4）容器属性——添加弹性容器上
flex-direction属性：设置主轴的方向
flex-direction: row; /*默认值，设置主轴方向为水平方向，起点在左侧*/
flex-direction: row-reverse; /*设置主轴方向为水平方向，起点在右侧*/
flex-direction: column; /*设置主轴方向为垂直方向，起点在上方*/
flex-direction: column-reverse; /*设置主轴方向为垂直方向，起点在下方*/
justify-content属性：设置弹性子元素在主轴上的对齐方式
justify-content: flex-start; /*默认值，子元素位于弹性盒的开头*/
justify-content: flex-end; /*子元素位于弹性盒的结尾*/
justify-content: center; /*子元素位于弹性盒的中间*/
justify-content: space-around; /*子元素之前、之后、之间都有空白空间*/
justify-content: space-between; /*子元素和子元素之间有空白空间*/
align-items属性：设置弹性子元素在交叉轴上的对齐方式
align-items: stretch; /*默认值，如果子元素没有高度或高度为auto时，将占满整个容器的高*/
align-items: flex-start; /*子元素在交叉轴的起点对齐*/
align-items: flex-end; /*子元素在交叉轴的终点对齐*/
align-items: center; /*子元素在交叉轴的中点对齐*/
align-items: baseline; /*子元素在第一行文字的基线对齐*/
flex-wrap属性：设置弹性子元素在一根轴线上排不下的换行方式
flex-wrap: nowrap; /*默认值，不换行*/
flex-wrap: wrap; /*换行，第一行显示在上方*/
flex-wrap: wrap-reverse; /*换行，第一行显示在下方*/
align-content属性：设置多根轴线的对齐方式，如果只有一根轴线，属性失效
align-content: stretch; /*默认值，轴线占满整个交叉轴*/
align-content: flex-start; /*与交叉轴的起点对齐*/
align-content: flex-end; /*与交叉轴的终点对齐*/
align-content: center; /*与交叉轴的中点对齐*/
align-content: space-around; /*每根轴线之上、之下、之间都有留白*/
align-content: space-between; /*每根轴线之间都有留白*/
5）项目属性——添加在子元素上
order属性：调整子元素的排列次序
order: 数值; 数值不加单位，默认值为0，数值越大，排列越靠后
flex-grow属性：调整子元素的放大比例
flex-grow: 数值; 数值不加单位，默认值为0，表示不放大
flex-shrink属性：调整子元素的缩小比例
flex-shrink: 数值; 数值不加单位，默认值为1，表示当空间不足时，等比例缩小；值为0表示当空间不足时，不缩小
align-self属性：调整弹性容器中被选中的子元素的对齐方式
align-self: auto; /*默认值，继承了父容器的align-items属性，如果没有父元素值为stretch*/
align-self: stretch; /*占满整个容器的高度*/
align-self: flex-start; /*交叉轴起点对齐*/
align-self: flex-end; /*交叉轴终点对齐*/
align-self: center; /*交叉轴中点对齐*/
align-self: baseline; /*子元素的第一行文字的基线对齐*/4、calc()函数：动态计算长度值的函数，css3新增
语法：calc(数学表达式)
支持+、-、*、/运算，先算括号里面的
注意：运算符前后添加空格
兼容性IE9+
less&移动端布局方案
20200304
1、css预处理--less
1）什么是预处理？
定义了一种新的语言
基本思想：用一门专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者只需要使用这种语言进行编码工作即可
2）less：拥有一套自定义的语法和一个解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器识别
编译的方法：命令行编译、编译器编译、在线编译、第三方编译工具等
好处：结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码
3）编写less文件
新建less文件：*.less
4）less的基本语法
注释：
标准css注释： /* 注释内容 */ 会保留到编译后的文件中
单行注释：//注释内容 只保留到less源文件中，编译后会被省略
导入样式: @import 可以导入css文件，导入less文件
@import "*.css";
@import url(*.css);
@import url("*.css");
注意：分号是必不可少的，文件的后缀名也是必不可少的
@import和link的区别
变量：
定义变量：@变量名: 值;
使用：
作为属性值使用——.box{ background: @变量名; }
作为属性名称使用——
<div class="box left"></div>
@le: left;
.box{ border-@{le}: 5px solid #000; }
作为选择器名称使用——
.@{le}{ height: 20px; }
SyntaxError语法错误
混入：将一种或一系列的属性从一个规则集引入到另一个规则集
混入类名：
定义通用属性：.bw{ width: 100px; } 在解析后的css文件中可以看到
.bw(){ width: 100px; } 在解析后的css文件中看不到
调用定义好的属性：.wrap{ .bw; }
混入参数：
定义：.boRa(@radius){ border-radius: @radius; }
调用：.box{ .boRa(20px); }
注意：混入参数没有设置默认，调用时必须传入参数
定义：.boRa(@radius:20px){ border-radius: @radius; }
调用：.box{ .boRa;}
.box{ .boRa(30px);}
注意：混入参数并且设置了默认值，调用的时候如果不写参数，使用默认值作为显示的值
使用@arguments来引用所有传入的参数：
.boSha(@bx,@by,@bb,@bc){ box-shadow: @arguments;}
.bo(@bwi:10px,@bs:solid,@bcol:#0f0){ border: @arguments; }
.box{
.boSha(10px,10px,20px,#000);
.bo;
.bo(5px);
.bo(5px,dotted);
.bo(5px,dashed,#000);
}
嵌套：模仿HTML结构
选择器嵌套
&表示引用父元素
继承：extend伪类实现样式的继承
.ftStyle{ font-style: italic; }
.box{
h3{
font-size: 50px;
&:extend(.ftStyle);
}
}
.box{
h3:extend(.ftStyle){
font-size: 50px;
}
}
运算：任何数值、颜色、变量都可以运算
1）变量
2）数值
3）颜色色值：先将颜色色值转换成rgb模式，进行计算，然后再将rgb模式转回十六进制色值并返回
rgb模式的取值范围0-255，如果计算时超过这个区间，使用超过后的接近的范围值呈现2、移动端浏览器
UC浏览器、QQ浏览器、百度手机浏览器、360浏览器、Chrome浏览器、搜狗手机浏览器、猎豹浏览器等等浏览器内核为webkit3、viewport设置--虚拟窗口
Apple为了解决移动端屏幕分辨率大小问题提出
移动端视口：布局视口、视觉视口、理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放。
content：
width--虚拟窗口的宽度，device-width设备宽度
initial-scale--初始缩放比例
maximum-scale--最大缩放比
minimum-scale--最小缩放比
user-scalable--是否允许用户手动缩放
user-scalable=no 不允许用户手动缩放
user-scalable=yes 允许用户手动缩放，默认值
4、常见移动端布局方案
1）流式布局——宽度自适应适配
垂直方向高度固定，水平方向使用百分比实现，并且使用弹性布局、浮动、定位等技术综合使用创建可扩展的流式布局
优先：可以很好解决自适应需求
缺点：实际效果可能会不协调，设计存在局限性
2）rem布局
rem——相对于根元素的font-size属性值的单位，css3新增单位
未经调整的浏览器的默认字号为16像素，1rem = 16px
rem布局的实现：
设置页面的viewport；
动态计算并设置html的font-size值;
按照PC端布局方式正常布局，将px单位换算成rem单位
3）vw适配
vw——viewport's width css3规范中视口单位
vh——viewport's height
vw和vh都是将屏幕分成100份，1vw等于屏幕宽度的1%
iphone5 320 1vw-- 3.2 多少个vw是100像素 100px * 1vw/3.2 = 31.25
iphone6 375 1vw--3.75 100px * 1vw/3.75 = 26.6666
vw布局：750px宽度 100vw = 750px 1vw = 7.5px
兼容：IE9+ IOS6.1+ Android4.4+
在PC端使用时要注意滚动条，移动端滚动条不占位
vw+rem——750px
1vw = 7.5px 1px = 0.133333vw
假设1rem = 100px， 100px = 13.333vw
html{
font-size: 13.333vw;
}
4）flexible.js + rem布局 （已经废弃）
解决的HTML5页面终端适配
实现原理：设备划分成10份，确定好html标签的font-size属性值
750px,html{ font-size: 75px; },页面中元素的rem值 = 元素的px值/75
使用方法：
1）在head标签中添加插件
方法一：直接将插件下载到本地，通过script标签对链接；
方法二：通过script标签对，加载阿里CDN文件：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2）将视觉稿中的px转换成rem
5）响应式布局
一个网站能适配多个终端，实现不同屏幕分辨率的终端上都能呈现出较好的显示效果，而且不需要为每个终端定制一个特定版本。
响应式布局的组成：弹性盒布局、图片、css media query的使用等等
响应式布局的原理：通过媒体查询检测不同的设备屏幕尺寸，适当调整标签显示布局，在每种设备屏幕宽度下呈现出不同的页面效果
6）Grid网格布局
flex布局——轴线，可以看成一维布局
1、基本介绍
Grid网格布局——二维布局
可以将容器分成“行”、“列”，产生单元格
2、基本概念
容器container——使用网格布局的区域
项目item——容器内使用网格定位的子元素
行row——容器中水平区域
列column——容器中垂直区域
单元格cell——行和列交叉区域，m行n列会产生的单元格数为m*n
网格线grid line——划分网格的线，m行有m+1根水平网格线媒体查询&移动端尺寸计算
20200305
1、媒体查询
1）什么是媒体查询
可以根据设备显示器特性为它设置css样式
媒体查询可以检测的内容：viewport的宽度和高度、设备的宽度和高度、设备的方向、分辨率
2）引入方式
在样式表中引入——在style标签对中引入、在外部样式表中引入
@media mediaType and (media feature){
选择器{ 属性: 属性值; }
}
mediaType设备类型：
all 适用于所有多媒体类型设备
print 适用于打印机或打印预览
screen 电脑屏幕、平板电脑、智能手机等
speech 屏幕阅读器等
media feature媒体特性表达式：
width 浏览器宽度 height浏览器的高度
max-width最大宽度 min-width最小宽度
device-width设备宽度 device-height设备高度 max-device-width最大设备宽
orientation 设备方向 orientation:landscape|portrait 横屏|竖屏
aspect-ratio: 1/2;可见区宽度和高度的比率
device-aspect-ratio: 1/1; 输出设备的屏幕可见区宽度和高度的比率
使用link标签引入：
<link rel="stylesheet" media="mediaType and (media feature)and (media feature)" href="*.css">移动端样式重置&兼容&像素
20200306
1、移动端样式重置
1)禁止用户选中文字，安卓无效
-webkit-user-select: none;
2)禁止长按弹出系统菜单。
-webkit-touch-callout none;
3)去除android下a/button/input标签被点击时产生的边框&去除ios下a标签被点击时产生的半透明灰色背景。
-webkit-tap-highlight color: rgba(0,0,0,0);
4)切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小(需要给body下的所有元素)。-webkit-text- size-adjust: 100%;
5)按钮在ios下都是圆角。
-webkit-appearance. none;
border-radius: 0;
6)修改placeholder的样 式。
input:-webkit-input-placeholder{ color:#000; }
input:focus:. webkit-input-placeholder{color:#f00; }2、移动端特殊处理
1)超小字体处理一- -transform: scale()
2)动画定义3D启用硬件加速一开启GPU硬件加速模式从CPU--GPU
-webkit-transform: translate3d(0,0,0);
transform: translate(0,0,0);
3)圆角bug :部分Android手机圆角失效
background-clip: padding-box;
4)Input 的placeholder会出现文本位置偏上的情况
在input输入文本垂直居中的情况下，给placeholder设置padding-top，不设置行高3、像素的三种分类
1）设备像素——物理像素
是设备固有的属性
早起只有物理像素，在不缩放的情况下1px表示1个物理像素；
iPhone6/7/8的物理像素为750*1334
设备分辨率——显示器的宽度和高度分别是多少个物理像素
2）设备独立像素——独立像素、逻辑像素
是操作系统定义的像素单位
iPhone6/7/8的独立像素为375*667，正好是物理像素的一半
逻辑分辨率：使用屏幕的宽度*高度来表示
设备像素比DPR——不同型号手机物理像素和独立像素的关系：
设备像素比 = 物理像素/独立像素
3）css像素
width: 100px; 在放大200%,宽度100个css像素
原本的元素宽度为100个独立像素，当缩放200%之后元素的宽度变为200个独立像素
css像素和独立像素的关系：缩放比例是css像素的边长/独立像素的边长
在缩放比例为100的情况下，一个css像素为一个独立像素
设备像素比——css像素和物理像素的关系4、Retina显示屏：视网膜屏
1像素边框问题：
border-width: thin;//thin细边框、medium中等、thick粗5、属性
outline属性：轮廓，不占位
outline: none; 去掉轮廓线
outline: 轮廓宽度 轮廓线型 轮廓颜色;
outline-offset属性：对轮廓进行偏移
letter-spacing属性：字间距
word-spacing属性：词间距
响应式布局方案
20200310
1、什么是响应式布局
一个网站能适配多个终端，实现不同屏幕分辨率的终端上都能呈现出较好的显示效果，而且不需要为每个终端定制一个特定版本。
响应式布局的组成：弹性盒布局、图片、css media query的使用等等
响应式布局的原理：通过媒体查询检测不同的设备屏幕尺寸，适当调整标签显示布局，在每种设备屏幕宽度下呈现出不同的页面效果2、技术要点
1）meta标签的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
IE8及更早版本的浏览器中不支持媒体查询，需要使用media-queries.js或respond.js增加IE对媒体查询的支持：
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
调用Chrome浏览器或者是IE高版本浏览器
<meta name="HandheldFriendly" content="true">
兼容不支持viewport的设备
2）使用媒体查询适配对应样式
常用屏幕尺寸查询：
超小屏幕下 手机 <768px
小屏幕 平板 >= 768px
中等屏幕 桌面 >= 992px
大屏幕 桌面 >=1200px
移动端优先：超小型设备 手机 768px以下
@media screen and (min-width: 768px){ 平板电脑 }
@media screen and (min-width: 992px){ 台式电脑 }
@media screen and (min-width: 1200px){ 大台式电脑 }
大屏幕优先：大台式电脑 1200px以上
@media screen and (max-width: 1200px){ 台式电脑 }
@media screen and (max-width: 992px){ 平板电脑 }
@media screen and (max-width: 768px){ 手机 }
3）响应式字体设置
rem单位相对于html的font-size值做调整
em单位相对于父元素的font-size值做调整
4）百分比布局：
宽度不固定，可以使用百分比；内外间距（左右方向）也可以使用百分比
在实现的过程中需要布局容器：
手机 <768px 布局容器的宽度100%
平板 >=768px 设置宽度为750px
桌面 >=992px 设置宽度970px
大屏 >=1200px 设置宽度1170px
浮动、定位、弹性盒子
响应式内容：
img标签：前景图，可以通过max-width属性控制图片的大小，height: auto;
响应式背景图片： background-size属性调整背景图的尺寸
3、响应式优缺点
优点：一站适配所有终端；减少工作量；节省时间；每个设备都能得到较好的设计
缺点：会加载更多的样式和脚本资源；设计难于精确控制；老版本的浏览器中兼容不好网格布局方案
20200311
1、Grid网格布局
flex布局——轴线，可以看成一维布局
1）基本介绍
Grid网格布局——二维布局
可以将容器分成“行”、“列”，产生单元格
2）基本概念
容器container——使用网格布局的区域
项目item——容器内使用网格定位的子元素
行row——容器中水平区域
列column——容器中垂直区域
单元格cell——行和列交叉区域，m行n列会产生的单元格数为m*n
网格线grid line——划分网格的线，m行有m+1根水平网格线2、相关属性
容器属性——写在父元素上
1）display属性:
display: grid; 容器采用网格布局
2）grid-template-rows属性、grid-template-columns属性 ——对容器的水平方向和垂直方向划分
属性值： 像素|百分比|auto|repeat()|fr|minmax()|网格线名称
repeat(),有两个参数，第一个参数表示重复的次数，第二个参数表示重复的值
minmax(),有两个参数，分别表示最大值和最小值
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 25% 100px;
grid-template-columns: 100px auto 100px;
grid-template-rows: repeat(3, 30%);
grid-template-rows: 1fr 2fr 1fr;/*3个值的和必须大于等于1，否则会有空白空间*/
grid-template-rows: repeat(2,1fr) minmax(100px,300px);
grid-template-rows: 1fr 1fr minmax(100px,200px);
grid-template-rows: [r1] 100px [r2] auto [r3] 100px; /*网格名称*/
grid-template-columns: [c1] 100px [c2] auto [c3] 100px;
3）grid-row-gap属性、grid-column-gap属性、grid-gap属性 ——定义网格中的网格间隙
定义网格中的网格间隙
简写：grid-gap: grid-row-gap grid-column-gap;
grid-row-gap: 10px; 行间距
grid-column-gap: 20px; 列间距
grid-gap: 10px 20px;
4）grid-auto-flow属性： ——排列顺序
grid-auto-flow: row; 默认值，先行后列
grid-auto-flow: column; 先列后行
5）justify-items属性、align-items属性、place-items属性——内容分布
justify-items属性：水平呈现方式
align-items属性：垂直呈现方式
属性值：start|end|center|stretch
开始|结束|中间|默认
简写：place-items: align-items justify-items;
place-items: start end;
6）justify-content属性、align-content属性、place-content属性 --整体分布
justify-content属性：水平分布方式
align-content属性：垂直分布方式
属性值：start|end|center|space-between|space-around|space-evenly;
开始|结束|中间|元素间留白|元素之前之间之后留白|元素间隔相等
简写：place-content: justify-content align-content;
7）grid-template-areas属性：定义区域
应用在子项目的属性：grid-area属性，规定项目所在区域
grid-template-areas: "box1 box1 box1"
"box2 box2 box3"
"box2 box2 box3";
划分三个区域box1、box2、box3
分配三个区域：
.wrap div:nth-child(1){
grid-area: box1;
}
.wrap div:nth-child(2){
grid-area: box2;
}
.wrap div:nth-child(3){
grid-area: box3;
}
项目属性：
1）grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性-项目的位置
grid-column-start属性：水平填充，左边框所在的垂直网格线
grid-row-start属性：垂直方向填充，上边框所在的水平网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-end属性：下边框所在的水平网格线
简写：
grid-column: grid-column-start / grid-column-end;
grid-row：grid-row-start / grid-row-end;
grid-column-start: 2; 第二根垂直轴线开始
grid-row-end: 3; 第三根水平轴线结束
注：单位是第几条轴线，左-上，起始和结束可以决定项目的大小
2）justify-self属性、align-self属性、place-self属性
justify-self属性：水平方向的对齐方式
align-self属性：垂直方向对齐方式
属性值：start|end|center|stretch
开始|结束|中间|默认