1、浏览器相关

1.1、常见浏览器

浏览器	内核	前缀
IE	trident内核	-ms-
Firefox	gecko内核	-moz-
opear	webkit 内核	-o-
safari	webkit 内核	-webkit-
chrome	webkit内核一个分支blink内核	-webkit-

在学习和工作时,都用chrome

1.2、清除表单默认样式

• 清除表单的默认样式 快捷键 app tab键
• 带前缀的属性属于测试阶段的属性,每个内核的实现会有区别,或者根本没有实现

• -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  

2、html相关内容

2.1、html基本标签

标签	描述
	文档类型的声明,让浏览器按照相应版本的html进行解析
	网页的根标签,所有其它的标签都被包含
	头部标签,关于网页的一些配置信息
	字符集设置或者叫编码设置
	标题标签
	主体标签,所有在浏览器中显示的其他的内容和标签都被包含

2.2、html常用标签

标签	描述
	一级标题
	二级标题
	三级标题
	四级标题
	五级标题
	六级标题
	段落标签
	通用行内容器
	水平线标签
	换行标签

语义：标签基本都具备一定语义，爬虫会根据语义标签来获取文本信息

后面的标签语义更强烈

    <b>加粗</b>     <strong>加粗</strong>
    <i>倾斜</i>       <em>倾斜</em>
    <u>下划线</u>    <ins>下划线</ins>
    <s>删除线</s>    <del>删除线</del>

2.3、图片标签

图片标签：img 属性:：属性名对应属性值的形式, 也叫键值对,key/value, k/v <人 姓名="老刘" 性别="男" 身高="196"> 图片标签的属性: 网页中的基本单位是像素px src：图片的路径 width：图片的宽度 单位是像素, 当单独分别设置宽度或者高度时,宽高会跟着等比例缩放 height:：图片的高度 单位是像素, 当单独分别设置宽度或者高度时,宽高会跟着等比例缩放 border:：图片边框 title：提示文本 alt：替换文本,当图片不存在时,进行提示

<img src="mm1.jpg" width="800px" height="500" border="5" title="提示文本" alt="替换文本,当图片不存在时,进行提示">

2.3.1、插入图和背景图的区别

插入图是img标签，标签在网页中站位置

背景图是属性，属性是不占位置的，我们可以认为背景图就是一个丰富多彩的背景颜色，背景图的尺寸与标签的尺寸无关。

2.4、路径

路径：网页和其他文件的位置关系

2.4.1、相对路径

2.4.1.1、同级相对路径

同级相对路径： 网页和其他文件在同一个目录下 写法一：直接写其它文件的文件名 写法二：写./其它文件名

<img src="./mm.jpg" >

2.4.1.2、下一级相对路径

下一级相对路径：其他文件进入到另一个目录下,需要准确的写出进入的文件夹(目录)的名字，有几层写几层，找的过程是鼠标双击的动作

<img src="wc/1/mm.jpg" >

2.4.1.3、上一级相对路径

上一级相对路径：网页在其他目录下,需要跳出文件夹找其他的文件，需要../，有几层写几个../，跳出找其它文件是鼠标单击返回的动作

<img src="../../mm.jpg" >

2.4.2、 绝对路径

绝对路径： 文件在磁盘中的物理位置 出于安全的考虑，浏览器不能直接通过绝对路径访问磁盘中的文件，但是可以通过网站的绝对地址访问文件

<img src="C:\222\mm.jpg" >
<img src="https://pics7.baidu.com/feed/0b46f21fbe096b638a6b8accb9abb343eaf8ac58.jpeg?token=29688576e00e83487987f4693287d084" data-loaded="0">

2.5、超链接

a标签的属性

href: 网页的路径 target:：_self 默认值 从当前选项卡直接跳转到目标页 _blank 重新打开一个选项卡跳转到目标页

<a href="two.html" target="_blank">去第二个网页</a>

2.5.1、空链接

空链接：当没有想好调到哪个网页时，我们要设置成空链接，空链接一个#会返回顶部，通常写两个##

<a href="##" >

2.5.2、锚点链接（点击跳到指定位置）

锚点链接：在网页内部进行跳转，需要给目标标签设置id属性，a标签中的href用#id名称关联id值

<font id="one">第一层</font>
<p>段落</p>
<p>段落</p>
<a href="#one">去第一层</a>

2.6、列表

2.6.1、无序列表

无序列表：是被一组ul管理，li列表项，ul只能包含li。li可以包含其他标签

	<ul>
		<li>帽子</li>
		<li>假发</li>
		<li>
			<h1>伴侣</h1>
		</li>
		<li>
			<a href="##">车</a>
		</li>
	</ul>

2.6.2、有序列表

有序列表：是被一组ol管理，li列表项，ol只能包含li。li可以包含其他标签

	<ol>
		<li>
			<h1>伴侣</h1>
		</li>
		<li>电脑</li>
		<li>假发</li>
		<li>
			<a href="##">车</a>
		</li>
	</ol>

2.6.3、自定义列表(常用底部导航)

自定义列表：是被一组dl管理，dt是主题，dd是列表项，dl只能包含dt和dd，dt和dd可以包含其他标签

	<dl>
		<dt>
			<h1>亚洲</h1>
		</dt>
		<dd>
			<a href="##">中国</a>
		</dd>
		<dd>韩国</dd>
		<dd>日本</dd>
		<dd>泰国</dd>
	</dl>

2.7、表格

标签	描述
table	表格标签
tr	行标签
td	单元格标签 列默认是以当前列中最宽的为基准
th	表头标签 内容水平居中且加粗的
caption	表格标题

属性	描述
border	边框
width / height	宽度 / 高度
cellspacing	单元格与单元格之间的间距
align left(默认)	居左/center 居中/right 居右
colspan	夸列合并单元格
rowspan	跨行合并单元格

<table border="1" width="800px" height="300" cellspacing="0"  align="center">
		<caption>学生详情:</caption>
		<tr align="center">
			<th>姓名</th>
			<th>年龄</th>
			<th>性格</th>
		</tr>
		<tr align="center">
			<td>小明</td>
			<td>50</td>
			<td>开朗</td>
		</tr>
		<tr align="center">
			<td>小王</td>
			<td>50</td>
			<td>活泼</td>
		</tr>
		<tr align="center">
			<td>小李</td>
			<td>53</td>
			<td>成熟</td>
		</tr>
</table>

2.8、表单

HTML 表单用于搜集不同类型的用户输入。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

form元素

