前端知识&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、GBKutf-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、特殊字符：

空格 &nbsp;
小于<  &lt;
大于> &gt;
&   &amp;
已注册  &reg;
版权符号  &copy;
商标  &trade;等

文本样式&表格&列表&表单

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）如果选择器的权值相同，后写的内容会覆盖先写的内容；行间样式拥有最高优先级但是高不过!importantbackground-color: lightcoral !important;

5、文字属性

1）font-size 属性：字号，单位像素浏览器的默认字号为16像素2）font-family属性：字体、字族如果字体名称包含空格，或字体名称为中卫，字体名称上加引号；多个字体名称作为一个回退系统来保存，如果第一个字体不被浏览器支持，则尝试下一个，多个字体之间                        用逗号隔开；中英文混排的文字，英文字体要排在中文字体前面；Arial,"Times New Roman","微软雅黑","宋体" 3）font-weight属性：文字加粗，范围100~900之间，100~400之间都是normalfont-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--#324rgb(r,g,b):r-red红色 g-green绿色 b-blue 蓝色 取值范围0-255rgba(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=asdhttps://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-Ha

2、盒模型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|数值|inheritheight属性：元素的高度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+e

4、图片格式

1）psd： 是ps的源文件格式，分层文件
2）在页面中用到的图片格式jpg格式--jpeg：不支持透明，色彩丰富；适合复杂颜色及形状，网页中的高清大图文件小；有损压缩，反复保存图片质量会下降gif格式：支持透明和不透明，色彩丰富，支持动画；适用于色彩单一的图标、动画图片文件小，没有兼容性问题；只支持256种颜色png格式：支持透明、不透明、半透明；适用于网页中的小图，存在半透明效果的图片png8: 功能跟GIF相似png24:色彩丰富，对半透明效果的细节显示较好，IE6不支持无损压缩；不支持动画，色彩丰富的图片尺寸较大webp格式：文件较小，支持有损和无损压缩，支持动画、透明；浏览器兼容性不好；适用于支持webp格式的app和webview

5、拆分页面的原则

精确到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）条件级Hackif条件：是否、大于（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属性：静音播放autoplay:音频加载完毕后自动播放。preload:1)auto 预加载音频视频。2）metadata 只预加载音频视频元数据。  有autoplay时此属性无效。js控制媒体play()播放pause()暂停load()重新加载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、OperaMEPG4 支持的浏览器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属性默认值为1007）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+1element: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-gradientbackground-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-gradientbackground-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); 元素沿着水平方向和垂直方向倾斜，单位degtransform: 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浏览器、搜狗手机浏览器、猎豹浏览器等等浏览器内核为webkit

3、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 = 16pxrem布局的实现：设置页面的viewport；动态计算并设置html的font-size值;按照PC端布局方式正常布局，将px单位换算成rem单位3）vw适配vw——viewport's width css3规范中视口单位vh——viewport's heightvw和vh都是将屏幕分成100份，1vw等于屏幕宽度的1%iphone5   320  1vw-- 3.2   多少个vw是100像素   100px * 1vw/3.2 = 31.25iphone6   375  1vw--3.75                      100px * 1vw/3.75 = 26.6666vw布局：750px宽度   100vw = 750px   1vw = 7.5px兼容：IE9+  IOS6.1+   Android4.4+在PC端使用时要注意滚动条，移动端滚动条不占位vw+rem——750px1vw = 7.5px   1px = 0.133333vw假设1rem = 100px，  100px =  13.333vwhtml{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开始|结束|中间|默认

大前端学习笔记--持续随缘更新相关推荐

大前端学习笔记 -- 搭建自己的服务器端渲染 (SSR)
搭建自己的服务器端渲染 (SSR) 一.渲染一个Vue实例 mkdir vue-ssr cd vue-ssr npm init -y npm i vue vue-server-renderder se ...
重拾CCNA，学习笔记持续更新ing......(4)
重拾CCNA,学习笔记持续更新ing......(4) 路由器作用功能的经典解说(笑)(非原创) 假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大 ...
web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
Java开发面试高频考点学习笔记（每日更新）
Java开发面试高频考点学习笔记(每日更新) 1.深拷贝和浅拷贝 2.接口和抽象类的区别 3.java的内存是怎么分配的 4.java中的泛型是什么?类型擦除是什么? 5.Java中的反射是什么 6. ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
靠在校所学的前端知识，你可能连实习都找不到，附【大前端学习路线】
又是一年毕业季,又有万千学子开始涌入社会这片汪洋. 前些日子有个大学生小伙问了我关于前端开发找工作的问题,他说他很迷茫,大家都找到了工作,自己的简历投了却杳无音信,于是来问我是不是哪些环节没有做好. ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
大数据学习笔记：Hadoop生态系统
文章目录一.Hadoop是什么二.Hadoop生态系统图三.Hadoop生态圈常用组件 (一)Hadoop (二)HDFS (三)MapReduce (四)Hive (五)Hbase (六)Zo ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...

大前端学习笔记--持续随缘更新