html
介绍
分类：
1.xhtml 1.0
2.html5
区别：
1.文档声明和编码声明
2.html5新增了标签元素以及元素属性
html文档规范：
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求
1.所有标签必须小写
2.所有属性必须用双引号括起来
3.所有标签必须闭合
4.img必须要加alt属性（对图片的描述）
sublime快捷创建
- xhtml 1.0创建
html:xt + tab - html5创建
html:5 + tab或者h5 + tab
标签
1.<h1>标题</h1>
2.<p>段落</p>
3.换行 <br />
4.空格 大于号 >小于号 <
5.<div></div>
6.<span></span>
7.<em>用来表示语气中的强调词，自带样式，行内元素</em>
8.<i>用来表示专业词汇，自动样式，行内元素</i>
9.<b>用来表示文档中的关键字或者产品名，自带样式，行内元素</b>`
10.<strong>用来表示非常重要的内容，自带样式，行内元素</strong>
11.<img src="" alt="" />
src属性为图片路径可以使绝对路径也可以是相对路径('./':当前路径，可以省略；'../'：上一级路径)
alt属性图片加载失败时显示的内容
12.<a href="" title=""></a>
target属性，默认:_self,_blank新建窗口
title属性定义鼠标悬停时弹出的提示文字框
href属性定义跳转的地址
<a href="javascript:;"></a><!-- 表示啥也不干 -->
<a href="#"></a><!-- # 表示链接到页面顶部 -->
页面内定义了“id”的元素，可以通过a标签链接到它的页面滚动位置
<a href="#mao1">标题一</a>
<h3 id="mao1">跳转到的标题</h3>
13.列表：有序列表(ol>li)，无序列表(ul>li),定义列表(dl>dt+dd)
type属性none取消，
list-style:none,
默认存在margin和padding，可通过盒子模型查看
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
14.表格
常用标签：
table标签：声明一个表格
tr标签：声明一行
th,td标签：声明一列
常用属性：
border 定义表格边框
cellpadding 定义单元格内容与边框的距离
cellspacing 定义单元格与单元格之间的距离
align 单元格中内容水平对齐方式（left，center，right）
valign 单元格中内容垂直对齐方式（top，middle，bottom）
colspan 单元格水平合并
rowspan 单元格垂直合并
15.表单
input标签带有border;chrome中光标锁定输入边框变高亮,通过outline:none取消
16.iframe
frameborder属性设置边框
scrolling属性设置是否有滚动条
name属性配合a标签target属性可以将链接到的页面直接显示在当前页面的iframe中
<a href="01.html" target="myframe">页面一</a>
<a href="02.html" target="myframe">页面二</a>
<a href="03.html" target="myframe">页面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>
css样式
css引入方法：
1.外联式：<link rel="stylesheet" type="text/css" href="css/main.css">
2.嵌入式：<style type="text/css"></style>
3.内联式:<div style="width: 100px;"></div>
css文本设置：
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高，如：line-height:24px;行内元素有默认行高设置(1-1.2之间):line-height:normal;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
css颜色设置方式：
1.颜色名表示，比如：red 红色，gold 金色
2.rgb表示，比如：rgb(255,0,0)表示红色
3.16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
css选择器
1.标签选择器
2.id选择器
3.类选择器
4.层级选择器
5.组合选择器
6.伪类及伪元素选择器
常用伪类选择器：hover
常用伪元素选择器：before，after
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
css盒子模型
1.border 上 右 下 左
2.margin 上 右 下 左
3.padding 上 右 下 左
盒子模型包括：margin，border，padding，content
注意事项以及小技巧：
1.margin负值让元素位移及边框合并
2.通过设置margin水平居中(margin:x auto;)
盒子中的盒子想要垂直居中不能通过line-height来设置，盒子中的内容可以
3.垂直外边距合并(当两个垂直外边距相遇时，它们将形成一个外边距,值取较大的那个;行内块元素以及浮动元素之间没有垂直margin的合并)
4.margin-top塌陷
现象：俩个盒子嵌套时，内部盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败
<style>
.box1{
height: 200px;
width: 200px;
background-color: green;
/*line-height: 200px;*/ /*盒子中的盒子想要垂直居中不能通过line-height来设置，盒子中的内容可以*/
}
.box2{
height: 60px;
width: 180px;
background-color: yellow;
margin-top: 70px;
}
</style>
<body>
<div class="box1">
<div class="box2">我是中国人</div>
</div>
</body>
解决办法：3.1 外部盒子设置边框
3.2 外部盒子设置overflow:hidden
3.3 使用伪元素类
.clearfix:before{
content: '';
display:table;
}
<body>
<div class="box1 clearfix">
<div class="box2">我是中国人</div>
</div>
</body>
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置
overflow的设置项：
1.visible 默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3.scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4.auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5.inherit 规定应该从父元素继承 overflow 属性的值
css元素类型：块元素、内联元素、内联块元素
1.块元素
常用块元素标签：div、p、ul、li、h1~h6、dl、dt、dd
块元素特点：
1.1 支持全部样式
1.2 如果没有设置宽度，默认的宽度为父级宽度100%
1.3 盒子占据一行、即使设置了宽度
2.内联元素
常用内联元素：a、span、em、b、strong、i
内联元素特点：
2.1 支持部分样式（不支持宽、高、margin上下、padding上下）
2.2 宽度由内容决定
2.3 盒子并在一行
2.4 代码换行，盒子间会产生间距
2.5 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式
解决内联元素间隙的方法:
1.去掉内联元素之间的换行
2.将内联元素的父级设置font-size为0，内联元素自身再设置font-size
3.内联块元素
内联块元素特点：
+ 支持全部样式
+ 如果没有设置宽高，宽高由内容决定
+ 盒子并在一行
+ 代码换行，盒子会产生间距
+ 子元素是内联块元素，父元素可以使用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式
解决内联元素间隙的方法
+ 去掉内联元素之间的换行
+ 将内联元素的父级设置font-size为0，内联元素自身再设置font-size
css元素浮动
- 文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置 - 浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素,但是代码换行不会产生间隙
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7、浮动元素之间没有垂直margin的合并 - 清除浮动
1.父级上增加属性overflow：hidden
2.在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
3.使用成熟的清浮动样式类，clearfix
//清除margin-top塌陷
.clearfix:before{
content:"";
display:table;
}
//清除浮动
.clearfix:after{
content:"";
display:table;
clear:both;
}
//合并清除margin-top塌陷以及清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
//兼容ie浏览器
.clearfix{
zoom:1;//
}
css定位
- relative(相对定位)
relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移 - absolute(绝对定位)
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方（原位置会被后面的元素占据），相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位；通常我们配合父元素设置relative使用 - fixed(固定定位)
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位
定位元素特性：绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
定位元素层级：定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
css背景
1.background-color 设置背景颜色
2.background-image 设置背景图片地址
url(“image/test.png”)
3.background-repeat 设置背景图片如何重复平铺
默认no-repeat,repeat-x:水平重复,repeat-y:垂直重复
4.background-position 设置背景图片的位置（用来截取图片中的部分作为背景图片）
可以通过坐标来设置，也可以通过left top right bottom center中的2个组合来设置
5.background-attachment 设置背景图片是固定还是随着页面滚动条滚动
默认随着页面滚动条滚动，固定设为fixed
html5和css3
css权重
1.!important，加在样式属性值后，权重值为 10000
2.内联样式，如：style=””，权重值为1000
3.ID选择器，如：#content，权重值为100
4.类，伪类和属性选择器，如： content、:hover 权重值为10
5.标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6.通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
css3新增选择器
1.E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
小技巧：参数为2n+1代表奇数，2n代表偶数
注意事项：匹配顺序为先匹配第n个子元素，再标胶元素类型是否为E
2.E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
小技巧：参数为2n+1代表奇数，2n代表偶数
注意事项：匹配顺序为先匹配元素类型为E，再匹配第几个
3.E:empty 选择一个空的元素
4.E:enabled 可用的表单控件
5.E:disabled 失效的表单控件
6.E:checked 选中的checkbox
7.E:not(s) 不包含某元素
<style type="text/css">
.list div:not(:nth-child(2)){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第 3、4、5 子元素div匹配 -->
8.E:target 对应锚点的样式
<style type="text/css">
h2:target{
color:red;
}
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>
<!-- 点击链接，h2标题变红 -->
9.E > F E元素下面第一层子集
10.E ~ F E元素后面的兄弟元素
11.E + F 紧挨着的兄弟元素
属性选择器
1.E[data-attr] 含有data-attr属性的元素
2.E[data-attr=‘ok’] 含有data-attr属性的元素且它的值为“ok”
3.E[data-attr^=‘ok’] 含有data-attr属性的元素且它的值的开头含有“ok”
4.E[data-attr$=‘ok’] 含有data-attr属性的元素且它的值的结尾含有“ok”
5.E[data-attr*=‘ok’] 含有data-attr属性的元素且它的值中含有“ok”
css3圆角
可以通过像素和百分比来设置
1.设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px;
2.同时分别设置四个角： border-radius:30px 60px 120px 150px;
3.设置四个圆角相同：border-radius:50%;
####css3阴影
box-shadow:水平偏移 垂直偏移 羽化大小(模糊度) 扩展大小
.box{
width:200px;
height:50px;
background-color:gold;
box-shadow:10px 10px 5px 2px pink;
}
<div class="box"></div>
新的颜色值表示法rgba
1.盒子的透明度
opacity:0.5;
filter:alpha(opacity=10)(兼容IE)
2.rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
注意事项：俩种方式的使用场景及区别
body{
background-color: green;
}
.box1{
background-color: yellow;
height: 50px;
width: 200px;
margin: 100px auto;
opacity: 0.5; //这里的透明度设置影响背景及文字
text-align: center;
line-height: 50px;
}
.box2{
background-color: rgba(210,210,210,0.1); //这里设置透明度只对背景有效，对文字无效
height: 50px;
width: 200px;
margin: 100px auto;
text-align: center;
line-height: 50px;
}
<div class="box1">
hello
</div>
<div class="box2">
hello
</div>
css3 transition动画
1.transition-property 设置过渡的属性，比如：width height background-color
2.transition-duration 设置过渡的时间，比如：1s 500ms
3.transition-timing-function 设置过渡的运动方式
+ linear 匀速
+ ease 开始和结束慢速(常用)
+ ease-in 开始是慢速
+ ease-out 结束时慢速
+ ease-in-out 开始和结束时慢速
+ cubic-bezier(n,n,n,n)
+ 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
+ 曲线设置网站：https://matthewlein.com/ceaser/
4.transition-delay 设置动画的延迟
5.transition: property duration timing-function delay 同时设置四个属性
.box{
width:100px;
height:100px;
background-color:gold;
transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms; //宽高属性按先后顺序渐变
//transition:all 1s ease 1s; //所有属性同时渐变
}
.box:hover{
width:300px;
height:300px;
background-color:red;
}
transform变换
注意事项：transform不改变文档流
1.translate(x,y) 设置盒子位移
2.scale(x,y) 设置盒子缩放
3.rotate(deg) 设置盒子旋转 (使用最多)
分为rotateX(),rotateY(),rotateZ()三个方向旋转，默认为沿着Z方向
4.skew(x-angle,y-angle) 设置盒子斜切
5.perspective 设置透视距离 (用老实现) 实现近大远小的效果，经验参考值800px
transform:perspective(800px) rotateY(0deg);
6.transform-style flat | preserve-3d 设置盒子是否按3d空间显示
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素
flat 子元素将不保留其 3D 位置
preserve-3d 子元素将保留其 3D 位置
7.tranform-origin 设置变换的中心点
transform-origin: x-axis y-axis z-axis;默认50% 50% 0；
x-axis值可以为left、center、right、length(px)、百分比
y-axis值可以为top、center、bottom、length(px)、百分比
z-axis值可以为length(px)
8.backface-visibility 设置盒子背面是否可见，默认可见，hidden时不可见
css3 animation动画
1.@keyframes 定义关键帧动画
2.animation-name 动画名称
3.animation-duration 动画时间
4.animation-timing-function 动画曲线
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5.animation-delay 动画延迟
6.animation-iteration-count 动画播放次数 n|infinite
7.animation-direction
normal 默认动画结束不返回
Alternate 动画结束后返回
8.animation-play-state 动画状态
paused 停止
running 运动
9.animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10.animation:name duration timing-function delay iteration-count direction;同时设置多个属性
css3样式前缀
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
比如：
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
自动添加浏览器前缀：
目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { “keys”: [“ctrl+alt+x”], “command”: “autoprefixer” } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。
也可以通过前端自动化工具gulp的相关插件（gulp-autoprefixer 自动添加css3前缀）来实现
h5新增结构标签(兼容性问题很少使用)
h5新增的主要语义化标签如下：
1.header 页面头部、页眉
2.nav 页面导航
3.article 一篇文章
4.section 文章中的章节
5.aside 侧边栏
6.footer 页面底部、页脚
PC端兼容h5的新标签的方法，在页面中引入以下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
HTML5 新增表单控件(不同浏览器效果不同，很少使用)
新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词
<input type="text" placeholder="please input:" autofocus="autofocus" autocomplete="on/off">
HTML5 音频和视频
移动端页面布局
移动端app分类:
1.Native App 原生app手机应用程序,使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C
2.Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用
3.Web App 基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用
#####Viewport 视口:
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
设置方法如下：sublime中可以通过meta:vp快捷键实现
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
视网膜屏幕（retina屏幕）清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题
背景图强制改变大小，可以使用background新属性
background新属性 background-size:
length：用长度值指定背景图像大小。不允许负值。
percentage：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：流体布局+响应式布局
2、移动端适配：
流体布局+少量响应式
基于rem的布局
弹性盒模型
流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
举例：4个盒子无边框宽度%25，设置float真好占用一行，如果设置1px边框，则加起来宽度大于100%，此时就会占据多行；
如果仍然想占据一行，2种方式：1.设置width：calc(25% - 2px);2.设置box-sizing=“border-box”
body,ul{
margin:0;
padding:0
}
ul{
list-style:none;
}
.menu{
height:50px;
}
.menu li{
/*
第一种解决宽度超过的方法：
width:calc(25% - 4px);
*/
width:25%;
height:50px;
text-align:center;
line-height:50px;
float:left;
background-color:gold;
border:2px solid #000;
box-sizing:border-box;
}
<ul class="menu">
<li><a href="">菜单文字</a></li>
<li><a href="">菜单文字</a></li>
<li><a href="">菜单文字</a></li>
<li><a href="">菜单文字</a></li>
</ul>
响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）
body,ul{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.con{
border:1px solid #000;
overflow:hidden;
}
.con li{
width:23%;
height:200px;
background-color:gold;
float:left;
margin:30px 1%;
}
@media (max-width:800px){
.con li{
width:46%;
margin:30px 2%;
}
}
@media (max-width:500px){
.con li{
width:90%;
margin:30px 5%;
}
}
<ul class="con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
基于rem的布局
首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，不同的元素其自身的文字大小可能不一样，因此em单位也不一样，没有统一参照标准；rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸
下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。
配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", “.less”, “.sass”]。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