form元素定义 HTML 表单：

属性	描述
action	规定向何处提交表单的地址（URL）（提交页面）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
target	规定 action 属性中地址的目标（默认：_self）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。

<form action="http://www.baidu.com" method="get">
    姓名：<input type="text">
    密码：<input type="password"/>
</form>

label 标签

为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label 标签的 for 属性应当与相关元素的 id 属性相同。

属性	值	描述
for	id	规定 label 绑定到哪个表单元素。
from	formid	规定 label 字段所属的一个或多个表单。

<label for="txt1">姓名:</label>
<input type="text" id="txt1">

input元素

元素是最重要的表单元素。

元素有很多形态，根据不同的 type 属性。

类型	描述	备注
text	定义常规文本输入。
password	定义密码字段
radio	定义单选按钮输入（选择多个选择之一）	name是组的概念,将多个单选的name设置相同的名称,实现单选效果 checked默认选中 第一种 checked="checked" 第二种 checked=""第三种 checkedbr>
checkbox	定义复选框。	checked 默认选中，三种方式同单选
button	定义按钮。
submit	定义提交按钮（提交表单）
reset	重置按钮

姓名:<input type="text" >
密码:<input type="password"  />
性别:<input type="radio" name="gender" for="male">男
    <input type="radio" name="gender" for="female">女
您的兴趣爱好是:
			<input type="checkbox">抽烟
			<input type="checkbox">喝酒
			<input type="checkbox" checked="checked">烫头
公司简介:<textarea></textarea>
		<input type="button" value="按钮">
		<button type="submit">按钮</button>

输入限制

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

select 下拉菜单

标签	描述		备注
option	下拉项	selected 默认选中，三种写法和checked一样
optgroup	下拉组		label 下拉组标题

textarea 文本域 标签定义多行的文本输入控件。

2.9、特殊字符

特殊字符	描述	字符的代码(记得前面面+&)
	空格符	nbsp;
<	小于号	lt;
大于号		gt;
&	和号	amp;
¥	人民币	yen;
©	版权	copy;
®	注册商标	reg;
°	摄氏度	deg;
±	正负号	plusmn
×	乘号	times;
÷	除号	divide;
²	平方2	sup2;
³	平方3	sup3;

2.10、常用文本属性

标签	描述
color: red;	字体颜色
font-size: 60px;	字号 （chrome默认字号是16px）
font-family: "宋体";	字体（chrome的默认字体是微软雅黑）
text-align: center;	文本水平居中 left(默认值)/center/right
font-weight: bold;	字体加粗 正常400或者normal 加粗700或者bold
text-indent: 2em;	首行缩进 em单位 1em等于当前一个字号的大小
text-decoration: none;	划线 underline下划线 / overline顶划线 line-through中划线 / none去掉线
text-style：italic;	设置倾斜 italic倾斜 / normal正常
word-break: break-all	强制换行
white-space: nowrap;	强制不换行
letter-spacing: 0px;	字间距

字体可以设置多个，用逗号隔开，按照顺序依次识别，如果全不识别，用系统的默认字体

2.11、显示模式

显示模式	描述
行内显示模式	一行有多个，设置宽高不起作用，尺寸由内容决定 在没有内容时，宽高是0，当行内元素有一个及以上的空格时 显示效果之前会有一个默认的间距
行内元素	span，a，b，strong，i，em，u，ins，s，del

块级显示模式	独占一行,设置宽高起作用,在没有设置固定宽度时,和父元素的宽度一样
块级元素	html，body，div，h1-h6，p，ul，ol，li，dl，dt，dd，hr，form

行内块显示模式	一行有多个,设置宽高其作用
行内块元素	img，表单标签

2.11.1显示模式转换

其它显示模式转换成行内块显示模式: display:inline-block
其它显示模式转换成块级显示模式: display:block

2.12、选择器

2.12.1、标签选择器

标签选择器 标签名{属性........}

2.12.2、类选择器

定义类名称：用点开头+类名称 调用类名：用标签的class属性等于类名

类名的命名规范: 不能用数字开头,可以用字母或者下划线开头,加上字母,数字,下划线,中划线 建议用驼峰命名法：第一个单词首字母小写,从第二个单词开始首字母大写

<style type="text/css">
    ._zz{
		color:blue;
		font-size: 30px;
	}
</style>
<body>
	<h2 class="_zz">0826组长</h2>
</body>

2.12.3、多类名调用

代码冗余：当一个代码片段重复性的复制粘贴时,会造成代码执行效率降低. 多类名调用：标签可以调用多个类名，类名之间用空格隔开

<span class="blue font150 abc">G</span>

2.12.4、id选择器

定义id名称：用#开头+id名称 调用id名称：id属性等于id名称，命名规范和类名是一样的 类名就像人的名字，可以重复调用，id名就像人的身份证,是唯一的

#one{
	color:red;
}
<div id="one">我是一个盒子</div>
<div id="one">我是一个盒子</div>

2.12.5.后代选择器

基础选择器：标签选择器 类选择器 id选择器 复合选择器：将基础选择器结合使用 后代选择器 选择器 选择器 (空格表示后代,子子孙孙)

.java h3 i{
	color:blue;
}
<div class="java">
	<h3 class="bz">java组长
		<i>前女友</i>
		<i class="xgirl">现女友</i>
	</h3>
</div>

2.12.6、并集选择器

将多个选择器用逗号隔开，实现共同的属性

.box span,.box p,.box .one {
	border: 1px solid red;
}
<div class="box">
    <span>一段文字</span>
    <p>段落</p>
    <h1 class="one">标题</h1>
</div>

2.12.7、一级后代选择器

.box>ul>li{
	border: 1px solid red;
}

2.12.8、交集选择器

同时具备多个选择器条件

i.one.current.two{
	border: 1px solid red;
}

3、css相关内容

3.1、css简介

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

3.2.、css三种书写位置

第一种：行内式

是将css代码写在html中，两种代码掺杂在一起，代码耦合很高，会有代码冗余，难以维护，在工作中偶尔使用。

<div style="width: 100px;height: 100px;background: yellow;">我是div</div>

第二种：内嵌式

是将css代码嵌入到html文件中，css代码和html代码相对分离，代码耦合度相对较低，在工作中偶尔使用。

.one{ color:red; }

第三种方式：外链式

是将css代码单独写在css文件中，css代码和html代码绝对分离，代码耦合度极低，在工作中经常使用。

<link rel="stylesheet" type="text/css" href="one.css"/>

