新人报道冒个泡不过分mua~
首先声明一下下，这篇文章是我截取我之前学css时候自己做的思维导图，发这篇文章只是为了
那点矿石嘿嘿嘿嘿嘿嘿。看到这篇文章的jym把运气分我一点点，好了，我挖矿去了拜拜！
对了，如果文章有什么错误还请各位大佬指点，我是小白嘻嘻嘻，爱你们么么哒。
一、css引入样式
行内样式
内部样式
外部样式
导入式 @import url("文件地址")，放在<head>下<style>
二、选择器
1、类选择器、多类名选择器
2、id选择器 #
3、通配符选择器 *{..}【页面中所有元素】
4、标签选择器
H5新增语义化标签
header、nav、article[内容标签]、section[某区域]、aside[侧边]、footer
H5新增多媒体标签
1、<video src="文件地址" controls="controls"></video>
2、<audio>同上</..>
5、复合选择器
后代选择器 父 子孙 {..}
子选择器 父 子 {..}
并集选择器
伪类选择器
a:link
a:visited
a:hover
a:active
书写顺序从上到下不可更改
focus伪类选择器
用于选取获得焦点的表单元素
input:focus {..}
6、CSS3 属性选择器
E[att]
E[att = "val"] 选出属性值
E[att^= "val"] 以val开头的属性
E[att$= “val”] 以val结尾的..
E[att* = "val"]带有val的
7、结构伪类选择器
E:first-child
E:last-child
E:nth-child(n) n可为数字、关键字even/odd、公式
E:first-of-type
E:last-of-type
E:nth-of-type(n)
8、伪元素选择器
::before
::after
行内元素不可设置宽高
三、css三大特性
层叠
可定义多个样式且多个样式可层叠，冲突时，就近原则
继承
子继父
优先级
！important > 行内样式1000 > id选择器100 > 类选择器10 > 元素1 > 继承和通配符*0
四、文本样式
字体
字体属性：字体大小size、颜色color、粗细weight、样式style、字体family
简写：font：①style ②weight ③size/line-height ④ family ③④ 不可省略！
文本
文本对齐text-align:
行高line-height
text-decoration:underline(下划线) | overline(下) | line-through(删除线) | none
文本缩进text-indent:20px/2em
垂直方式vertical-align：baseline、middle、bottom.......
其他
1、word-spacing:单词之间的间距
2、letter-spacing:设置元素内字母的间距
3、text-transform:设置元素内文本大小写
4、文字阴影text-shadow:水平 垂直 模糊距离 颜色
五、盒子模型
边框border:[宽度] [样式] [颜色]
内边距padding:顺时针
如果盒子本身没有指定宽高，则不会撑开盒子
外边距margin
display属性
实现元素的转换和元素的显示或隐藏
注意：设置行内元素是没有上下外边框的，只有左右外边距
隐藏元素不再占有原来的位置
圆角边框border-radius:length顺时针
盒子阴影box-shadow:水平 垂直 模糊距离 阴影尺寸 外部阴影改内部阴影【前两个必写】
css3盒子模型
box-sizing:content-box 盒子大小：width+padding+border
box-sizing:border-box 盒子大小：width
六、css背景及列表
颜色、图片、是否平铺repeat，图片位置Position、固定/滚动attachment：fixed/scroll
复合写法：background:颜色 图片地址 平铺 图像固定/滚动 图片位置;
背景半透明background:rgba(0,0,0.3)
七、浮动
基本语法略
清除浮动：clear:left|right|both 方法
隔墙法：末尾加一个空标签[块级元素]
父级添加overflow:hidden[隐藏超出部分] | visible[不剪切也不添加滚动条] | scroll[显示滚动条] | auto[超出才显示滚动条]
:after伪元素法 见笔记
双伪元素 见笔记
八、定位
定位方式
1、static
2、relative:不脱标保留原来的位置
3、absolute:相对于有定位的且最近一级的祖先元素 脱标！绝对定位的盒子不能通过margin:auto来居中！方法：left:50% => margin-left:-盒子自身宽度的一半
4、fixed:脱标
5、sticky
边偏移:top、bottom、left、right
Z-index:数值 盒子出现重叠时,控制盒子前后次序,数值越大越靠上
九、css3
滤镜filter:模糊距离
css过渡transition：一个状态到另一个状态。
transition:要过渡的属性[默认ease逐慢] 花费时间 运动曲线 何时开始
2D转换
移动transform 对行内标签没有效果！
旋转rotate(度数)
缩放scale
3D转换
位移translate3d(x,y,z)
旋转rotate3d(x,y,z)
透视perspective；xxpx 写在被观察元素的父盒子上
3d呈现transform-style:flat[子元素不开启3d空间] | perserve[开启] 代码写给父，但影响子盒子
动画：animation
视口:显示内容的区域
布局视口layout viewport
视觉视口visual viewport
理想视口ideal viewport
二倍图
提高图片质量，解决模糊问题
