样式
单位
* px像素 ,一个像素就相当于我们屏幕中的一个小点， 显示效果越好越清晰，像素就越小，反之像素越大。
* 百分比 % 根据其父元素的样式来计算该值
* em 相对于当前元素的字体大小来计算的 1em = 1font-size 当设置字体相关的样式时，经常会使用em
* vh 100vh 在大部分情况下都没啥问题，只是需要注意在有些移动浏览器内的应用，他的地址栏有时显示，有时隐藏，所以100vh 可能会造成一些疑惑，这些浏览器没有将 100vh 的高度调整为视口可见高度，所以如果运行到这种移动浏览器呢，遇到 底部被遮盖的问题，知道是什么原因引起的就行，不过在小程序里是没有这种问题，使用 uni-app 开发，需要兼容多端的时候，就得注意了
行内元素不能设置 宽高 垂直margin 可以设置 padding border margin-left
visibility和display
visibility:hidden后还是会占据位置 display:none 完全消失
overflow
visible不处理 hidden隐藏溢出内容 auto自动 scroll添加滚动条无论溢出不溢出
width
默认值auto auto不等于100%
height
默认值auto : 根据元素自身内容自动调节高度
100% 继承父元素的100%高度
max-width和min-width
width大于max-width 最终为max-width的值
width小于min-width 最终为min-width的值
任何时刻(不论书写顺序)，只要某元素的min-width的值比当前的max-width和width大，那么该元素的高度就被设定为min-height的值。(min-height max-height同理)
margin
margin- left right top bottom 百分比参照的都是父级元素的内容区域 宽度
默认值 0
正常的块盒子 margin:auto = margin:0 auto 绝对定位盒子 = margin: auto auto
padding
padding- left right top bottom 百分比参照的都是父级元素的内容区域 宽度
默认值为0
background
background-color: #bfa, transparent全黑色透明背景;
background-image:url(img/1.png) | none;
background-repeat: repeat(默认) no-repeat repeat-x repeat-y;
background-position: top left center bottom right -100px -50px ;通常指定两个坐标确定位置 (百分比值参照于 背景图大小减去元素的大小 )
background-attachment: scroll(默认)跟着滚动条滚动 fixed背景固定不动;
background: 简写方式 不分顺序 以空格隔开
CSS3背景
background-origin：设置背景渲染的起始位置 border-box padding-box(默认) content-box
background-clip：设置裁剪的起始位置 border-box(默认) padding-box content-box
-webkit-background-clip:text 从文字区域裁剪 webkit才有
background-size : length | 百分比(参照于 origin设置的区域) | cover背景等比缩放填满容器 | contain将背景图片等比缩放至某一边紧贴容器边缘为止，要么宽度100%，要么高度100%
CSS3 简写顺序background:color position size repeat origin clip attachment image
list
list-style-type:none| 无序列表(disc实心圆,circle空心圆,square实心方块) |有序列表(大小写英文 ,大小写罗马数字 ,从1开始的数字)
list-style-image:url() | none 会覆盖type的设置
list-style-position: inside | outside
list-style 简写 不分顺序 空格隔开
CSS3
opacity
不是可继承属性但是会影响子元素透明度， IE8以下不支持 以filter：alpha（opacity=值）代替
rgba()函数
filter滤镜
设置元素的 模糊和饱和度
blur(10px)值越大越模糊
grayscale(100%) 百分百灰度
alpha(opacity=值)
-webkit-text-stroke 文字描边只有webkit内核才有 :pink 4px
-webkit-box-reflect : left 10px 设置盒子的倒影
direction文字排版: ltr rtl (left to right) 配合unicode-bidi:bidi-override;才有效
resize
none 不允许用户调整大小
both 允许水平 垂直方向调整
horizontal允许水平方向
vertical 允许垂直方向
overflow:auto 除textarea外的盒子 允许用户调整时 必须设置
box-shadow 盒模型阴影 IE9以上
[inset'阴影在盒子内部'] 可选值
10px ' offset-x '
10px ' offset-y '
5px ' blur-shadow阴影层度 '
[10px ' 阴影大小 不设置默认跟盒子一样大 ']可选值
black 阴影颜色
box-sizing : border-box padding-box content-box
border-radius
上右下左, 实际上是画了一个圆 或者椭圆往四个角上怼得到的形状
在ios5和Android (webkit532)之前不支持百分比 移动端尽量使用 px值
/*兼容性问题,不同浏览器有不同内核来渲染*/
-webkit-border-radius: 50%;/*chrome*/
-moz-border-radius: 50%;/*firefox*/
-ms-border-radius: 50%;/*IE*/
-o-border-radius: 50%;/*opera*/
border-radius: 50%;/*浏览器识别到最后一个就可以把前面覆盖*/