3.3、css层叠性

• css层叠性：不同属性都可以实现。

  • 相同属性，在权重相同时后定义的会层叠(覆盖)先定义的
  • 在权重不同时，谁的权重值高，实现谁的

• 权重:

  • 标签选择器<类选择器< id选择器<行内样式< !important

3.4、块元素的默认宽度

• 块元素的默认宽度：块元素在不设置固定宽度时，宽度和父元素( content区域 )一样.
• 块元素的默认面积组成：margin + border + padding + content

3.5、CSS继承性

• 标签会默认自带一些css属性

  • h 标签默认设置了font-size和font-weight等,继承的字号和加粗被自身层叠
  • a 标签默认设置了color和cursor等,继承的颜色被自身层叠了

3.6、状态伪类

状态伪类：权重是10，当四个状态同时存在是要遵循 lvha 顺序（清除浏览器缓存快捷键:ctrl+shift+del）

状态伪类	描述
：link	为访问状态
：visited	访问后状态（出于隐私的考虑,访问后的状态只能设置字体颜色）
：hover	鼠标移入状态
：active	鼠标移出状态

3.6.1、行高

文本垂直居中

行高：设置文本在元素中垂直方向的位置

• 当盒子没有设置固定高度时，高度会随着行高的变化而变化，高度就是行高的值，因为文本始终要保持垂直居中于盒子。
• 当盒子设置固定高度时，高度不会随着行高的变化而变化，
• 反推：当希望一个元素中的文本垂直居中于这个元素时，行高等于盒子的高度

行间距

• 文本分为四条线：顶线、中线、基线、底线
• 行间距：多行文本，行与行之间的间距，是基线到基线之间的距离

/*行高可以是倍数*/
line-height: 1;

3.7、复合属性

3.7.1、 font

• 单属性：—个属性名对应一个属性值
• 复合属性：一个属性名对应多个属性值

font的单属性	描述
font-size: 40px;	字体大小
font-weight: 700	字体粗细
font-style: italic	字体倾斜（italic 倾斜 normal正常）
font-family:"宋体";	字体家族
line-height: 50px	字体行高

font复合属性

/*是否倾斜  是否加粗  字号(必填项)/行高  字体(必填项)*/
font: italic 700 40px/ 580px "宋体";
/*必填项*/
font: 48px "软雅黑"

3.7.2、border

边框单属性	描述
border-width: 5px;	边框粗细默认值3px
border-style: dotted;	边框样式（solid 实线 dashed 虚线 dotted 点状线）
border-color: red;	边框颜色默认是黑色
border: none;	设置边框没有

边框复合属性

/*上边框  粗细  样式  颜色*/
border-top : 5px solid red;

3.7.3、background

/* background单属性*/
/*背景色*/
background-color :yellow ;
/*背景图*/  
background-image: ur1(liuzhiyuan.jpg);
/*平铺方式repeat平铺(默认值)repeat-x水平平铺repeat-y垂直平铺no-repeat*/
background-repeat: no-repeat;
/*水平位置垂直位置*/
background-position:100px opx;

/*background复合属性*/
/*背景色  背景图  平铺方式  水平位置  垂直位置*/
background: yellow url(liuzhiyuan.jpg) no-repeat 0px 0;

背景图在元素中的位置

• 水平:left/center/right 数值:正值向右,负值向左
• 垂直: top/center/bottom 数值:正值向下,负值向上

3.8、盒子模型

3.8.1、内边距padding

• 盒子模型之内边距padding：

  • 设置盒子与内容之间的间距，当盒子设置内边距后，会撑大盒子的尺寸，为了保证盒子尺寸不变，又需要有内边距的效果，要相应的从盒子的宽高减去撑大的尺寸

• 盒子在网页中的尺寸= content区域(设置的宽高)+padding区域+border区域

/*单属性*/
padding-left: 10px;/*左内边距*/
padding-top: 10px;/*上内边距*/
padding-right: 10px;/*右内边距*/
padding-bottom: 10px;/*下内边距*/

/*复合属性*/
padding: 10px;/*—个值上右下左*/
padding: 10px 20px;/*两个值上下左右*/
padding: 10px 20px 30px;/*三个值上左右下*/
padding: 10px 20px 30px 40px;/*四个值上右下左*/

padding减宽度的场景

• padding减宽度的场景：当块元素没有设置固定宽度时，宽度和父元素一样，给该元素设置水平方向的padding时，不会撑宽盒子，会从content自动减去padding值，宽度的尺寸是不变的。
• 当块元素设置固定宽度时，此时设置水平方向的padding，盒子的尺寸会变大

3.8.2、外边距margin

外边距margin:是设置盒子与盒子之间的间距

/*单属性*/  /*margin写法和padding写法一样*/
margin-left: 100px;/*左外边距*/
margin-top: 100px;/*上外边距*/

外边距合并

• 外边距合并：垂直排列的两个块元素，分别给上面的盒子设置向下的外边距和给下面的盒子设置向上的外边距，此时会形成外边距合并，

  • 当两个值相同时，就是该值。
  • 当两个值不同时是较大的那个值。

外边距塌陷

外边距塌陷：嵌套的两个块元素，给子元素(第一个)设置向上的外边距，此时父元素会跟着掉下来，形成了外边距塌陷。

解决方案：

0. 给父元素设置上边框
1. 给父元素设置overflow属性
2. 给父元素设置浮动
3. 给子元素设置浮动

块元素水平居中

外边距水平居中于父元素:margin: 0 auto，水平左右外边距自适应

3.9、overflow属性

溢出属性

/*hidden溢出隐藏 scroll溢出滚动 auto当内容超出元素时,自动设置滚动条*/
/*overflow-x水平隐藏  overflow-y·垂直隐藏*/
overflow: hidden;

3.10、img底部留白

img/底部留白：由于img是行内块元素,底部和文本的基线对齐，所有会有一部分留白

两种解决方案:

0. 将img转换成块元素, display : block
1. 将box的字体设置成0

.box{
	border: 1px solid red;
	font-size:/*第一种*/
}
.box img{
	display: block;/*第二种*/
}

3.11、浮动

浮动在最初是为了实现文本环绕效果

• 浮动实现文本环绕效果：当元素设置浮动后，后面的文本不会被浮动元素盖住，而是对浮动元素进行文本环绕
• 如今浮动就是来做横向布局的

浮动：是一个属性float,

