一些很实用的CSS小技巧
1.在实际生产中，我们对于icon的使用。都是通过一张雪碧图来完成开发的。
.logo {background:url no-repeat -x -y}
原理很简单。其实就是通过对雪碧图的定位和background的属性，减少img的使用。其中的XY是通过对整张图片图标的定位来完成的。
2.对于底边线问题：虽然通过border-bottom属性可以对其进行一个添加。但是当你做一个表单元素的时候，你想完全去掉基本样式，通过外加一个BOX可以达到这个目的。
用一个box包裹目标box.使它们的height的值相同。给外面的box加border-bottom属性。
3.对于元素消失的积累：
（1）opacity：0~1；
（2）display：none；
4.常用的伪类选择器
：hover
：active
：last- child
：first-child
5.块状转内联
1.在父级元素中加 ：float：left/right；
2.display：inline；//此元素会被定义成内联元素，不换行。
在这里我提出了一个问题：就是对于使用inline-block和inherit的区别。
inline-block：行内块元素；inherit: 规定从父元素继承display的值。
题外话：使用inherit的场景不仅仅是使用display。heigh：inherit;//继承父元素高度
6.居中方式：
水平居中：
1.box设置：text-align:center;
效果：box内子元素字体，图片水平居中
2.img设置居中：margin： 0 auto；display：block；//次元素被显示为块级元素前后有换行符
margin: 0 auto;是针对块级元素做水平居中效果，所以需要转化成块级：block；
垂直居中
1.img {position:relative;top:50%;left:50%;margin-top: 负图片高度的一半；margin-left：负图片宽度的一半；
2.图片用padding。用box的height减img的height再除以2就是padding-top的值。也可以设置margin：前面算的值 auto；
7.input输入框提示内容修改：;
8.在实际项目中z-index，会经常使用。这是一个很魔幻的元素。可以确定层级。谁在谁前面的问题。
但是要注意，要使用z-index,就必须使用position属性。其实，如果之前你没有使用position属性，也不必担心使用了position属性会给你的布局带来灾难性的破坏。
position：relative;
z-index:-1(最小) //数字越大越上层
9. 下次要在HTML中加入多而且重复的元素。请尽可能的使用innerHTML，而对于要使用特定样式，尽量避免使用内联样式。转而使用添加class的方式来添加。
10. CSS选择器总结
基本选择器
层次选择器
滤镜选择器
其中：
基本选择器：#myId element .myclass * (可使用逗号隔开的方式来使不同选择器使用同一种样式)
层次选择器：
elementParent elementChild
elementParent>elementChild
prev + next
prev~sibling
滤镜选择器：
:focus
:first-child
:last-child
:first
:last
属性选择器
[name~= 'value']
[name = 'value']
[name |= 'value']
[name]
控件选择器
：checked
: selected
: disable
: enable
:hidden //包括type = ‘hidden’ 以及 display ：none；
：visble //包括visibility :hiddenh和opacity： 0同样为可见。
：input
：button
：checkbox
：file
: password
: radio
: reset
: submit
: text
11.表单外框，可以用border属性重设，意味着可以取消外边框显示（border：none;）
一些重要的JS记忆点
1.DOM节点和方法
节点：
nodeName
nodeValue
nodeType
firstChild
lastChild
childNodes
方法：
previousSibling()
nextSibling()
hasChildNode()
appendChild()
removeChild()
replaceChild()
insertBefore()
//nodeType常用值：1 元素节点 2 属性节点 3 文本节点 4 注释节点
搭配使用：
addEventListener()
removeEventListener()
getAttribute()
setAttribute()
creatElement(tagname)
creatTextNode(text)
2.事件合集
click
contextmenu
dblclick
mousedown
mouseenter
mouseleave
mousemove
mouseover
mouseout
mouseup
3.jq 和原生JS
JQ:
$(document).ready(function(){});//多个不冲突，可以重复使用
原生JS：
window。onload = function(){};//不可以重复使用，多个出现只用最后一个有用
最后一些心得：到了这个新的环境，先要明白这里的规则，然后在规则里拿最好的东西，但是要明白规则不是绝对的。有些时候可以跳出规则。
开发方面，现在还是不熟悉整个开发流程。但是需要拿出一部分的时间来熟悉官方框架，不然在调试和开发过程我又要熟悉一段时间。另外，好好学英语。
