css基础篇
marginboxborderpaddingbackgroundfont字体图标css精灵css滤镜继承关系direction鼠标指针样式怪异盒子模型(box-sizing为border-box)
margin
当两个div并行，中间都有margin时，值取较大的当两个div嵌套，随便设置哪个哪个div的margin，会一起移动，并且值取较大值 解决一起移动方法：1、给父元素加上边框，2、给父元素加上paddingmargin:auto：只会左右居中margin-left:auto：会跑右边去，margin-right:auto：不变
box
box-sizing:content-box ：默认的，可视宽度为border+padding+content，width仅为content宽度box-sizing:border-box ：怪异盒子模型，可视宽度为border+padding+content，width为border内所有宽度box-shadow：五个值，依次是x轴偏移量，y轴偏移量，模糊半径，扩散半径，颜色。inset：可加在最前面表示阴影向内。可用逗号分割：数量任意的阴影
border
不同颜色的border，会有斜角：处理斜角，去掉一个斜角改变两边边框宽度重新写border：复合属性，分别为像素，边框形状，颜色（dashed：杠虚线、dotted：点虚线）border-radius：边框弧度。可以用百分比，当弧度特别小时，直接设置为具体像素border-image：css3新增border属性：导入图片处理边框 3.1、border-image-source:url() 引入边框图片 3.2、border-image-slice 图片裁剪位置（默认单位px不用写，也可用百分比） 3.3、border-image-repeat 重复 3.4、border-image-width 图片边框宽度 3.5、border-image-outset 向外扩散
padding
padding 会撑大边框，所以可以配合怪异盒子模型使用
background
background-image:url()------------------------------------背景图片。background-repeat:no-repeat/repeat-x/repeat-y----背景图片是否重复。不重复/沿x轴重复/沿y轴重复background-position-----背景图片位置。两个值分别为x轴，y轴位移( -50px 0/left top/right 30px bottom 30px)background-size-----------------------------------背景图大小。(50%/200px 150px/contain优先填满/cover等比缩放)background-attachment------是否随滚动条移动。fixed：固定悬浮，不随滚动条移动，scroll：跟着滚动条滚动background-------复合属性。背景图位置/背景图大小（需要以/分割，且背景图位置在前），其他属性随意顺序css3新增background-origin：背景图的起源（border-box：背景从border开始；padding-box：背景从padding开始，content-box：背景从content开始。以上三种：重复时，边框及其中都要重复，只是起点变了）css3新增background-clip：背景图的切割（content-box：背景图以content切割，padding-box：背景图以padding切割，border-box：背景图以border切割。以上三种：以外不显示，只显示切割中的）
font
font-size 字体大小font-family 字体类型line-height 字体行高font-weight 字体粗细（500/600…）font-style 字体倾斜（italic）color 字体颜色text-align 字体对齐方式text-align-last：justify。用于调整最后一行文字对齐方式text-indent 首行缩进text-decoration 各种辅助线（line-through:删除线； underline:下划线；overline:上划线）text-shadow 文字阴影（四个值，分别是x轴偏移，y轴偏移，阴影模糊程度，阴影颜色）overflow 超出部分（hidden:隐藏；scroll:滚动；visible:显示）word-break 强制换行(break-all)white-space 强制不换行(nowrap)letter-spacing 字间距word-spacing 词间距
字体图标
到字体图标官网www.iconfont.cn，选择想要的图标加入购物车，添加到我的项目下载至本地并解压，解压文件中的iconfont.css文件引入到代码，css引入iconfont.css文件根据需要修改，使用：引入双重类名：.confont加上具体图标类名
css精灵
把多个小图片整理到一张图片上使用时通过移动位置获取想要的具体图片优点：减少请求，节省资源
css滤镜
模糊滤镜 -------------filter: blur(px)曝光滤镜 ------------ filter:brightness(%) 范围0到+&，0是黑色，越大越曝光 filter:drop-shadow 图片阴影，不推荐，浪费。推荐用box-shadow filter:opacity(%) 透明度各种颜色色调 -------加各种颜色的半透明的遮罩（通过定位与透明度结合）
继承关系
只有文字默认有继承关系，其他属性都没有
direction
direction：设置文字方向，rtl：右到左，ltr：左到右 ------- rtl：符号会由右向左，文字依旧从左向右unicode-bidi: bidi-override 强制要求按照direction属性排序（此时direction右到左正常了）
鼠标指针样式
cursor:pointer 小手、default 默认指针、text 文本指针、none 没有指针
怪异盒子模型(box-sizing为border-box)
可视宽度：width值 因为box-sizing默认是content-box，width只包括content宽度 box-sizing值为border-box时，width囊括border内所有宽度(border+padding+content为为可视宽高) 当padding+border>width ? 怪异盒子可视宽度会被撑大，因为padding优先级更大