• 浮动是一个脱离标准流的状态，也叫浮动流．
• 当元素设置浮动后，按照标签的书写顺序，依次排列在包含块(父元素)的左上
• 浮动元素不在具备之前的显示模式，在不设置宽高时，是由内容决定的
• 浮动元素当父元素的宽度不够时，会自动换行
• 元素设置浮动后，设置宽高起作用

3.11.1、浮动造成的影响

浮动造成的影响：当子元素是浮动时，父元素没有设置固定高度，由于子元素是飘起来的状态，父元素会认为没有内容撑开自身的高度，此时造成高度塌陷，父元素的高度是0。

解决方案:

• 给父元素设置overflow属性
• 额外标签法
• 父元素调用clearFix类名（此方案要正巧赶上父元素需要设置浮动时）
• 给父元素设置浮动

3.11.2、左浮动和右浮动

• 左浮动：浮动元素按照标签的书写顺序在父元素的左上由左向右依次排开
• 右浮动：浮动元素按照标签的书写顺序在父元素的右上上由右向左依次排开

3.11.3、浮动布局中的问题

当子元素设置浮动后，高度超出父元素时，会影响到下面父元素中的浮动元素

3.11.4、行内块和行内元素横向布局问题

• 行内块布局问题

  • 代码换行会有默认间距，行内块是沿基线对齐(底对齐)，当给元素设置垂直方向的内外边距时，会影响周围的元素

• 行内元素布局问题

  • 行内元素是沿基线对齐(底对齐)，当给元素设置垂直方向的内外边距时，由于受基线对齐的限制，垂直方向的内外边距是不起作用的

• 浮动横向布局

  • 没有代码换行的间距，设置自身内外(垂直)边距不会影响周围的元素

3.12、网页的版心

在pc端，由于分辨率和屏幕较大，通常网页的版心是一个固定宽度且水平居中的，通常在1100-1300之间

通栏盒子通常是一个无固定宽度的盒子

3.13、定位

定位:将元素设置在网页的一个具体的坐标位置

3.13.1、相对定位

相对定位：也叫占位定位，通过偏移量根据当前在标准流自身的位置为参考点移动，在移动时，是在z轴的空间移动，此时不会影响周围的元素，但是在标准流的位置还是存在的

偏移量:

• 水平偏移量

  • left正值向右，负值向左（优先）。right正值向左,负值向右

• 垂直偏移量

  • top正值向下，负值向上（优先）。bottom正直向上,负值向下

3.12.2、绝对定位

绝对定位：

• 是一个完全脱离标准流的状态，
• 绝对定位的起始参考点是设置定位属性的父元素(离自身最近的)，如果没有设置相对定位的父元素，默认参考点是body初始包含块

偏移量:

• 水平偏移量

  • left正值向右，负值向左（优先）。right正值向左,负值向右

• 垂直偏移量

  • top正值向下，负值向上（优先）。bottom正直向上,负值向下

子绝父相：父子指的是标签关系，绝指的是子元素是绝对定位，相指的父元素是相对定位

3.12.3、固定定位

固定定位：将元素设置到浏览器窗口的一个具体坐标位置，固定定位的参考点永远是浏览器窗口

3.12.4、定位的层级

层级：

• 当层级相同时，后写的标签连同子元素，都会压在先写的标签连同子元素的上面，父元素的层级将决定子元素的层级的高低

• 当层级不同时，较大层级的标签连同子元素，都会压在较低层级的标签连同子元素的上面，父元素的层级将决定子元素的层级的高低

• 当不设置z-index，后写的标签连同子元素会压在先写的标签连同子元素的上面，但是此时子元素层级的高低，将决定自身是否能压在后面标签的上面

• z-index 可以修改元素的层级，取值范围是整数

  • 默认层级是0,
  • 当层级是负数时，是低于标准流的元素

3.12.5、定位的水平垂直居中

• 水平居中:

  • 设置left:50%，走父元素宽度的一半，margin-left:负的自身宽度的一半，向回走

• 垂直居中:

  • 设置top:50%，走父元素高度的一半，margin-top:负的自身高度的一半，向回走

.box{
	position: relative;
}
.box2{
    position: absolute;
    left:50%;  /*父元素宽度的百分比*/
    top: 50%;  /*父元素高的百分比*/
    margin-left: -50px;  /*从当前left值作为起始点*/
    margin-top: -50px;  /*从当前top值作为起始点*/
}

3.13、占位隐藏和不占位隐藏

visibility: hidden;  /*占位隐藏*/
display: none;  /*不占位隐藏*/

3.14、渐进增强和优雅降级

0. 什么是渐进增强

   • 在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

1. 什么是优雅降级

   • 在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，低级浏览器被认为“简陋却无妨(poor, but passable)”可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

3.15、css精灵

css精灵：也叫css sprite 雪碧图，是背景图的技术，如今网速很快，下载一张大图和一张小图所用的时间差不多，但是服务器的连接资源是有限的，将一张一张的小图合成一张大图，一次性下载，只需要连接一次服务器，减少对服务器的压力，提高网站的访问效率

3.15.1、在线转换工具

腾讯全端开发团队

alloyteam.github.io/gopng/

3.16、图标字体

• 阿里巴巴矢量字体库：www.iconfont.cn/
• fontawesome图标字体：www.fontawesome.com.cn/

3.17、icon图标

ico是一种图片格式,通常用在浏览器的选项卡中

在线制作icon图标：www.bitbug.net/

3.18、CSS预编译器

• less
• sass
• stylus

4、H5和CSS3相关内容

4.1、H5简介

h5简介：html5是建立在html4的基础之上，新增了一些有语义的标签，一些标签属性，新增了一些api(application programming interface)应用程序接口，本地存储，地理位置，绘制图形，音频和视频...... . . , h5新增的这些功能，只能用在高级浏览器。

4.2、h5新增语义标签

标签	描述
address	联系信息、电话、地址、邮箱
article	表示网页中的一块内容
aside	表示网页侧边栏
footer	尾部标签，用来放至一些联系方式等等
header	头部标签,用来放至一些logo，搜索框等待
main	主体标签，用来放至内容主体等等
nav	导航栏标签
section	表示一块独立的区域

4.3、h5新增表单类型

<form action="http: //www.baidu.com"> 
    <input type="email">  <!--邮箱类型-->
    <input type="url">  <!--网址类型-->
    <input type="datetime-local">  <!--本地时间类型-->
    <input type="month">  <!--月类型-->
    <input type="date">  <!--日类型-->
    <input type="week">  <!--周类型-->
    <input type="color">  <!--颜色-->
    <input type="range">  <!--滑块 -->
    <input type="submit" value="提交">
