# CSS 层叠样式表
### CSS的使用方式
* 在元素的style属性内 行内式 内联式
* 写在 `<style>` 标签内
* 写到外部css文件中，用`<link>`关联到HTML中，
* `@import`可以引入css，用于css中引入css
### CSS的格式
选择器{
属性:值;
属性:值;
}
### CSS的长度单位
* px 像素
* em 相对于默认大小 倍数
* 百分比
* pt(磅) cm(厘米) mm(毫米) 绝对单位
### 颜色表示
* 颜色的英文单词
red orange yellow green cyan blue purple black white pink gray
* rgb方式
rgb(123,45,178)
rgb(0~255,0~255,0~255)
rgb(百分比，百分比，百分比)
* rbg(255,0,0) 红色
* rbg(255,255,255) 白色
* rgb(0,0,0) 黑色
* rgb(100,100,100) 灰色。 只要三个都一样，就是灰色
* 十六进制
* #34afa1
* #ff0000 红色 可以简写 #f00
* #00ff00 绿色 简写 #0f0
* #0000ff 蓝色 简写 #00f
* #ffffff 白色 简写 #fff
* #000000 黑色 简写 #000
* #cccccc 灰色 简写 #ccc
* #336699 简写 #369
### CSS注释
* `/* 注释 */`
### CSS选择器
* 元素选择器
* ID选择器 #id名
* CLASS选择器 .类名
* 全局选择器 *
* 关联选择器-后代元素选择器 slecter selecter
* 关联选择器-子元素选择器 selecter>selecter
* 组合选择器 两种基本选择器的组合
* 伪类选择器 love-hate
* :link
* :visited
* :hover
* :active
### 选择器的优先级
* ID >CLASS > Tag
* 组合选择器 ID权重100 class权重10 Tag权重1
# CSS的属性
### 字体属性
* font-family 衬线字体（serif） 非衬线字体(sans-serif)
* font-style 字体风格 normal(默认)/itailc(斜体)/oblique(强制变斜)
* font-weight 字体粗度 normal(默认)/bold(加粗)/bodler(更粗)/lighter(细)/数字(>=600 粗)
* font-variant 字变形 noraml(默认)/small-caps(小型大写字母)
* font-size 字体大小
* font 统一设置
font:[style/weight/variant] size family
### 颜色属性
* color 值：字母/rgb/16进制
### 文本属性
* letter-spacing 字母间距
* word-spacing 单词间距
* text-decoration 文本能修饰
* none
* underline 下划线
* overline 上划线
* line-through 中划线 删除线
### CSS颜色属性
* color# CSS的属性
### CSS字体属性
* font-family sans-serif/serif
* font-size
* font-weight normal/bold/bolder/lighter/数字
* font-style normal/italic/oblique
* font-variant: normal/small-caps
* font `font:[weight/style/variant] size family`
### CSS文本属性
* letter-spacing 字母间距 默认0px
* word-spacing 单词间距 默认 0px
* text-decoration 值： none/underline/overline/line-through
* text-align 水平对齐方式 left(默认)/right/center
* vertical-align 垂直对齐（基于文字的基线） baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
* text-indent 首行缩进 长度单位
* line-height: 行高 长度单位 设置行高=高 使一行文字垂直居中
* `font:[style/variant/weight] size/line-height family`
### CSS背景属性
* background-color 背景颜色
* background-iamge 背景图片 url()
* background-repeat 背景图片的平铺方式 repeat(默认)/repeat-x/repeat-y/no-repeat
* background-postion 背景图片定位 left/center/right/长度单位 top/center/bottom/长度单位
* background-attachment 背景图片固定或滚动 scroll(默认)/fixed
* `background:color image repeat postion`
### CSS边框属性
* border-width 边框线的宽度 长度单位
* border-color
* border-style 边框线的风格 solid/dotted/dashed/double...
* border `border:width style color`
* border-left/right/top/bottom
### CSS鼠标光标属性
* cursor 值 default/pointer/move/crosshair/text/wait
### CSS列表属性
* list-style-type 列表项的图形 disc/circle/square/decimal/lower-roman/upper-roman ....
* list-style-postion 列表项图形的位置 outside/inside
* list-style-iamge 自定义列表图形 url
* 最常见的设置 `list-style:none`
### CSS表格属性
* table-layout 表格布局方式 auto/fixed
* border-collapse 合并单元格边框 separate/collapse
* border-spacing 单元格间距 长度单位
* caption-side 表格标题位置 top/bottom
* empty-cells 没有内容的单元格是否隐藏 show/hide
### CSS sprites css精灵图
# DIV+CSS布局
### 行内元素和块状元素呢
* 块状元素独占一行， 行内元素可以共用一行
* 默认宽度： 块状元素默认宽度由父元素决定 行内元素默认宽度右内容决定
* 块状元素可以设置宽高， 行内元素不可以设置宽高
* 大部分块状元素内部可以嵌套块状或行内， 大部分行内只能嵌套行内
* 外边距，块状没问题，行内只能设置左右
# 盒子模型
### 盒子
### 盒子关系（标准文档流）
* 行内元素。 只可以设置左右外边距。 上下内边距会影响相邻的圆
* 块状元素呢 垂直margin会合并(margin坍陷)
* 元素嵌套的时候，设置子元素的上margin会被父元素抢走， 解决方案：设置父元素border或者父元素设置overflow
### 属性的继承问题
* 文本类、字体、颜色 子元素会继承父元素的设置
* 布局类，边距、大小、边框、背景 不会继承
# 定位
### 相对定位
* 相对于自身原先的位置
### 绝对定位
* 相对于第一个定位的祖先元素，知道HTML
### 固定定位
* 相对于屏幕
# 布局相关属性
### 尺寸
* width
* max-width
* min-width
* height
* max-hegiht
* min-height
### 内边距 补白 内补白
* padding
* padding-left
* padding-right
* padding-top
* padding-bottom
### 外边距 边距 外补白
* margin
* margin-left
* margin-right
* margin-top
* margin-bottom
### 布局相关属性
* display none/block/inline/inline-block
* visibility hidden/visible/collapse
* overflow visible/hidden/auto/scroll
* overflow-x
* overflow-y
* float: left/right
* clear: 清除浮动对后面的元素的影响 both/left/right
### 定位属性
* position static(默认值)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)
* left
* right
* top
* bottom
* z-index 显示优先级。 只能设置给已经定位的元素
08.02
# CSS3 私有前缀
* -webkit- chrome/safari等webkit内核浏览器
* -moz- firfox
* -o- opera
* -ms- IE
# CSS3 盒子模型
* box-sizing 值 content-box 默认值 包括所有的值 /
border-box 只算边框的长与宽
* resize（调节框的大小） 一个框右下角有一个三角可以拉大
* 值 none不允许 / horizontal调节宽度 / vertical调节高度 / both都可以
* outline轮廓边框 `outline:width style color`
* outline-width
* outline-color
* outline-style 值 同border-style solid / dotted / dashed ...
* outline-offset 是以border边界作为参考点的，从0开始，正值从border边界往外延，负值从border边界往里缩。
* display: list-item： 指定对象为列表项目
* table-row： 指定对象作为表格行。类同于html标签<tr>
# CSS3 长度单位
### 绝对单位
* em
* mm
* pt
* rem
* p
* pc
* q
### 相对单位
* px
* em
* ex 默认字体大小一半
* rem 相对于根元素字体大小 的倍数
* vw 相对于视口的宽度。视口被均分为100单位的
* vh 相对于视口的高度。视口被均分为100单位的
* vmax
* vmin
# CSS3 颜色
### 设置半透明
* opacity 0~1之间的小数，不透明度，值越大，越不透明
.box01{
opacity:.5;
filter:alpha(opacity=50);
background-color:rgba(0,0,0,.5);
}
针对i8系统
opacity 效果是字体跟文字全部变透明
rbga 就背景变透明
### 颜色值
* hex 16进制
* colorname
* rgb
* rgba
* hsl
* hsla
* transparent
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
CSS3 渐变
### 线性渐变
* linear-gradient(方向, 色标1 色标1位置, 色标2, 色标2位置)
* `linear-gradient(to right, red 10px, purple 100px)`
* 方向： to left /to top /to right/to bottom / angle (0-360deg度)
### 径向渐变
* radial-gradient(形状 半径 at 圆心, 色标 色标位置, 色标, 色标位置)
* 形状： ellipse / circle
* 半径： length， 百分比，closest-corner/closest-side/farthest-side/farthest-corner
* 位置 left/center/right top/center/bottom, 像素
08.03
#CSS3 选择器
### 基础选择器
* 通配符/全局选择器 *
* ID选择器 #Id
* class选择器 .classname
* 元素选择器 tagName
* 群组选择器 slecter,selecter 一起选
### 层次选择器
* 后代选择器 selecter selecter
* 子元素选择器 selcter>selecter 只能是子元素 孙元素不算
* 相邻兄弟选择器 selecter+selecter 就下面的一个
* 通配兄弟选择器 selecter~selecter 下面的全部
### 属性选择器
* selecter[attr] 包含attr属性的元素
* selecter[attr=val] arrt属性值是val的元素
* seldcter[attr^=val] attr属性值是以val开头的元素
* selecter[attr$=val] attr属性值是以val结束的元素呢
* selecter[attr~=val] attr属性值val 或 包含val（两个值以空格隔开，其中一个是val) 所有的都算
* selecter[*=val] attr属性值中包含val的元素 只要有这个字母就可以
* selecter[|=val] attr属性值是val或值是 val=* 要么就img 或者img-pp
### 伪类选择器
* 动态伪类选择器
* :hover
* :link
* :visited
* :active
* :focus 焦点 input输入框
* 目标伪类选择器
* :target 鼠标点到上面的盒子对应的数字时相应的变化
* 语言伪类选择器
* :lang()en zh gr
* UI元素伪类选择器
* :enabled 能用默认
* :diabled
* checked 匹配元素
* 结构伪类选择器
* :root 根元素选择器
* :first-child
* :last-child
* nth-child(n)
* nth-last-child(n) 倒数开始
* only-child 只有一个子元素的
* first-of-type
* last-of-type
* nth-of-type()
* nth-last-of-type()
* only-of-type()
* empty 匹配空的元素(不能有子元素也不能有内容)
* 否定伪类选择器
* not(selecter)除了符合要求的其他都选中
### 伪元素选择器 双冒号兼容
* :first-letter / ::first-letter 第一个字母 /* 为某个元素的第一行文字使用样式。 */
* :first-line / ::first-line 第一行
* : before / ::before /* 在某个元素之前插入一些内容。 */
* : after / ::after
* ::placeholder 兼容性差
* ::selection 兼容性差
# CSS新增边框属性
### 圆角
* border-radius 左上 右上 右下 左下
* border-top-left-radius
* border-top-right-radius
* border-bottom-left-radius
* border-bottom-right-radius
### 盒子阴影
* box-shadow
box-shadow:5px 5px
box-shadow:5px 5px #ccc
box-shadow:5px 5px 10px #ccc
box-shadow:left top blur offset color inside , ....
水平 垂直 模糊值 阴影往外延伸 颜色 inside/outside阴影是往内还是往外
作业延伸：
collapse:collapse 表格之间没有空隙
table-layout:fixed 平分表格
background-position：100% 0px；图片定位
08.04
### 边框图片
* border-image-source 图片地址 url
* border-image-slice 图片截取方式 值 浮点数/百分比
* border-iamge-width 边框图片厚度 值 长度单位
* border-image-outset 外延 值 长度单位
* borde-image-repeat 延伸方式 值 stretch/repeat/round/space
* border-image
border-image:source slice/width/outset repeat
### 盒子倒影
* box-reflect
-webkit-box-reflect:direction简单的图片倒影 offset 图片与倒影间隔 遮罩
direction: above倒影在图片的上边/below下边/left/right
offset:长度单位 可以负值
遮罩：url/渐变
-webkit-box-reflect:below 3px linear-gradient(180deg, transparent, #fff);
# CSS3 背景属性
### 新增属性
* background-origin padding-box（从padding区域（含padding）开始显示背景图像。）
背景图像开始的点 border-box（从border区域（含border）开始显示背景图像。）
content-box（从content区域开始显示背景图像。 ）
* background-clip border-box/padding-box/content-box/text
背景图像向外裁剪的方向
-webkit-background-clip:text遮罩效果 图片在字里面
* background-size cover/contain/length length 图片大小宽度和高度 或者百分比 两个百分比
### 多重背景
# CSS文本属性
### 文本阴影
* text-shadow
text-shadow:offset_left offset_right blur color 水平阴影 垂直阴影 模糊值 阴影颜色
### 文本换行
* word-wrap 值 noraml（允许内容顶开或溢出指定的容器边界。）
break-word CSS改为 overflow-wrap 内容将在边界内换行。如果需要，单词内部允许断行。
* word-break 值 normal（依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。）
keep-all 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
break-all 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。
* white-space 值 normal： 默认处理方式。
pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。 noraml/pre/nowrap/pre-wrap/pre-line
### 文本溢出
* text-overflow 值 clip/ellipsis 概述要生效 必须设置overflow不是visible值， 并且设置 white-space为nowrap
### 文字修饰
* text-decoation
* text-decoraion-line 种类 none/underline/overline/line-through
* text-decoration-style solid/dotted/double/dashed/wavy
* text-decoration-color
* text-decoration-skip 对象中的文本装饰线条必须略过内容中的哪些部分
* text-decoration-position ？检索或设置对象中的下划线的位置。 对应的脚本特性为textUnderlinePosition。
### 文字描边 只有webkit内核的Safari和Chrome支持
* -webkit-text-fill-color 颜色值
* -webkit-text-stroke 复合属性。设置或检索对象中的文字的描边。厚度 颜色
* -webkit-text-stroke-width 厚度
* -weibkit-text-stroke-color 颜色
### 其他属性
* text-transform 值 none： 无转换
capitalize： 将每个单词的第一个字母转换成大写
uppercase： 将每个单词转换成大写
lowercase： 将每个单词转换成小写
* tab-size 设置对象中的制表符的长度 必须把white-space(设置或检索对象内空格的处理方式) 设置为 pre/pre-wrap/pre-line 才生效 值 长度单位 规定制表符 长度
* text-align start 内容对齐开始边界/end 内容对齐结束边界
* text-align-last 只设置最后一行 值 同text-align
08.07
# CSS3 变形/变换
### 相关属性
* transform
* transform-origin 起点 等同于center center
* transform-style: flat/preserve-3d
指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
对应的脚本特性为transformStyle。
flat：
指定子元素位于此元素所在平面内
preserve-3d：
指定子元素定位在三维空间内
* perspective: 长度单位 观察者距离
* perspective-origin 观察者起点
* backface-visibialbe: visible/hidden 背面是否可见 在3d里可用
### 变形方法 transform-function
* 2d
* translate() 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
* translatex()
* translatey()
* 3d rotate() 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义 中心点开始从左往右
* scale() 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
* scalex()
* scaley()
*
* skew() 指定对象skew transformation（扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
* skewx() x坐标系不动
* skewy() y坐标系不动
3d效果
* translatez()
* translate3d()指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
* scalez()
* scale3d()
* rotatex()
* rotatey()
* rotatez()
3d效果
* translatez()
* translate3d()指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
* scalez()
* scale3d()
* rotatex()
* rotatey()
* rotatez()
### 触发时机
* 伪类选择器
* JS
* 媒体查询
### 可以过渡的属性
* 长度
* 颜色
* 变换
# CSS3 动画
### 相关属性
* animation
<' animation-name '>检索或设置对象所应用的动画名称
<' animation-duration '>：检索或设置对象动画的持续时间
<' animation-timing-function '>：检索或设置对象动画的过渡类型
<' animation-delay '>：检索或设置对象动画延迟的时间
<' animation-iteration-count '>：检索或设置对象动画的循环次数
<' animation-direction '>：检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>：检索或设置对象动画时间之外的状态
<' animation-play-state '>：running/pasused 检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式
注意：如果只提供一个<time>参数，则为 <' animation-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义
### 关键帧
#keyframes 动画名称{
form{
}
to{
}
}
animation-direction
normal：
正常方向
reverse：
反方向运行
alternate：
动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：
动画先反运行再正方向运行，并持续交替运行
08.08
# WEB字体
### 语法
@font-face{
font-family:"";命名
src:url() format(turetype) (format是为了帮助浏览器识别字体格式，浏览器不会根据后缀名去自动识别字体格式的 引用名称类似别名 因为不是所有格式都被浏览器识别所以不识别的时候加上备用引用名称)
....
}
### 兼容性写法
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9+ */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('diyfont.woff') format('woff'), /* chrome、firefox */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
### 字体格式
* ttf
* eot
* woff
* svg
### 工具
* 有字库 https://www.youziku.com/ 常用款 复制一个名字+一个链接
* 阿里web字体 http://www.iconfont.cn/webfont/#!/webfont/index
* 字体在线转换
### 字体图标
* 阿里图标
* Font Amsome 常用款
# 多列布局
### 相关属性
* columns 后面直接加数字：列
* column-width
* column-count
多列中加入图片 <figure>
<img src="../../dist/images/2.jpg" width="100%" alt="">
</figure>
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）
* column-gap 0px 列间隙/normal
* column-rule 列之间的边框线
<' column-rule-width '>： 设置或检索对象的列与列之间的边框厚度。
<' column-rule-style '>： 设置或检索对象的列与列之间的边框样式。
<' column-rule-color '>： 设置或检索对象的列与列之间的边框颜色。
column-rule:1px solid #ccc;
* column-fill none/balance 列高度
* column-span none/all 横跨所有列
* column-break-before 设置项目前面是否断行 auto/always/avoid
* column-break-after 设置项目后面是否断行 auto/always/avoid
* column-break-inside 设置项目内部是否断行 auto/avoid
auto： 既不强迫也不禁止在元素之前断行并产生新列
always： 总是在元素之前断行并产生新列
avoid： 避免在元素之前断行并产生新列
# 伸缩盒（弹性盒模型）
### 概念
### 相关属性
* 把元素设置为伸缩容器
display:flex 竖的变横
display:inline-flex 两列变两行
* 设置伸缩流方向（主轴）
flex-direction:row 正反向一行/column反方向一行/row-reverse正方向一列/column-reverse反方向一列
* 设置换行（侧轴）伸缩换行
flex-wrap:nowrap默认/wrap自动换行/wrap-reverse先下面一行
* 伸缩流方向和换行的复合属性 flex-flow
* 主轴方向对齐
jusitify-content: flex-start整体在前/flex-end/center/space-between空 box 空 box/ space-around box 空 box 空
* 侧轴方向对齐 (强)
align-content: strecth/flex-start/flext-end/center/space-between/space-around
stretch： 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
* 侧轴方向对齐 （弱）
align-items:flex-start/flex-end/center/baseline/stretch /*设置给 伸缩容器*/
baseline： 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch： 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
align-self: auto/flext-start/flex-end/baseline/strect /*设置给伸缩项目*/
* 盒子伸缩盒放大 比率
* flex-grow 放大比率 .1
* flex-shrink 收缩比率 剩下的留白处分.1
* flex-basis 基准
<length>： 用长度值来定义宽度。不允许负值
<percentage>： 用百分比来定义宽度。不允许负值
auto： 无特定宽度值，取决于其它属性值
content： 基于内容自动计算宽度
always： 总是在元素之前断行并产生新列
avoid： 避免在元素之前断行并产生新列
复合属性：flex：
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
08.09
伸缩盒适合手机
# 响应式设计
### 响应式设计的概念（三要素）
* 流体网格
* 响应式图片
* 媒体查询
### 相关概念
* 分辨率
* 像素密度 dpi/ppi 每平方英寸的像素数
* 设备像素比 dip/dpr
# viewport
### 定义
* 可视区域
* 移动端： 布局视口(大部分980px) /理想视口（视口宽度=设备宽度）
### 设置
<meta name="viewport" content="width=device-width,initial-scale=1.0">
### 设置选项
* width 视口宽度 通常设置为 device-width
* height 视口高度
* initical-calse 初始化缩放比例
* maximun-scale 最大缩放比例
* minmun-scale 最小缩放比例
* user-scaleable: yes/no 是否允许用户缩放
# 媒体查询
### 媒体类型
* screen 屏幕
* print 打印
* .....
满足条件是触发
写在后面的会覆盖前面的 css的规矩
### 媒体特性
* width 视口宽度
* max-width 最大视口宽度 视口宽度<=某个值
* min-widht 最小视口宽度 视口宽度>=某个值
* height 视口高度
* max-height 最大视口高度
* min-height 最小视口高度
* device-width 设备宽度
* max-device-width 最大设备宽度
* min-device-width 最小设备宽度
* device-height 设备高度
* max-device-height 最大设备高度
* min-device-height 最小设备高度
* aspect-ratio 视口宽高比
* min-aspect-ratio
* max-aspect-ratio
* device-aspect-ratio 设备宽高比
* max-device-aspect-ratio
* min-device-aspect-ratio
* orientation: landscape(水平)/portrait(垂直方向)
@media（orientation：landspace）
* resolution 屏幕像素比 单位 dppx
* max-resolution
* min-resolution
### 媒体查询 用法
@media () {
}
* and 并且
* , 或者
* only 只有 加与不加一个效果 只能用类型
* not 否定 只能用类型
# 断点
* <= 480px 手机 小屏幕
* >480px 并且 <= 800px 平板 中等屏幕
* >800px <= 1400px PC 大屏幕
* >= 1400px 超大屏幕
响应式图片
给img的宽度 设置为100%
使用background-image 配合padding-top
使用 `<picture>` 标签。
* 使用 pricturefill.js 插件
<link rel="stylesheet" href="./grid.css"> stylesheet样式表