敲黑板，划重点，高频考点！前端css精简概要
作用：美化页面
样式放置位置
标签内：style属性
文件head内：style标签放置于head标签中
link引用：link标签 + rel属性指明引用类型 + href属性指明文件地址
样式优先级：标签内>文件head内>link引用
css选择器
- 标签名{}：标签选择器
- #id_name{}：id选择器， id不能重复
- .class_name{}：class选择器， class是可以重复的，选择一类class进行样式渲染
- .class_name div .class_name2（使用空格间隔）：层级选择
- .class_name,#id_name（使用逗号间隔）：同级组合选择
css基本样式
- color字体颜色
- background-color背景颜色：#ddd（RGB可以在网上搜索对应表格）/red
- background-position背景图片位置：80px 90px
- background-repeat是否重复填充：no-repeat
- height高度 150px像素，没有占比x%这种说法
- width宽度 150px 或者 相对于父类标签占比100%
- float使块级元素在同一行
- border/border-left/border-top/border-buttom
- display：none全部隐藏（可以用作模态对话框，菜单得收拢显示）；inline块级变内联；block内联变块级；inline-block（width+height在内联标签中不生效）同时具有内联块级标签属，默认会有3px移动，使用float属性则可以消除；
- visibility：只隐藏内容
- cursor鼠标形态：pointer/help/wait
- opacity透明度==background-coloe:rgba(0,0,0,.6)：0.4
- list-style-type去除li元素的前缀
- text-align文本内容在标签中水平居中：center
- line-height == 样式标签的height
边距
内边距padding（属于该样式，本身会改变）：20px 0 0 0，遵循上右下左设置
外边距margin/margin-top/margin-left（不属于该样式，本身不改变）：20px
body加样式margin = 0去除边框
悬浮 float
需要有宽度限制
，将块级元素可以并列排放
子标签使用了 float 需要加上 + 最后一个子标签包含样式clear:both 属性，否则子块将无法显示
position
- 默认relative + absolute结合使用：父类使用position:relative + 子类使用position:absolute;bottom:0;right:0（寻找最近的用position:relativ的父类）
- fixed相对浏览器窗口固定：组合位置参数top:0/right:100px使用
- absolute相对页面固定
- z-index：数量越大，越靠上
Tips：
- 调试可以先在浏览器中调试，再copy到代码中
- img{border:0}设置之后img标签将不会再IE中又边框