</form>

4.4、音频标签

音频标签: audio

• source：多个文件引入标签

• 属性:

  • src：音频文件路径
  • controls：控制面板
  • loop：循环摇放
  • autoplay：自动摇放，目前ie是可以使用

<!--引入单个文件-->
<audio src= "music/yinyue.ogg" controls="controls" loop="loop" autoplay=" autoplay">                                                               </audio>

<!--引入多个文件-->
<audio controls="controls" loop="loop" autoplay="autoplay">
    <source src="music/yinyue.ogg"></source>
    <source src="music/yinyue. MP3"></source>
</ audio>

4.5、视频标签

视频标签: video

• source多个文件引入标签

• 属性:

  • src：音频文件路径
  • controls：控制面板
  • loop：循环播放
  • autoplay：自动播放,目前ie是可以使用

<!--单个文件引入-->
<video src="video/movie.mp4" controls="controls" loop="loop" autoplay></video>

<!--多个文件引入-->
<video controls="controls" loop="loop" autoplay>
    <source src="video/movie.webm"></source>
    <source src="video/movie.ogg"></source>
    <source src="video/movie.mp4"></source>
</video>

4.6、关系选择器

1.包含选择符 (A B)

• 选择所有被A元素包含的B元素，中间用空格隔开

• ul li{ color:red; }
  <ul>        
      <li>西红柿</li>
      <li>黄瓜</li>
  </ul>
  

2.子选择符 (A > B)

• 选择所有作为A元素的直接子元素B，对孙子元素不起作用，用大于号表示

• div>p{ color:red;}   //div下的一级子元素a
  <div>
      <p>这是子元素</p>
      <div>
      	<p>这是孙子元素</p>
      </div>
  </div>
  

3.相邻选择符 (A+B)

• 选择紧贴在A元素之后B元素，用加号表示，选择相邻的第一个兄弟元素。

• p+span{ color:red;}  //只会选中第一个span
  <p>这是p元素</p>
  <span>这是紧挨着p元素的第一个span</span>
  <span>这是第二个span</span>
  

4.兄弟选择符 (A~B)

• 选择A元素之后的所有兄弟元素B，作用于多个元素，用~号隔开。

• p~span{ color:red;}  //选择和A元素平级的后面的兄弟元素，不包含自身
  <span>这span在p元素之前不会被选中</span>
  <p>这是p元素</p>
  <span>这是紧挨着p元素的第一个span</span>
  <span>这是第二个span</span>
  <span>这是第三个span，它和p是兄弟关系</span>
  

4.7、属性选择器

1、[属性名] 选择含有指定属性的的元素。

div[ class]{
	color : red;
}
div[title]{
	color :blue;
}

2、[属性名=属性值] 选中含有指定属性和属性值的元素

div[class="box"]{
	color : red;
}

3：[属性名^=属性值] 选择属性值以指定值开头的元素

div[class ^= "box"]{
	color : red;
}

4：[属性名 $= "box" ] 选择属性值以属 box 结尾的元素

div[class $= "box"]{
	color : red;
}

5：[属性名 *= "box"] 选择包含属性值为 box 的所有属性元素

div[class ~= "box"]{
	color :red;
}

4.8、伪类选择器

4.8.1、受其他元素影响的

第一个儿子元素

.list li:first-child{
    color:red;
}

最后一个儿子元素

.list li:last-child{
    color:red;
}

唯一一个儿子元素

.box span:only-child{
    color:red;
}

根据编号选择

• 根据编号选择，编号可以是数字，从1开始,
• 还可以是单词，odd是基数，even是偶数
• 还可以是表达式，表达式必须是n，n从0开始

正数根据编号选择

.list li:nth-child(2n+3){
    color:red;
}

倒数根据编号选择

.list li:nth-last-child(2n){
    color:red;
}

4.8.2、不受其他标签影响

第一个儿子元素

.list li:first-of-type{
    color:red;
}

最后一个儿子元素

.list li:last-of-type{
	color:red;
}

唯一一个儿子元素

.box span:only-of-type{
    color:red;
}

根据编号选择

• 根据编号选择，编号可以是数字，从1开始,
• 还可以是单词，odd是基数，even是偶数
• 还可以是表达式，表达式必须是n，n从0开始

正数根据编号选择

.list li:nth-of-type(odd){
    color:red;
}

倒数根据编号选择

.list li:nth-last-of-type(1){
    color:red;
}

4.8.3、内容是空

内容包括：文本，标签，空格

.box2:empty{
    width: 100px;
    height: 100px;
    background: red;
}

4.9、状态选择器

4.9.1、focus伪类

• focus伪类: 获取焦点伪类

input[type="text"]{
    background: yellow;
    color:red;
}
/* 获取焦点后的样式 */
input[type="text"]:focus{
    background: yellowgreen;
    color:blue;
}

4.9.2、checked伪类

• checked伪类 选中状态

input[type="checkbox"]:checked{
	background: blue;
}

4.9.3、target伪类

• target 目标伪类, 锚点链接的目标

  p:target{
      width: 200px;
      height: 200px;
      background: yellow;
  }
  

4.10、圆角属性

4.10.1、边框模拟三角形

• 边框模拟三角形：元素的相邻两个边框同时存在时，交点会形成平分
• 此时将content的区域的宽和高，设置成0，此时会形成一个三角形，将其他的边框的颜色设置成透明

• .box{
      width: 0px;
      height: 0px;
  /* 	background: pink; */
      border-left:50px solid red;
      border-top:50px solid red;
      border-right:50px solid transparent;
      border-bottom:50px solid transparent;
  
  }
  

4.10.2、圆角属性

圆角单属性

• 可以是像素值
• 可以是百分比，宽和高的百分比

• /* 左上*/                水平    垂直
  border-top-left-radius: 100px 50px;
  /* 右上 */
  border-top-right-radius: 100px;
  

圆角复合属性

• /* 一个值  左上右上右下左下*/
  border-radius:100px ;
  /* 两个值  左上右下 右上左下*/
  border-radius:10px 20px ;
  /* 三个值  左上  右上左下 右下*/
  border-radius:10px 20px 30px ;
  /* 四个值  左上 右上 右下 左下*/
  border-radius:10px 20px 30px 40px ;
  
  /* 			   水平/垂直 */
  border-radius:100px/50px;
  /*            水平 水平 水平 水平/垂直 垂直 垂直 垂直*/
  border-radius: 100px 100px 0 0/50px 50px 0 0;
  

