目录
HTML5笔记
web标准
结构标准(HTML)、表现标准(CSS)、行为标准(JS)
单标签
1.换行标签：
<br>2.水平线标签：
<hr>3.图片标签：
<!-- src:图片的引入路径 alt:显示图片失败时,显示的替代性文本 title:鼠标悬停时显示的文本 -->
<img src="" alt="" title="" width="" height="">双标签
1.标题标签：
<!-- 标题标签 -->
<!-- h系列的标签 -->
<!-- h标签的特点
①从h1-h6文字大小依次减小
②文字都是加粗显示
③标题标签自带上下间距
④标题标签是独占一行的
补充：h1标签有助于网络搜索的排名 所以logo和新闻标题都用h1
-->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>2.段落标签：
<!-- 段落标签 p标签 -->
<!-- 特点
①自带上下间距
②独占一行
-->
<p>阿巴阿巴</p>3.文本格式化标签：
<!-- 前者都是老版本标签，后者都是新版本具有强调语气，利于优化SEO -->
<h2>加粗标签</h2>
<b>加粗</b>
<strong>我也是加粗</strong>
<h2>下划线标签</h2>
<u>下划线</u>
<ins>我也是下划线</ins>
<h2>倾斜标签</h2>
<!-- 特殊情况中，或用i标签来展示小图标 -->
<i>倾斜</i>
<em>我也是倾斜</em>
<h2>删除线标签</h2>
<s>删除线</s>
<del>我也是删除线</del>4.音频标签和视频标签：
<h2>音频标签</h2>
<audio src="../images/music.mp3" controls autoplay loop ></audio>
<h2>视频标签</h2>
<video src="../images/video.mp4" controls loop autoplay muted ></video>
<!-- controls显示播放控件 loop循环播放 视频标签中autoplay自动播放得配合muted使用(静音) -->
<!-- 音频目前支持三种格式:MP3 Wav Ogg
视频目前支持:MP4 WebM Ogg
-->5.超链接标签：
<a href="./12.视频标签和音频标签.html" target="_blank">点我试试</a>
<a href="../images/cat.gif" target="_blank"><img src="../images/dog.gif"></a>
<a href="../新建 XLS 工作表.xls" title="1111">excel文件</a>
<!--href:要跳转到的目标地址
可以网络地址
可以本地的html文件
可以本地的图片文件
可以本地的excel文件
target:
_self:在当前窗口打开新的页面
_blank:新建窗口打开页面,保留原来的页面
-->标签的关系
嵌套和非嵌套的关系
路径
绝对路径：1.带有跟盘符的路径(Y:\Myself\xxxx) 2.网络地址
相对路径：./ 当前目录 ../上一级目录 xxx/xxxxx下一级目录
列表
1.无序列表
<h3>无序列表</h3>
<!-- 特点：
每一个li标签前面都有黑色小圆点
ul和li都独占一行
ul标签自带间距
ul标签和li标签之间不能放其他的任何标签
li标签可以放任何的标签
-->
<ul>
<li>啊啊啊啊</li>
<li>哇哇哇哇</li>
<li>水水水水</li>
<li>顶顶顶顶</li>
</ul>2.有序列表
<h3>有序列表</h3>
<!--
ol标签属性
start:设置开始值
type:设置ol的type类型
-->
<ol start="3" type="i">
<li>啊啊</li>
<li>宝宝</li>
<li>试试</li>
<li>大地</li>
</ol>表格
<!--表格标签属性
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
aligin：设置表格位置
left左对齐
right右对齐
center居中
cellspacing设置单元格与单元格之间的距离 一般为0
cellpadding设置单元格与单元格内容之间的距离
-->
<table border="1" width="400" height="200" align="center" cellspacing="0" >
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>籍贯</td>
</tr>
<tr align="center">
<td>张三</td>
<td>22</td>
<td>男</td>
<td>未知</td>
</tr>
<tr align="center">
<td>李四</td>
<td>21</td>
<td>女</td>
<td>你猜</td>
</tr>
</table>表格的合并
1.确定要合并的单元格是哪几个
2.根据左上原则(左右合并保留左边，上下合并保留上边)，确定保留谁删除谁
3. 确定使用的是rowspan(跨行)还是colspan(跨列)，给保留的单元格设置
表单
<form>
<p>
昵称: <input type="text" placeholder="请输入用户名" name="username">
</p>
<p>
密码: <input type="password" placeholder="请输入密码" name="pwd">
</p>
<p>
<!-- checked 默认选中一个 -->
请选择性别:
<!-- label的作用:图片和文字点击都可以选中 -->
<!-- 2个以上单选按钮要想实现单选(只能选中一个)效果 必须有相同的name属性 -->
<label><input type="radio" name="sex" checked >男</label> <!-- lable的第一种写法 -->
<input type="radio" name="sex" id="ok"> <label for="ok">女</label> <!-- lable的第二种写法 input里定义一个id lable里的for == id -->
</p>
<p>
兴趣爱好:
<label><input type="checkbox" name="hibby" value="football" checked>踢足球</label>
<label><input type="checkbox" name="hibby" value="playgame">打游戏</label>
<label><input type="checkbox" name="hibby" value="eat" checked>吃饭饭</label>
<label><input type="checkbox" name="hibby" value="sleep">熬夜打豆豆</label>
</p>
<p>
<!-- 文件上传 默认是单文件上传 multiple可以多文件上传 -->
<input type="file" multiple>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</p>
<p>
<!-- 下拉菜单 selectede默认选中一个-->
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州" selected>杭州</option>
<option value="深圳">深圳</option>
</select>
</p>
<p>
<!-- 文本域标签 -->
请输入描述信息<br>
<!-- cols相当于控制宽度 rows相当于控制高度 -->
<textarea name="" cols="30" rows="10" placeholder="请输入1000字反思"></textarea>
</p>
</form>CSS笔记
基础选择器
1.标签选择器
<style>
/* 选择器：将css跟html标签建立关联，并给该标签设置css样式 */
/* 标签选择器 通过标签名来选中某一个标签
特点:
标签选择器选中的是当前页面所有该标签，而不是只选中一个
*/
div{
color: lightblue;
}
h1{
color: lightsalmon;
}
</style>
<body>
<div>我是div标签</div>
<p>我是p标签</p>
<span>我是span标签</span>
<h1>我是h1标签</h1>
<div>我也是div标签</div>
<ul style="list-style: none;">
<li><div>我是ul里的div标签</div></li>
</ul>
</body>2.类选择器
<style>
/* 类选择器：.类名{}
特点：
类选择器既可以选中一个，也可以选中多个
所有的标签都能设置class属性
一个标签可以同时拥有多个类名
*/
.uld{
color: lawngreen;
}
.-ban_1{
color: lightsalmon;
}
</style>
<body>
<div class="-ban_1">我是div标签</div>
<div>我也是div标签</div>
<ul>
<li><div class="uld">我是ul里的div标签</div></li>
</ul>
</body>3.id选择器
<style>
/* id选择器 #id名 {}
特点：
id的名字只能被定义一次
一个标签只能拥有一个id
一次只能选中一个标签
*/
#one{
color: lightcoral;
}
.one1{
font-size: 60px;
}
input{
width: 350px;
height: 35px;
border-radius: 20px;
border: 1px solid lightcoral;
outline: none;
}
input::placeholder{
font-size: 14px;
color: #c3c3c3;
}
</style>
<body>
<div id="one" class="one1">我是div标签</div>
<p>我是p标签</p>
<div id="two">我也是div标签</div>
<input type="text" placeholder="请搜索你喜欢的商品">
</body>设置字体的相关样式
font家族
.box{
/* 改变字体大小 */
/* 在谷歌浏览器中 支持最小字体是12px */
font-size: 60px;
/* 改变字体粗细 */
/* 取值:
关键字：bold加粗 normal正常
数值： 100-900之间的整百数 400正常不加粗 700加粗
并不是所有浏览器都提供了9种文字的粗细程度
*/
font-weight: 700;
/* 设置字体是否倾斜 */
/* 取值：italic倾斜 normal不倾斜 */
font-style: italic;
/* 设置字体系列 */
/* font-family支持同时设置多个字体系列
先找第一个，如果第一个不支持就找第二个。。。如果都不支持，则使用默认字体
要想支持多个字体系列 用逗号隔开
*/
font-family: 楷体;
/* 属性合写 */
/* 取值 font:style weight size family
如果这个属性有默认值，那么就可以省略
style和weight可以省略掉，size和family不可以省略
*/
}
p{
font-size: 30px;
font-weight: 300;
font-style: italic;
}
</style>
<body>
<div class="box">
我是div标签
</div>
<p>我是p标签</p>
</body>设置文字首行缩进
<style>
.box{
/* 设置首行缩进 */
/* 取值：
数字 + px
数字 + em 1em = 当前的font-size的大小
*/
text-indent: 2em;
}
</style>
<body>
<div class="box">
2022年7月27日 星期三 小蓝日刊
1、M1 Mac Pro 被搁置，苹果将直接发布 M2 Extreme 版 Mac Pro 电脑
2、UEFI 主板 BIOS 木马发现新变种
</div>
</body>设置文字居中效果
<style>
.box{
height: 60px;
background-color: lightblue;
/* 设置文字水平居中 text-align */
text-align: center;
/* 行高等于盒子的高度 可以让文字垂直居中 */
line-height: 60px;
/* text-align:center;一般情况下只能给独占一行的加
给谁加就是让谁里面的内容居中
如果需要让文本水平居中,text-align属性给文本所在标签父元素设置
可以让 文本 span a input img 居中 需给以上元素的父元素设置text-align:center
*/
}
</style>
<body>
<div class="box">
<a href="#">首页</a>
</div>
</body>文本装饰线
<style>
a{
/* 设置文本装饰线 */
/* 取值:
none:没有装饰线
underline:下划线
line-through:删除线
overline:上划线
*/
text-decoration: none;
color: lightcoral;
}
span{
text-decoration: underline;
color: lightcoral;
}
</style>
<body>
<div class="box">
<a href="#">首页</a>
</div>
<span>啊啊啊啊啊</span>
</body>选择器Plus版
1.后代选择器
/* 后代选择器；选择器1 选择器2 {css代码} 用空格隔开 */
.box a{
color: red;
}
.box p a{
text-decoration: none;
font-size: 18px;
color: green;
}
.box h1 p a{
text-decoration: none;
font-size: 20px;
color: blue;
}
</style>
<body>
<div class="box">
<a href="#">我是a标签</a>
<p>我是p标签</p>
<p>
<a href="#">我是p标签里的a标签</a>
</p>
<h1>
<p>
<a href="#">我是h1标签里的p标签里的a标签</a>
</p>
</h1>
</div>
<p>我也是p标签</p>
</body>2.子代选择器
<style>
/* 子代: 指的就是亲儿子 选择器1>选择器2 {css} */
.father > .son{
color: lightcoral;
}
.list_box > .list > li{
color: blue;
}
</style>
<body>
<div class="father">
<div class="son">
<span>我是son里的span标签</span>
</div>
</div>
<hr>
<div class="list_box">
<ul class="list">
<li>
1
<div>
<ul class="list">
<li>2</li>
</ul>
</div>
</li>
</ul>
</div>
</body>3.并集选择器
<style>
/* 并集选择器：并集->一起，一块，共同的意思 */
/* 语法：选择器1,选择器2,选择器3......用逗号隔开 */
h1,
p,
ul{
margin: 0;
padding: 0;
}
/* 实现box下的h1和p标签文字变色 */
/* .box h1,p{
color: lightcyan;
} 错误写法 外面的p也会变色 */
.box h1, .box p{
color: lightcoral;
}
</style>
<body>
<div class="box">
<h1>我是h1标签</h1>
<p>我是p标签</p>
<ul>
<li>
我是li标签
</li>
</ul>
</div>
<p>我是外面的p标签</p>
</body>4.交集选择器
<style>
/* 交集选择器：既是....又是.... 选择器与选择器之间没有任何的空格及特殊符号*/
/* 选择既是div又是类名.box的标签 */
div.box{
color: lightcoral;
}
p.box{
color: blue;
}
</style>
<body>
<div class="box">我是div标签</div>
<p class="box">我是p标签</p>
</body>5.hover伪类选择器
.box{
height: 70px;
background-color: lightblue;
text-align: center;
line-height: 70px;
}
.box:hover{
background-color: lightcoral;
}
a{
text-decoration: none;
font-size: 18px;
color: #000;
}
a:hover{
color: skyblue;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<a href="#">首页</a>
<a href="#">秒杀</a>
<a href="#">叮咚云</a>
<a href="#">PLUS会员</a>
<a href="#">京东拍卖</a>
</div>元素的显示模式
1.块级元素(block)
特点：1.独占一行 2.宽度默认父元素的高度 3.可以设置宽高
代表标签：div p h ul/li ol dl dt dd form
2.行内元素(inline)
特点：1.一行可以显示多个 2.可以设置宽高，但不生效
代表标签：a span img 文本格式化标签
3.行内块元素(inline-block)
特点：1.一行可以显示多个 2.可以设置宽高
代表标签：input textarea button select
4.元素间的相互转换
display：display-block(转为块元素) display-inline(转为行内元素) display-inlineblock(转为行内块元素)
CSS三大特性
1.层叠性
同一个选择器下设置相同的css属性，下面的会覆盖掉上面的
2.继承性
子元素会继承父元素的某一些css属性
可以继承的CSS属性
①font家族(h标签不能继承font-size，要想修改，只能单独选出来手动修改)
②color(a标签的color不能继承，要想修改，只能单独选出来手动修改)
③text-indent
④text-align
⑤line-height
3.优先级
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
盒子模型
1.content内容区域
width height
2.border边框区域
①boder-color：边跨颜色
②border-width：边框粗细
③border-style：边框线的样式
solid：实线
dashed：虚线
dotted：点状线
④合写：border：粗细 样式 颜色
3.padding内边距区域(设置盒子边框和内容之间的间距)
padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距
合写：padding：一个值(上右下左)
padding：二个值(上下 左右)
padding：三个值(上 左右 下)
padding：四个值(上 右 下 左)
注意事项：内边距也会撑大盒子(内边距会影响盒子的实际大小)
4.margin外边距区域(设置盒子与盒子之间的距离)
margin-top：上内边距
margin-bottom：下内边距
margin-left：左内边距
margin-right：右内边距
合写：margin：一个值(上右下左)
margin：二个值(上下 左右)
margin：三个值(上 左右 下)
margin：四个值(上 右 下 左)
注意事项：外边距是不能影响盒子的实际大小
选择器Pro Plus版
结构伪类选择器
<style>
/* first-child和last-child寻找过程
先找到第一个或最后一个，再去对比找到的标签跟写的是否一致
*/
/* 渲染效率上 first和last比nth高 */
/* 选择偶数行 2n或者even */
ul li:nth-child(2n){
background-color: lightblue;
}
/* 选择奇数行 2n+1或者odd */
ul li:nth-child(2n+1){
background-color: lightcoral;
}
.box span:nth-child(odd){
color: red;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="box">
<span>span1</span>
<p>p1</p>
<a href="#">a1</a> <br><br>
<span>span2</span> <br><br>
<div>div1</div>
</div>
</body>补充：div:nth-child(1)和div:nth-of-type(1)
nth-child先到指定的第几个，再去对比找到的标签跟你写的标签是不是一致
nth-of-type先找到指定的标签名进行排序，然后在排序的标签名中找第几个
伪元素( 一般用在双标签身上)
::before：指的是某个盒子的内容的最前面
::after：指的是某个盒子的内容的最后面
伪元素的注意事项:
1.伪元素最终会添加在双标签的内容的前后
2.伪元素的内容放在content属性中，用英文引号包裹
3.伪元素默认是一个行内元素
4.伪元素一定要包含content属性，如果没有，伪元素会显示不出来
浮动
<style>
/*
浮动的特点:
1.浮动的元素会脱标，脱标会导致盒子不占位置，盒子不占位置就会让后面的盒子往上跑
2.浮动元素的显示级别要比标准流高
3.浮动元素与浮动元素之间也有先后顺序
4.如果一个行内元素浮动了，那么这个行内元素可以设置宽高且生效
注意事项:
设置浮动属性的元素，再去设置text-align:center;和margin:0 auto;是无效的
一浮全浮:一个盒子中的子盒子，其中一个盒子设置了浮动，那么其他的子盒子也要设置浮动
*/
.box{
width: 800px;
height: 600px;
background-color: lightblue;
}
.son1,.son2{
float: left;
width: 300px;
height: 300px;
}
.son1{
background-color: lightcoral;
}
.son2{
background-color: lightgreen;
}
</style>
<body>
<div class="box">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>定位(position)
1.静态定位：static
①静态定位是一种特殊定位就是没有定位(占着茅坑不上厕所)
②和标准流盒子一样
2.相对定位：relative
①相对于元素自身的位置移动的定位
②相对定位，元素移动之前占位置，移动之后新的位置脱标，不占位置
3.绝对定位：absolute
①带有任意一种定位属性的元素，如果祖先元素没有定位属性，则参考对象是浏览器
②绝对定位不管是移动后的新位置，还是移动后的旧位置都是脱标的，不占位置
4.固定定位：fixed
①参考对象是整个浏览器窗口
②脱标不占位置
③让一个元素固定在某个地方保持不动
5.定位元素之间的层级问题
①定位的元素，标签的属性，谁在下面，页面的显示的效果尚谁就在上面
②要想改变定位元素之间默认的显示效果，需要通过z-index属性来改变定位元素之间的显示层级
③z-index比较的是后面谁的数字大，谁的层级就高，谁的层级高谁就在最上面显示
④显示层级 标准流 < 浮动 < 定位
元素自身的显示与隐藏
<style>
.one{
width: 200px;
height: 200px;
background-color: lightblue;
}
.two{
/* visibility: hidden;隐藏之后占位置 */
/* display: none; 隐藏之后不占位置 */
visibility: hidden;
display: none;
width: 200px;
height: 200px;
background-color: lightcoral;
}
.three{
width: 200px;
height: 200px;
background-color: lightseagreen
}
</style>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>使用CSS3画小三角
<style>
.box{
width: 0px;
height: 0px;
/* 设置四条边框，颜色为透明色 */
border: 10px solid transparent;
/* 单独指定一条边 设置颜色层叠掉透明色 */
border-top: 10px solid black;
}
</style>
<body>
<div class="box"></div>
</body>属性选择器
<style>
/* 属性选择器一般配合js使用 */
/* E[attr] */
/* E[attr='val']
选中具有attr属性并且属性值等于val的E标签
*/
input[value]{
background-color: lightblue;
}
input[placeholder]{
background-color: lightgray;
}
input::placeholder{
background-color: red;
}
</style>
<body>
<input type="text" value="打你的母牛">
<input type="text" placeholder="输入你的母牛">
</body>
移动Web笔记
2D转换
位移--transform：translate
transform：translate(x,y);
单位是px或者%(参考本身的宽高)
实现在x轴和y轴上位移；如果只写一个值，该值是x轴方向。
补充：和定位配合使用可以实现水平垂直居中
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
旋转--transform：rotate
transform：rotate(xdeg);
单位是deg(角度)；
设置旋转中心点：transform-origin：-- --；
属性值可以是方位名称或者宽高；
div{ width: 200px; height: 100px; background-color: lightcoral; /* 设置旋转中心点 */ transform-origin: left bottom; transition: all 1s; } div:hover{ transform: rotate(360deg); }
缩放--transform：scale
transform：scale(x,y);
单位直接写数字，没有单位，大于1放大，小于1缩小。写一个值，等比例放大缩小。
transform复合写法
1.多个属性之间用空格隔开
2.绝大多数情况下，要先写位移，再写旋转等其他属性值（为什么？因为先旋转会改变坐标的位置）
动画--animation
动画的定义：
1. @keyframes 动画名称{0%{} 100%{}}(百分比分割的是时间) 或者 @keyframes 动画名称{from{} to{}}
动画的使用：
1.动画名称(必写)：animation-name
2.执行时长(必写)：animation-duration
3.运动曲线：animation-timing-function
①linear(匀速) ease ease-out .....
②steps(2) 步长 里面单位跟数字
注意：如果使用了步长steps 就不要再次运用运动曲线
4.动画延时：animation-delay(设置几秒后开始动画)
5.执行次数：animation-iteration-coun(infinite 无限次)
6.动画逆播：animation-direction：alternate
7.动画结束状态：animation-fill-mode：backwards(结束时立即返回) forwards(停在结束位置)
8.动画的播放状态：animation-play-state：默认时running paused暂停
9.动画连写：animation：name(必写) duration(必写).......
注意：动画的播放状态不要写在动画连写里，一般配hover使用
div:hover{ /* 是否暂停 此属性搭配hover使用 默认是running paused:暂停 不能写在动画复写里 */ animation-play-state: paused; }
3D转换
透视距离
perspective:xxxpx;(一般取值500px-800px) 眼睛到屏幕的距离
定义：为被观察的元素的父级别元素设置
transform：translateZ
物体到屏幕的距离，在相等的透视距离里面，z轴越大，看到成像越大，反之亦然。
旋转
transform：rotate
rotateX：相当于上下旋转(正值往后倒，负值往前躺) ------个人理解
rotateY：相当于左右旋转(正值往右来，负值往左去) ------个人理解
rotateZ：相当于自我旋转(正值顺时针转，负值逆时针转) ------个人理解
3D呈现
transform-style：preserve-3d；
写给被观察元素的父元素上，一般加给亲爸爸。
注意：没有透视距离和3d呈现完不成3D效果！！！
Flex弹性盒子布局
设置父元素为弹性盒子：display：flex；
原理：通过为父元素设置display：flex；控制子元素(亲儿子)的排列方式。
父元素属性
1.主轴方向：flex-diection
row 左->右(x轴） row-reverse(右 -> 左) ------默认
column 上->下(y轴) column 下->上
2.是否换行：flex-wrap
nowrap 不换行显示(默认)
wrap 换行显示
wrap-reverse 换行并翻转
3.子元素在主轴显示方式 justify-content
flex-start 头部开始排列
flex-end 尾部对齐
center 居中对齐
space-between 两端对齐 中间平均分配剩余空间
space-around 平均分配剩余空间给伸缩项的两端
space-evenly 平均分配剩余空间
4.子元素在侧轴的显示方式
单行 align-items
stretch 拉伸 (默认) -----要么不给宽，要么不给高。
flex-start 开始方向对齐
flex-end 结束方向对齐
center 居中对齐
多行 align-content
stretch 拉伸
flex-start 开始方向对齐
flex-end 结束方向对齐
center 居中对齐
space-between 两端对齐 中间平均分配剩余空间
space-around 平均分配剩余空间给伸缩项的两端
子元素属性
1.flex：number
计算公式 - 当前元素的宽度 = 当前伸缩项的flex数值 / 所有兄弟的伸缩项的flex数值相加的和
值可以是数字(不跟单位) 也可以是百分比 %
span{ background-color: lightsalmon; flex: 25%; } p span:nth-child(1){ background-color: lightskyblue; flex: 50%; } <p> <span>1</span> <span>2</span> <span>3</span> </p>2.控制单个子元素在侧轴的显示方式align-self
stretch 拉伸 (默认值)
flex-start 开始方向对齐
flex-end 结束方向对齐
center 居中对齐
3.排序 order (了解)
默认为0；数值越小，排列越靠前。
less+rem+媒体查询布局
rem单位
1.em单位
em是相对于父元素字体大小来设置，em是一个相对单位：如果自身有font-size，则以自身的font-size为基础计算，如果没有，则以父元素字体大小为准，如果父级没有会一直往上找，直到找到html元素的字体大小
2.rem单位
rem是绝对于html元素的字体大小来设置，rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。rem始终参考的是html标签的字体大小，跟父亲的字体大小没有关系。
媒体查询
1.媒体查询的作用
媒体查询是CSS3新语法，使用@media查询，可以针对不同的媒体类型定义不同的样式，@media可以针对不同的屏幕尺寸设置不同的样式。
2.媒体查询语法规范
用@media开头
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须用小括号包含
@media mediatype and|not|only (media feature) { CSS-Code; }mediatype 媒体类型
将不同的终端设备划分成不同的类型
all 用于所有设备
print 用于打印机或打印预览
screen 用于电脑屏膜，平板电脑，智能手机等
关键字
将多个媒体特性链接到一起作为媒体查询的条件
and 可以将多个媒体类型连接到一起
not 排除某个媒体类型
only 指定某个特定的媒体类型
media feature 媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的风格
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度注意他们要加小括号包含
媒体查询书写规范
为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁
例子：在最大的宽度是800px 设置想要的样式
@media screen and (max-width: 800px) { body { background-color: pink; } } @media screen and (max-width: 500px) { body { background-color: purple; } }
Less基础
1.less变量
@变量名：值
必须以@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
body{ color:@color; } a:hover{ color:@color; }2.less嵌套
nav{ a{ text-decoration: none; color: @deepColor; &:hover{ color: red; } &:active{ color: blue; } } }如果遇见 （交集|伪类|伪元素选择器） 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
3.less运算
@witdh: 10px + 5; div { border: @witdh solid red; }乘号（*）和除号（/）的写法 运算符中间左右有个空格隔开 1px + 5对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位 如果两个值之间只有一个值有单位，则运算结果就取该单位
rem适配方案
1.为什么要适配？怎么去适配？怎么在实际开发中使用？
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
2.rem 实际开发适配方案
按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；
3.rem 适配方案技术使用
方案1：less+媒体查询+rem
1.设计稿常见尺寸宽度
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准。
2.动态设置html标签font-size大小
假设设计稿是750px，假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）每一份作为html字体大小，这里就是50px，那么在320px设备的时候，字体大小为320/15 就是 21.33px，用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的，比如我们以 750为标准设计稿，一个100*100像素的页面元素 在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1，320屏幕下，html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
3.元素大小取值方法
页面元素的rem值 = 页面元素值(px) / (平魔宽度 / 划分的份数)
页面元素的rem值 = 页面元素值(px) / html的font-size的字体大小
方案2：flexible.js+rem
手机淘宝团队出的简洁高效 移动端适配库，我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理，它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html 文字大小就可以了。比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以里面页面元素rem值： 页面元素的px 值 / 75 ，剩余的，让flexible.js来去算
3174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
