1.常见标记(元素)
1. 双标记 对标签
<标签 属性=“属性值”></>
单标记（空标记）
<标签 属性=“属性值”/>H4 <>H5
2. p标签之间不能嵌套，只占据自己内容位置的标签，文本，图片
3. ul > li 无序列表标签
特点：单独占据一行有默认的小黑圆点标记,一般不用默认的小黑点， <style type="text/css">li{
list-style:none;}</style>
4. ol > li 有序列表标签
特点：单独占据一行，有默认的阿拉伯数字标记，一般不使用默认的数字<style type="text/css">ol或者li{
list-style:none;}</style>
一般用来做单导航
5. dl > dt+dd 自定义列表
dt 自定义列表项目
dd 自定义列表项目注释
特性：（上下结构 左右结构）
6. img 图片标签 （单标签）
src="图片路径"
相对路径:../表示返回上一级目录（回退一步）
./表示当前文件夹下
绝对路径:从域名地址出发http://
从盘符出发D:/
alt="图片显示不出时的文本提示"
title="鼠标悬停提示"
width=“图片的宽度”
height="图片的高度"
(注意：只写宽/高，另一边会等比例缩放)
图片格式：.jpg:常见的普通图片, .gif: 动态图, .png: 背景透明的图片
7. a 标签 超链接标签 实现页面之间的跳转（双标签）
文本默认蓝色，带有下划线,href="跳转的地址"
target ="页面打开方式"
_self 当前页面刷新,_blank 不断打开新窗口,_new 新窗口刷新
锚点连接
有点击的位置
<a href="#name">点击位置</a>
有跳转的位置
<p id="name">被跳转位置</p>或者<a name="name">被跳转位置</a>
跳不上去的特殊情况：页面高度不够
8. div: 空元素（块标签）
单独占据一行
一般用来搭建页面结构
9. span: 空元素（文本结点标签）
只占据自己内容的位置大小
一般用来与其他标签组合写样式
二、表单
form 表单
action:提交到哪里（提交地址）
method:提交方式
get-->明文提交，数据不安全，在地址栏提交，有长度限制，有可能丢失数据，速度快（获取）
post-->非明文提交，数据安全性高，不在地址栏提交，没有长度限制，不会丢失数据，速度慢（提交）
表单元素:
<input> type-声明标签元素类型
type="text" 单行文本输入框
type="password" 密码框
type="submit" 提交按钮 可以提交数据
type="reset" 重置按钮
type="radio" 单选按钮 （所属的选项name值要一致）注意name互斥
type=“button” 是一个普通按钮，没有提交功能，需要结合Js才能设立自己的作用
<button>提交标签</button>普通按钮
select > option 下拉列表选择
<textarea> 多行文本框</textarea> cols 字符宽度 rows 行数
type="checkbox"多选框
name="元素名字"
value="元素值"
placeholder="文本提示"
checked ="默认选中"
disabled ="禁用"
三、表格
table:表格
border:"边框"
width:"宽度"
height:"高度"
bgcolor:"表格背景色"
cellspacing:"边框与边框之间的间隙"
cellpadding:"边框与内容之间的间隙"
align:"left(默认)/center/right"
tr:行
td:列
colspan:左右合并 合并列
rowspan:上下合并 合并行
四、CSS语法和样式
1.css基本语法
选择器{属性:属性值;(样式声明)}
2.css样式:
内部样式：在head标签里面（针对选择器的所有）<style type="text/css">选择器{
属性:属性值;}</style>
内联样式：在具体的结构标签里面（只针对本身）在标签内部以属性添加
<标签 style="属性:属性值;">
外部样式：在独立的一个css文件@charset "utf-8";
首先有一个独立的css文件，在html页面的<head>中通过link标签引入，<link>标签<link rel="stylesheet" type="text/css" href="css文件地址">,在style标签中书写@import url("css文件地址");必须写在style标签后的第一句
[区别]：link是标签，可以被js操作，和结构同时加载 @import是css的一种写法，无法被Js操作，先加载结构，后渲染效果；
3.作用范围:
外部样式>内部样式>内联样式
4.样式的优先级:
内联样式>内部样式>外部样式（就近原则）
作用范围越小，优先级越高（link在style之前，之后则优先级 内联>外部>内部）
五、CSS选择器
1.类选择器(不唯一)
在标签中添加属性 class="name aa bb name（className或者class-name）"
使用时添加.name{}
在一个页面可以多次出现，一个标签可以有多个class值
2.类型选择器（元素选择器 标签选择器）：div p h1 h1 span a i em b……
3.id选择器(具有唯一性，在一个页面中只能出现一个id值)
在标签中添加属性 id="name"
使用时添加#name{}
4.* 通配符 匹配页面中所有的元素（标签）
5.群组选择器(并列关系 兄弟关系 匹配这一组选择器) 选择器，选择器，选择器{}
6.包含选择器（父子关系 后代选择器 匹配结构中最后一个选择器）
选择器 选择器{}（注意结构和选择器需要一致）
结构形成嵌套（包含关系）
7.伪类选择器
:link{} 初始状态
:visited{} 访问过后的状态
:hover{} 鼠标悬停的状态
:active{} 鼠标点击（按下）的状态
六、浮动（1）
float 浮动
left左浮动
right右浮动
none不浮动
特点：
浮动元素挨着最近的父级元素边缘停下，
下一个浮动元素挨着上一个浮动元素停下
如果没有父级，挨着浏览器边缘
让元素能在一行显示
让原始（span）不能设置宽高的元素设置宽高，同时在一行显示
浮动之后的元素让原始占据一行的元素只占据自己设置的大小宽高
在父级没有高度时，子集浮动会造成父级元素高度塌陷
浮动元素只影响结构后面的元素，不影响结构前面的元素
父级元素宽度不够，子集元素被迫换行显示
七、选择器权重
类型选择符权重为0001
class选择符权重0010
id选择符权重0100
属性选择符权重0010
伪类选择符权重0010
伪元素选择符权重0001
包含选择符权重为之和
内联选择符权重1000
选择器优先级：
id选择器 > class选择器 > 类型选择器
八、浮动（2）
浮动带来的问题 父级元素高度塌陷
(1)解决方式一：给父级元素添加高度 缺点：不灵活
(2)解决方式二：给浮动元素添加“弟弟”，添加清除浮动样式 style ="clear:both" 缺点是：造成大量代码冗余，而且必须是单独占据一行的标签
(3)clear清除浮动带来的问题
left：清楚左浮动带来的问题
right 清楚右浮动带来的问题
both 清楚浮动带来的问题
(4).btn11:after{
content:"";/*伪元素*/
display:block;/*声明这个元素是单独占据一行的*/
clear:both;
}
九、CSS文本属性
1. font-size：文本大小
*默认文本大小是16px *文本最小大小为12px
9pt=12px;
em继承(?)最近的父级元素的文本大小
*rem跟着根元素（HTML）的文本大小变化（！）
2. color:文本颜色;
英文单词
十六进制
#0-9 a-f #aabbcc可以简写为abc
三元色 红red 绿green 蓝blue
background:rgb(0,0,0);黑色
rgb(255,255,255);白色（取之范围0-255）
rgba(0,0,0,0(透明度 取值范围0-1))
3. font-family:字体类型1 ，字体类型2，字体类型3
微软雅黑 宋体
字体类型是中文，或者引文字体中有空格则需要加引号
4. font-weight:
bold/bolder文本加粗/normal默认文本(常规/去掉加粗)
font-weight:数值（100-900整百的加）100-500常规表 现 600-900加粗（与常规比较）;
5. 文本倾斜：font-style:
italic(斜体字 权重值高)
oblique(倾斜的文字 倾斜的样式效果)
normal(正常，不倾斜);
6.text-align:文本水平对齐
left 默认对齐方式，左对齐
right 右对齐
center
justify 两端对齐
7. line-height:行高 文本垂直对齐方式
行高<高度 偏上
行高=高度 居中
行高>高度 偏下
！以上针对单行文本
normal默认值
当line-height的值不带单位时，它的数为值乘以当前区域
单位px
单位%
font简写:文本/行高 字体类型;（必写）
8. text-decoration:
none没有线;
underline下划线;
overline上划线;
line-through中划线;
9. text-indent:首行缩进;
px em
10. letter-spacing:字间距 字与字之间的间距;
px em
11. 列表属性:
list-style-type:;
list-style-image:url("图片地址");
list-style-position:inside/outside;
十、背景background
1. background-color:背景颜色
2. backgroung-image:url("图片路径");背景图片
3. background-repeat(只针对图片):背景图片的平铺方式（是否重复,默认重复）
no-repeat:不重复
repeat-x:在x方向(水平方向)重复平铺
repeat-y:在y方向(垂直方向)重复平铺
4. background-position(背景定位)
:x方向 y方向；(left/right/bottom/top/center/具体数值px)
简写background:blue url("") no-repeat 20px 50px;
5. background-attachment：fixed/scoll；
6. border-style:solid/dashed/dotted/double;
transparent(透明)
十一、盒模型
1. 盒模型的组成部分
内容区域 content（width height）
内边距区域 padding
边框 border
外边距区域 margin
2. 盒模型分类：
标准盒模型：content= width height
怪异盒模型content=width=(width+border+padding)
height=(height+border+padding)
padding:元素边缘与内容之间的距离
padding-top 顶部的内边距
padding-right 右边的内边距
padding-bottom 底部的内边距
padding-left 左边的内边距
padding：10px;上下左右
padding:20px 20px;上下 左右
padding:10px 10px 10px 10px;上 右 下 左
padding:10px 20px 10px;上 左右 下
padding不能有负值
margin；元素边缘与元素外边的距离(与其他元素外边的距离)
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
margin：10px;四个方向；
margin:10px 20px;上下 左右
margin:10px 20px 30px;上 左右 下
margin：10px 20px 30px 40px；上 右 下 左
margin:auto;左右自适应，左右居中(对上下无用)
margin可以取负值，代表相反的方向
十二、空余空间
white-space:pre;原格式输出
white-space:pre-wrap;原格式输出(保留空白)但是会换行
white-space:pre-line;合并空白，但是会保留换行
十三、单行文本超出显示省略号
white-space:nowrap;/*强制不换行*/
overflow:hidden;
text-overflow:ellipsis;
overflow:visible;/*默认值显示*/
overflow:hidden;/*超出隐藏*/
overflow:scroll;/*出现滚动条*/
overflow:auto;/*自适应*/
overflow:inherit;/*继承*/
overflow-x:hidden;/*x方向出现隐藏特性*/
overflow-y:scroll;/*y方向出现scroll特性*/
十四、常见的问题
浏览器兼容：
div中的图片间隙
常见的cssbug和csshack:
1、img的下方间距：
给图片添加display:block;或者是添加浮动;给图片添加vertical-align;
img横着摆放时，左右又间距
不让Img标签换行或者添加浮动
2、li标签内的a想要浮动在一行，
给a 添加浮动的同时，还需要给li添加浮动
3、元素浮动后添加左右边距会形成双倍边距
给元素添加display:inline-block;
4、两个元素浮动，宽度为50%，将解析超过50%，将换行显示
clear:right;
5、元素默认有小于18像素的高度
给元素添加height;
给元素添加overflow:hidden;
6、表单中的按钮顶部距离不一致
添加浮动
使用a标签模拟
7、表单中的text单行文本提示
统一使用value
8、表单按钮提示内容不一致
使用value 修改
9、表单中的text单行文本输入偏上
使用line-height；；修改内容的位置
9、按钮元素默认大小不一
统一大小
10、百分比bug
给右边的元素添加clear:right;
9、鼠标指针bug
cursor:hand;/ie9以下
cursor:pointer;/ie6以上版本
10、（外边距合并原则）
嵌套关系（父子关系）
子元素添加外边距会溢出父元素，带着父元素一起
给父级添加边框或者内边距，或者给父级添加浮动
并列关系
上下外边距合并，统一添加一个外边距，或者中间使用空元素（代码冗余）
十五、表格表单和统筹
表单form：收集用户信息
高级表单信息：
<fieldset></fieldset>相当于一个方框，包围住里面的东西
<legend></legend>字段级标题,一个<fieldset>里面只能有一个<legend>，align可以调整字段级标题的位置
<label for=""></label>关联内容
<input type="file" multiple="multiple">上传文件框，multiple可实现多选
表格属性高级：
<table> 表格
<th>默认居中
<tr> 行
<td> 列
rowspan 合并行
colspan 合并列
border-spacing:0/1;单元格间距(合并成双边框),可以带单位
!border-collapse:;合并相邻单元格边框(合并成单边框)
empty-cells:show显示/hide隐藏;无内容的单元格设置（前提是双边框显示才能看出来）
table-layout:auto(默认)/fixed(把宽度大小固定，计算单元格的宽度是否固定);显示单元格行和列的算法
<caption>表格标题
caption-side:top/bottom/left/right(只有火狐识别左右);
<table rules="rows/cols/none/all/groups(和colgroup标签（或者col单标签）一起用<colgroup span="value">,分为行组或者列组)">添加组分割线
<thead><tbody><tfoot>
十六、BFC
BFC概念和应用场景：
bfc概念：有特殊功能的一个容器（区域）
bfc区域条件：
html
浮动不为none
position:absolute/fixed;
display:inline-block/table-cell/flex/table-caption/inline-flex;
overflow不为visible
区域的特征：
bfc区域的元素参与高度计算
bfc区域互相不会重叠
上下摆放(主要针对块级元素)
bfc区域不会与float box 重叠
计算bfc 的高度时，浮动元素也会参与运算
bfc的使用：
两列布局
三列布局
清除浮动元素高度塌陷
十七、CSS统筹
页面头部优化：
<meta name="Description" content="描述">
<meta name="Keyword" content="关键字">
在head中添加页面关键字和描述
合理的页面结构布局
减少使用flash或者图片地图，文本链接
减少页面的体积，尽量使用公共样式
css重置：
标签有默认样式，通常会样式初始化
具体标签去掉具体样式
命名规则：
尽量小写英文字母，可以包含数字，下划线，连接符，不能以数字开头
见名知意，尽可能简短
超链接优化：
图片优化：
input{outline:none;}去掉选中时 的蓝色边框
十八、盒模型
盒模型的分类：
标准盒模型：
w=width+左右padding+左右border，同理可得h
怪异盒模型
w=width(包含左右padding+左右border)，同理可得h
怪异盒模型的触发方式：
丢失文档申明<!DOCTYPE html>，会在ie678底下触发
添加box-sizing:border-box;也会触发怪异盒模型
十九、H5新增标签
新增语义化标签：
<header></header>头部区域
<section>
<nav>
<a href=""></a>
</nav>导航信息
<article>文章</article>
<aside>文章区域的辅助信息</aside>
</section>内容区域
<footer></footer>底部区域
<figure>
<figcaption>figure的标题</figcapition>
</figure>独立的内容
<embed src="地址" type=""/>用于定义嵌套的内容
<mark></mark>显示文字高亮
<object>
<param name="movie" value="">
</object>
vedio视频:
autoplay:加载完成后，视频自动播放
loop:循环播放，视频播完之后再次继续播放
poster是显示第一帧图片
<video src="" controls(视频播放控件按钮) poster="图片路径"(直到视频开始播放图片才消失)>
<source src="vedio/ogg">
<source src="vedio/Mpeg4">
<source src="vedio/webm">可放多个资源
</video>
audio音频:
<audio src="音频地址" controls autoplay>哈哈哈哈哈哈(浏览器不支持时显示文字)</audio>
<input type="" list="name">
<datalist id="name">
<option value="11">文字</option>(需要利用js来显示文字给用户看)
<option value="11">文字</option>
<option value="11">文字</option>
</datalist>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">10
+<input type="number" id="b" value="50">10
=<output name="x" for="a b"></output>所得到的的的东西进行输出
</form>
<hgroup>对标题标签进行分组</hgroup>
二十、h5新增加的表单元素和表单验证
<input type="email" required(不能为空) multiple(可输入多个邮箱，邮箱之间用逗号隔开)>邮箱输入框
<input type="url">网址输入框
<input type="number" min="" max="" step="指数值加大的累加数的大小">
<input type="range" value="默认滑动条的位置" min="" max="滑动条的最大值" step="" >类似于进度条
<input type="date">年月日，日历，可选择时间
<input type="month">年月
<input type="week">年周
<input type="time">具体时间
<input type="datetime">ie 谷歌 火狐不支持
<input type="datetime-local">获取本地时间
<input type="submit">提交
表单验证属性：
placeholder:
autofocus="true" 一个页面只有一个
required 验证输入不能为空
<form action="" method="" autocomplete="on/off/"类似于输入历史记录">
<input type="text" name="11">
<input type="text" name="11">必须要有Name属性
</form>
maxlength 输入的最大长度
novalidate 针对于一整个表单不需要验证<form>
二十一、CSS3选择器
CSS3选择器:
优雅降级（由大到小），渐进增强（由小到大）
属性选择器：
标签[属性]——选择此类标签并且有该属性的元素
！ 标签[属性="属性值"]——选择此类标签且有该属性名，并且该属性等于此属性值的元素，也不允许有空格之后多余的值
标签[属性~="属性值"]——选择此类标签且有该属性名，并且该属性有包含此属性值的元素，允许有空格隔开
标签[属性^="属性值"]——选择此类标签且有该属性名，并且该元素是以此属性值开头(开头就行)
标签[属性$="属性值"]——选择此类标签且有该属性名，并且该元素是以此属性值结尾(空格或者是结尾的值)
标签[属性*="属性值"]——选择此类标签且有该属性名，并且该元素是包含此属性值，有这个属性值都可
标签[属性|="属性值"]——选择此类标签且有该属性名，并且该元素是此属性值 (一个值)或者是以"属性值-"开头(两个值以上)
伪类选择器：
1.动态伪类
:link{}
:visited{}
:hover{}
:active{}
2.UI元素状态伪类
主要针对表单中的元素使用)
:enable{}
:disabled{}例如：input:disabled{} <input type="text" disabled>
:checked{}
3.结构伪类
不同级元素：
！ :first-child{}选择父级里面的第一个子集元素
！ :last-child{}
:nth-child(n/2n/2n-1){}
:nth-last-child(n/2n/2n-1){}
同级元素：
！ :first-of-type{}选择父级里面的某一类同级元素中的第一个元素
！ :last-of-type{}
！ :nth-of-type(n/2n/2n-1){}
:nth-last-of-type(n/2n/2n-1){}
:only-child{}说明一个父级里面只有一个子集(独生子女)*
:only-of-type{}说明一个父级里面只有一个这类子集元素(有很多小孩，只有一个女孩/男孩)*
:empty{} 选择没有内容（标签）的区域
4.否定选择器：
:not(){} 可以让你定位匹配不选择该元素
5.:root{}选择文档的根元素(html)
6.target选择器:target{}
.box{width:100px;height:100px;display:none;}
.box1{bg:red;}
.box2{bg:yellow;}
:target{dispaly:block;}
<a href="#box1"></a>
<a href="#box2"></a>
<div class="box box1" id="box1"></div>
<div class="box box2" id="box2"></div>
:lang(a){}选中div里面有lang=a的元素
7.伪元素选择器
8.层次选择器
后代选择器 .box .box1(子、孙第一层及第一层之后的)
子元素选择器 .box>.box1(子，第一层)
相邻兄弟选择器 .box+div(选择.box后相邻的下一个兄弟)
通用兄弟选择器 .box~div(选择这个.box之后的所有兄弟选择器)
二十二、浏览器的私有属性前缀
border-radius:50%;圆形
-webkit- 谷歌浏览器
-moz- 火狐
-ms- IE浏览器
-o- 欧朋浏览器
二十三、CSS3新增属性
text-shadow:0px 0px 0px 0px文本阴影
text-shadow:0 0 , 0 0 , 0 0 ;多重阴影用逗号隔开
h-shadow:水平阴影(必须)
v-shadow:垂直阴影(必须)
blur:模糊度
color:阴影颜色;
box阴影(盒子阴影)
box-shadow:0px 0px 0px 0px(阴影的大小) color (inset);
word-break:normal/keep-all(不允许字断开)/break-all(自动换行)
决定自动换行的
word-wrap:break-word;
用来标明是否允许浏览器在单词内部进行断句
@font-face
在线引用：
生成链接，用link标签引入，挑选对应图标，class="iconfont icon-xxx"
background-clip:;指定背景的显示范围，前提是背景平铺。
background-clip:border-box;水平区域开始
background-clip:content-box;内容区域开始
background-clip:padding-box;内边距区域开始
-webkit-text-fill-color:transparent;
-webkit-background-fill:text;达到文本填充背景图（文字的背景是背景图）
background-origin:指定背景图的起始点(就是选一个参考物，然后用背景定位来移动)
border-box；(参考物)
content-box;
padding-box;
结合背景定位background-position
background-size:;指定背景图的尺寸
当只有一个值时，表示水平大小，垂直大小自动缩放
background-size:cover;随时都把整个元素撑满
background-size:contain;只充满一边，另外一边则不管(保证一条边挨着边缘)
简写：background:颜色 地址 no-repeat 0px(左右移动) 0px(上下移动)(前面是移动)/0px(宽) 0px(高)(后面是大小);
border-radius:设置圆角
border-radius:0px;
border-radius:0px 0px;左上右下 右上左下
border-radius:0px左上 0px右上左下 0px右下;
border-radius:0px左上 0px右上 0px右下 0px左下;
border-radius:50%;(或者正方形/长方形宽高的一半)--圆，椭圆
border-radius:0px(x轴)/0px(y轴);以椭圆的形式切边角
border-radius:0px(左上) 0px(右上)/0px(左上垂直) 0px(右上垂直);
border-radius:0px(左上水平) 0px(右上) 0px(左下) 0px(右下)/0px(左上垂直) 0px(右上垂直) 0px(左下垂直) 0px(右下垂直);
transition:0s;过渡时间
border-images:用图片来设置边框
border-images:url("") 0(无单位，水平) 0(垂直) repeat/round/strech;
颜色特性：
background:hsl(0-360色调,0%饱和度,0%亮度);
background:hsla(0-360色调,0%饱和度,0%亮度,0-1透明度);
二十四、盒模型的分类
标准盒模型
border-sizing:content-box;
怪异盒模型：
触发方式：
(1)丢失！doctype html
(2)box-sizing:border-box;
width包含了左右padding和border
height包含了上下padding和border
二十五、Flex容器(父元素)的属性
display:flex;(相当于浮动)
特性：项目的float，clear,vertical-align失效
默认情况下，项目宽度将由内容撑起来，高度与容器一致
默认主轴方向是水平方向，侧轴为垂直方向
1.设置为弹性盒，之后，主轴默认为水平方向
2.子元素(项目)未设置宽高时，宽度由内容撑起来，高度与容器一致
3.项目沿着主轴(默认水平方向)摆放
(添加在容器上)flex-direction(设置主轴方向):row;默认水平方向为主轴
flex-direction:row-reverse;设置反向的水平方向为主轴
flex-direction:column;设置垂直方向为主轴
flex-direction:column-reverse;而反向的垂直方向为主轴
flex-wrap:wrap(换行)/wrap-reverse(反着换行)/nowrap(默认不换行);定义子元素(项目)是否换行
flex-flow:以上两种的简写，默认是row nowrap;
jusitify-content:;定义了项目在主轴上的对齐方式
flex-start:在主轴的开始位置
flex-end:在主轴的结束位置
center:在主轴的中心位置
space-around:在主轴上对称分配(自动分配)
space-between:两端对齐
align-items:;项目(子集)在侧轴上的对齐方式(多行时会有间距)
flex-start：侧轴开始位置对齐
flex-end：侧轴底部位置对齐
center：侧轴中间位置
baseline:项目第一行文字底部对齐
stretch:默认值
align-content:;(多行时间距消失)针对多行项目在侧轴上的对齐方式
space-around:自动分配
space-between:两端对齐
flex-start：侧轴开始位置对齐
flex-end：侧轴底部位置对齐
center：侧轴中间位置
二十六、添加在子元素(项目)上的属性
order:;项目的排列顺序，数值越大，元素越靠后。元素默认为零
flex:(0-1)1;把剩余都给子元素(分配剩余空间)
align-self:;(单个)项目在侧轴上的对齐方式
flex-start：侧轴开始位置对齐
flex-end：侧轴底部位置对齐
center：侧轴中间位置
baseline:项目第一行文字底部对齐
auto 自适应对齐
stretch 默认值
二十七、多列布局
column-count:;分栏的数目
column-width:;分栏的宽度
column-gap:;分栏的间距
column-rule:;分栏的边框
column-span:all/1;合并分栏
二十八、flex的单位换算
px: 具体像素值
%: 相对最近的父级元素
em: 相对最近的父元素的字体大小,默认1em=16px
记住: rem: 是root和em的结合 相对根元素(html)字号大小,你默认1rem=16px
pt: 原生开发用的单位,安卓开发用的多
记住: vw: viewport width 相对于当前视口的宽度默认是满屏100vw
vh: viewport height 相对于当前视口的高度默认是满屏100vh
vmin: viewport min最小
vmax: viewport max最大
vw和rem结合来写移动端
主要使用rem来写所有的数据,vm作为html的font-size的单位用 html{font-size:32vw;}
vw rem 设计图中测量出的px 三者之间的换算
px是已知的
如果设计图是750px,所得的数据/2 = 浏览器最终解析且是满屏的宽度375px,因为满屏是100vw,所以100vw=375px 1vw=3.75px
如果设计图是640px,所得的数据/2 = 浏览器最终解析且是满屏的宽度320px,因为满屏是100vw,所以100vw=320px 1vw=3.2px
rem和px之间的关系 1rem=16px
假设1rem=100px
375px的设计图:
1vw=3.75px 则 1rem=100/3.75=26.666667vw
320的设计图:
1vw=3.2px 则 1rem=100/3.2=31.25vw
总结:375的不精确,则设1rem=120px
1rem=32vw
二十九、css3渐变
css渐变：
线性渐变：默认从上往下渐变
语法：background:linear-gradient(color,color，……)
从左往右：background:-webkit-linear-gradient(left(起点位置，没有兼容前缀时,加上to，表示终点位置),color,color,……)
对角：background:linear-gradient(to left top,color,color，……)
指定角度：background:-webkit-linear-gradient(角度数 正值顺时针，color,color,……)
background:linear-gradient(color %,color %)
渐变区域重复：background:rapeating-linear-gradient(color (%),color (%))
径向渐变：由中心向周围渐变(语法与线性渐变类似)
元素本身是一个正方形时，渐变是圆形，元素是长方形是，渐变成椭圆
background:radial-gradient(color,color)
background:(circle,color,color,……)(无论长方正方，渐变都显示圆形)
径向渐变的尺寸：closest-side,closest-corner等
background:rapeating-radial-gradient()重复渐变,模仿的是background-image
线性渐变和径向渐变都属于css背景属性中的背景图片(background-image)属性
三十、display
三十一、position和过滤器，宽高自适应