4.11、伪元素

• 伪元素：在元素内部有一前一后两个盒子，就是伪元素，伪元素默认是行内显示模式，我们可以认为伪元素就是元素中嵌套的元素，伪元素中的文本是不会被搜索引擎抓取到的

• .box::before{
      /* 必写项 */
      content: "我是before";
      background:yellow;
      width: 100px;
      height: 100px;
      /* display: block;
      margin: 50px auto; */
      /* float:left; */
      /* position: absolute; */
      /* left:0; */
      /* top:0; */
  }
  .box::after{
      content:"" ;
      width: 100px;
      height: 100px;
      background: blue;
      display: block;
  }
  

  clearfix就是利用盒子内部的伪元素代替额外标签法，清除浮动造成的影响

4.12、盒子模型

标准盒子模型

• 盒子在网页中的尺寸=content+padding+border，当盒子设置padding和border后盒子的尺寸会变大

怪异盒子模型

• 盒子在网页中的尺寸=content+padding+border，当盒子设置padding和border后盒子的尺寸不会变大，会从content的区域自动减去，保证和width,height的值一样。

注意：使用怪异盒子模型一定要设置width和height

/* 标准盒子模型 */
box-sizing: content-box;
/*怪异盒子模型 */
box-sizing: border-box;

4.13、文字阴影

4.13.1、文字阴影属性

• 字阴影属性 可以设置多组，用逗号隔开

• /*      水平偏移  垂直偏移  模糊程度(羽化) 颜色 */
  text-shadow:  10px 6px 28px red,-10px -10px 10px yellowgreen;
  

4.13.2、文字边框

• h1{
      font-size: 100px;
      text-align: center;
      /*测试属性 文字边框       边框的粗细   颜色*/
      -webkit-text-stroke: 2px yellowgreen;
  }
  

4.13.3、文字裁剪属性

• h1{
      font-size: 100px;
      text-align: center;
      background: url(mm.jpg) no-repeat 0 0;
      /* 文本裁剪属性  测试属性 */
      -webkit-background-clip: text;
      color:transparent
  }
  

4.14、盒子阴影

盒子阴影属性：可以设置多组，用逗号隔开

• /*     水平偏移  垂直偏移  模糊程度  扩展 颜色 向内阴影(默认向外的)*/
  box-shadow: 0px 0px 0px 0px yellowgreen inset ;
  

4.15、背景属性

4.15.1、背景裁切属性

• /* 背景裁剪属性: 
     border-box(默认值)  从边框区域可见
     padding-box        从padding区域可见
     content-box        从content区域可见
  */
  background-clip: content-box;
  

4.15.2、背景起始位置

• /* 背景起始位置 
     padding-box(默认值) 起始位置在 padding区域
     border-box 起始位置在border区域
     content-box 起始位置在content区域
  */
  background-origin: content-box;
  

4.15.3、背景缩放属性

• .box:hover{
      /*              宽度     高度 */
      background-size: 600px 300px;
      /*            宽度和高度 */
      background-size:590px ;
      /*         元素宽度的百分比  元素高度的百分比 */
      background-size: 50% 50%;
      /*          元素宽度的百分比,高度等比例缩放 */
      background-size:50% ;
  
      /* 图片按照盒子的最长边铺满,为了保证图片不变形,图片会有一部分被截掉 */
      background-size: cover;
      /* 图片按照盒子的最短边铺满,为了保证图片不变形,盒子会有一部分留白 */
      background-size: contain;
  }
  

4.15.4、滚动背景和固定背景

• scroll(默认值)：滚动背景，背景图默认在盒子内部的左上，当页面滚动时，盒子会跟着页面移动，背景图会跟着盒子移动
• fixed：固定背景，背景图参考点永远是浏览器窗口，当页面滚动时，背景图是不动的，给哪个元素设置了该背景图，当元素经过浏览器窗口位置的时候,能看到该图片

• /* 滚动背景，背景位置随盒子移动 */
  background-attachment: scroll;
  /* 固定背景，背景位置不随盒子移动 */
  background-attachment: fixed;
  

4.15.5、多重背景

• 背景图可以引入多张,用逗号隔开

• background: url(img/1.png) no-repeat,url(img/atguigu.png) no-repeat 0 0,url(img/bg.png) no-repeat 0 0;
  

4.15.6、过滤器

模糊效果

• /* 过滤器 */
  filter: blur(10px);
  

黑白网页

• /*过滤器：黑白网页*/
  filter: grayscale(100%);
  

4.16、渐变

4.16.1、线性渐变

• 线性渐变：沿着一条轴线，从一个颜色值逐渐过渡到另一个颜色值，最少是两个颜色,否则报错

方向（正顺时针，负逆时针）	单词	deg
由上至下	to bottom	180deg
由下至上	to top	0deg
由左至右	to right	90deg
由右至左	to left	270deg
到左上	to left top	315deg
到右上	to right top	45deg
到左下	to left bottom	225deg
到右下	to right bottom	135deg

/*0-50是red,从50-100是red到yellow,从100-150是yellow到blue,从150-300是blue*/
background-image: linear-gradient( to right,red 50px,yellow 100px,blue 150px);

可以通过ps图层获取css渐变样式，右键→复制css

4.16.2、重复线性渐变

• 重复线性渐变：将线性渐变进行平铺效果

• background-image: repeating-linear-gradient( to right,red 50px,yellow 100px,blue 150px);
  

4.16.3、径向渐变

• 径向渐变: 从原点到半径之间的一个渐变

• 图形

  • 正方向盒子: circle圆 默认值 ellipse椭圆
  • 正方向盒子: circle圆 ellipse椭圆 默认值

• 改变圆心的位置	描述
  closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
  closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
  farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
  farthest-corner	指定径向渐变的半径长度为从圆心到离圆心最远的角

• div:nth-of-type(1){
      width: 300px;
      height: 300px;
      background-image: radial-gradient(circle farthest-side,red 50px,yellow 100px,blue 150px);
  }
  div:nth-of-type(2){
      width: 300px;
      height: 200px;
      /*          图形  到哪的半径  圆心水平坐标   圆心的垂直坐标, 颜色 值, */
      background-image: radial-gradient(circle closest-corner at 50px 50px,red 30%,yellow 50%,blue 80%);
      margin-top: 5px;
  }
  

4.16.4、重复径向渐变

• 重复径向渐变: 将径向渐变进行重复平铺

• background-image: repeating-radial-gradient(circle farthest-side,red 20px,yellow 30px,blue 50px);
  

4.17、过渡

• 过渡：元素中的属性值，在单位时间内，从一个值逐渐到达某个值，这个过程就是过渡，如果希望过渡有来有去，需要将过渡属性写在默认状态下

4.17.1、过渡单属性

常见过渡属性

• /* 需要过渡的单属性 */
  transition-property: width / height / background-color / opacity / display;
  transition-property:all;
  
  /* 不是数值的边框,所以不能过渡 */
  /* display: none; */
  

过渡时间

• /* 过渡的时间  单位: 秒s   毫秒ms   1秒=1000毫秒*/
  transition-duration: 1s;
  

过渡的方式

• /* 过渡的方式    
      https://cubic-bezier.com/#.05,-0.4,1,1.49 贝塞尔曲线的网址
      linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 
      ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 
      ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 
      ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 
      ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 
  */
  transition-timing-function: cubic-bezier(.05,-0.4,1,1.49);
  

过渡的延时

• /* 过渡的延时 */
  transition-delay: .5s;
  

4.17.2、过渡复合属性

/*          过渡的属性   过渡时间   过渡方式  过渡延时 */
transition: width 1s ease-in .5s;
/*  当制定某个属性过渡时,要用多组的形式,用逗号隔开 */
transition: width 1s ease-in .5s, height 1s ease-in .5s;
transition: all 1s ease-in .5s;
transition-property: width,height;

4.18、2D转换

4.18.1、位移

• 水平 正直向右，负值向左
• 垂直 正直向下，负值向上

div:nth-of-type(1){
    width: 200px;
    height: 200px;
    background: red;
    /* 和相对定位类似 */
    /*  水平,垂直  */
    /* transform: translate(-100px,-100px); */
    /*              自身宽度的百分比,自身高度的百分比 */
    transform: translate(50%,50%);

}

div:nth-of-type(2){
    position: absolute;
    /* 水平垂直居中 */
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

4.18.2、旋转

• 单位：deg角度，沿着z轴旋转,，正值是顺时针旋转，负值时逆时针旋转

• .box:hover img{
      transform: rotate(360deg);
  }
  

4.18.3、旋转轴

• rotate(360deg) 沿着z轴旋转,，正值是顺时针旋转，负值时逆时针旋转
• rotateX(-180deg) 沿着x轴旋转，从右往左看, ，正值是顺时针旋转，负值时逆时针旋转
• rotateY(-180deg) 沿着y轴旋转，从下往上看,，正值是顺时针旋转，负值时逆时针旋转

• transform: rotateY(-180deg);
  

4.18.4、旋转中心点设置

/* 
  旋转中心点设置
  单词:
  水平: left/center/right
  垂直: top/center/bottom
  数值:水平 垂直
  沿着z轴旋转有无数个中心点
  沿着x轴旋转,旋转中心点在y轴上
  沿着Y轴旋转,旋转中心点在x轴上
 */
transform-origin:50px top ;

4.18.5、当旋转和位移同时存在时的问题

• /* 当旋转和位移同时存在时,先写位移,再写旋转 */
  transform: translate(500px,300px) rotate(90deg) ;
  

4.19、动画

4.19.1、动画属性

• /* 动画名称 */
  animation-name: donghua1;
  /* 动画时间 */
  animation-duration: 1s;
  /* 动画方式和过渡一样*/
  animation-timing-function:linear ;
  /* 动画的方向 
     normal(默认值) 正常
     reverse 反向  从to到from
     alternate 有来有去,需要两次
     alternate-reverse 先反后正,需要两次
  */
  animation-direction:alternate-reverse;
  /* 动画的次数 
     默认1次
     infinite 持久动画
  */
  animation-iteration-count:  infinite;
  /* 动画延时 */
  animation-delay: 1s;
  

• /* 动画复合属性 */
  /* 动画名称 动画时间 动画方式 动画延时 动画方向 动画次数 */
  animation: donghua2 2s ease 1s alternate infinite;
  

• /* 定义一个动画: 定义一个关键帧区间 */
  @keyframes donghua1{
      /* 开始 */
      from{
          transform: rotate(0deg);
      }
      /* 结束 */
      to{
          transform: rotate(360deg);
      }
   }
  @keyframes donghua2{
      0%{
          transform: rotate(0deg);
      }
      25%{
          width: 500px;
          height: 500px;
      }
      50%{
          background: red;
          transform: rotate(-720deg);
      }
      75%{
          opacity: .5;
      }
      100%{
          transform: rotate(3600deg);
      }
  }
  

4.20、响应式

• 根据不同设备，进行自适应的布局展示，最初的目的是用一套代码适应所有的终端设备

开发模式

• c/s：client/server 客户端 / 服务器端 应用程序,微信,qq,王者荣耀......
• b/s：browser/server 浏览器端 / 服务器端

app：应用程序

• 原生app：

  • 安卓app: 用java语言开发
  • ios app: 用objective-c开发
  • windows phone: 诺基亚,用dot net平台,c sharp语言

• 优势

  • 在各自的平台下，用各自的语言开发的，还会消耗设备的性能，用户体验好，在没有网络的情况下，也可以使用，一些数据会存储到本地，可以访问设备的硬件，例如,摄像头,蓝牙,麦克风.....

• 劣势

  • 对用户的设备要求高，开发成本高，维护成本高，用户需要手动下载，app上架之前需要通过审核，不能夸平台

---

• webApp

  • 可以理解为是移动端的网站，跨平台，通过浏览器打开的网页，既然是网页就是由html+css+js实现的

• 优势

  • 跨平台，无需下载，对用户的设备要求不高，版本统一，开发成本降低，维护成本较低

• 劣势

  • 性能相对较差，完全取决于服务端和网速，在没有网络的情况下，不能使用，不能访问设备的硬件

---

• 混合app

  • 将原生app和webapp结合使用

总结: 每个方式都有自己的优缺点，根据需求和成本决定技术的选型，如今流行，pc端是网站，移动端是app

4.21、媒体查询

• 媒体查询语句：媒体查询语句也是css语句，检测屏幕的宽高来布局，实际上就是一个条件语句，既然是css， 也会遵循css的特性

• @media 定义媒体查询的关键字
  /* min-width 最小宽度    大于等于500 */
  @media (min-width:500px){
      .box{
          width: 800px;
          height: 800px;
          background: yellowgreen;
      }
  }
  /* max-width 最大宽度    小于等于800*/
  @media (max-width:800px){
      .box{
          width: 80px;
          height: 80px;
          background: yellowgreen;
      }
  } 
  

• /* and 条件连接关键字,and前后最少一个空格,否则不起作用 */
  @media (min-width:500px) and (max-width:800px) {
      .box{
          width: 80px;
          height: 80px;
          background: yellow;
      }
  }
  

• /* 横竖屏 
     orientation: landscape 横屏		portrait 竖屏
  
     only 只有
     screen 彩屏设备
  */
  @media (orientation:portrait) and only screen{
      .box{
          width: 80px;
          height: 80px;
          background: yellow;
      }
  }
  

4.22、弹性布局

• 是父元素和子元素之间的关系，也叫伸缩布局，弹性盒子，伸缩盒子，flex布局
• 父元素叫做弹性空间
• 子元素叫做弹性元素，弹性项

4.22.1、弹性空间

/* 开启弹性空间 */
display: flex;

4.22.2、弹性布局设置主轴的方向

• 主轴：默认是水平方向，左边开始，右边结束
• 侧轴(交叉轴,垂轴)：默认是垂直方向，上边开始，下边结束

主轴方向	描述
row(默认值)	主轴：水平方向，左边开始，右边结束。 侧轴：垂直方向，上边开始，下边结束，相当于是左浮动
row-reverse	主轴：水平方向，左边结束，右边开始。 侧轴：垂直方向，上边开始，下边结束，相当于是右浮动
column	主轴：垂直方向，上边开始，下边结束。 侧轴：水平方向，左边开始，右边结束
column-reverse	主轴：垂直方向，上边结束，下边开始。 侧轴：水平方向，左边开始，右边结束

/* 弹性元素设置主轴的方向 */
flex-direction: column-reverse;

4.22.3、弹性元素在主轴上的位置分布

主轴位置分布	描述
flex-start	居开始
flex-end	居结束
space-around	空间包含元素（元素左右间距均分，两头间距半个单位）
space-between	元素包含空间（两头靠边，中间空间均分）
space-evenly	空间包含元素(元素左右的间距相等，两头间距和中间一致)

/* 弹性元素在主轴上的位置分布 */
justify-content:space-evenly ;

4.22.4、 弹性元素是否换行

/* 弹性元素是否换行 
  nowrap 不换行,当弹性元素超出父元素时,会自身进行压缩
  wrap 换行,当弹性元素超出父元素时,会换行
  wrap-reverse 反向换行
*/
flex-wrap: wrap-reverse;

4.22.5、弹性元素在侧轴的位置分布(当前行)

stretch默认值

• 在换行时，当弹性元素不设置宽度和高度时，
• 如果主轴是水平方向，宽度是内容撑开的，高度和当前行的高度一样，
• 如果主轴是垂直方向时，高度是内容撑开的，宽度和当前行的宽度一样

• /*
      flex-start 居当前行的开始
      center     居当前行的居中
      flex-end   居当前行的结束
  */
  align-items:center ;
  

4.22.6、弹性元素在侧轴的位置分布(整体的)

stretch默认值

• 在换行时，当弹性元素不设置宽度和高度时
• 如果主轴是水平方向，宽度是内容撑开的，高度和当前行的高度一样
• 如果主轴是垂直方向时，高度是内容撑开的，宽度和当前行的宽度一样

• /*
      flex-start 居开始
      center     居居中
      flex-end   居结束
      space-around 空间包含元素
      space-between 元素包含空间
      space-evenly 空间包含元素(元素左右相等的间距)
  */
  align-content:flex-start;
  

注意：当align-items和align-content同时存在时，align-items失效

4.22.7、弹性元素在主轴的份数

• /* 弹性元素在主轴的份数 */
  flex-grow: 1;
  

4.22.8、弹性元素的排序

• /* 弹性元素的排序,在整体的最后按编号顺序排列 */
  /* 没设置的在最前面，设置的从小到大排列 */
  order: 1;
  

4.22.9、弹性元素的压缩率(收缩因子)

• 弹性元素的压缩率(收缩因子)，默认值是1
• 每份压缩的数值px = 超出的数值(200px)/总分数(6) = 33.33px
• 元素剩余的宽度 = 自身宽度-每份压缩的数值 * 压缩的份数

• .one{
      width: 200px;
      height: 200px;
      background: red;
      /* 弹性元素的压缩率 */
      flex-shrink: 1;
      /* 剩余宽度 */
      /* 200-33.33  = 166.67*/
  }
  

5、less

5.1、les简介

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin（混合）、函数等特性，使 CSS 更易维护和扩展

LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/

5.2、less初次使用

0. 定义变量（@zero:0）并运用，凡是页面中使用0，都用@zero代替;

1. 子元素需要放在父元素中，此时子元素可以放心使用class，因为他已经有前提条件是父元素（不用再继续担心对同名class值样式的影响

2. style标签的类型需要改成less

   <style type="text/less"> </style>
   

3. 根据官网我们需要一个less编译的 less.js 文件，并在最下方引入，因为需要读取页面中所有less相关的文件，才可以进行编译

5.3、和less相似的其他语言

• less --- 支持原生js,node
• sass --- ruby环境
• stylus --- node -- 开发项目中我们使用stylus

5.4、Less编译工具

koala 官网:www.koala-app.com

5.5、less中的注释

• 以 // 开头的注释，不会被编译到css文件中
• 以 /**/ 包裹的注释会被编译到css文件中

5.6、less中的变量

使用@来申明一个变量：@pink：pink;

0. 作为普通属性值只来使用：直接使用@pink
1. 作为选择器和属性名：#@{selector的值}的选择器形式, @{selector的值}属性名
2. 作为URL：@url
3. 变量的延迟加载

4. @var: 0;
   .class {
   @var: 1;
       .brass {
         @var: 2;
         three: @var;
         @var: 3;
       }
     one: @var;
   }
   

5.7、less中的嵌套规则

0. 基本嵌套规则

   • 也就是直接将后代元素的选择器和样式 直接写在父元素或祖先元素的括号内 编译后为 空格（后代选择器）
   • 如果在less中需要操作子元素 只需要在子元素选择器的前边直接添加 > 即可

1. &的使用（伪类、结构类、否定选择器、伪元素等冒号的选择器时）

   • 当前这个括号的选择器
   • 之前所有的选择器的集合

5.8、less中的混合 Mixin

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

• 普通混合
• 带参数的混合
• 带参数并且有默认值的混合
• 带多个参数的混合