position定位总结+元素选择器+重绘+回流/重排

position定位总结
relative 相对定位
absolute 绝对定位：相对于非static定位的第一个父元素进行定位
固定定位：position：fixed
static 默认，静态定位

子绝父相是我们用的最多的，随之的会误gud认为子元素要想定位就必须先在父元素设置相对定位，其实并不是，子绝父相用的最多的情况下就是多个父元素时选择一个设置relative 或者设置absolute，子元素都会根据它绝对定位

还有就是既然是定位，那就可以单独使用，比如说我元素单独使用relative也是可以的，相对定位时如果有父元素他会直接根据父元素进行定位，没父元素也会根据上下文定位。再比如说我元素单独使用absolute 也是可以的，绝对定位时如果有父元素他会直接根据body进行定位，没父元素也会根据body定位。

还有就是发现个有趣的事情，margin:auto会受absolute的影响而失效，但margin不会受relative影响，还是可以实现左右居中（单独使用margin:auto只能实现左右居中）

绝对定位、固定定位脱离文档流 （不会占据位置）（还有就是虽然绝对定位脱离文档流，但它是相对定位，所以默认情况下不会溢出屏幕，溢出屏幕会出现滚动条，而固定定位默认溢出屏幕不会出现滚动条）
相对定位、静态定位不脱离文档流（会占据位置）

clear:both清除只对float有效，对绝对定位、固定定位无效

float和position使用时的一些区别：
浮动和position定位脱离文档流的区别：准确的说，float浮动属于半脱离文档流，1、float浮动跟position一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然按顺序占据上层位置，如果你对所有的元素都设置了浮动，你会看到这几个div并不会重叠，而是会按顺序排列。如果你对元素设置position定位，元素是可以任意重叠的。

float元素和非浮动元素同时存在，只有浮动元素在非浮动元素前时，非浮动元素才会在浮动元素的下面。先浮动，后面的元素才会去占据前面元素浮动留下的文档流。

普通元素和与float浮动元素发生重叠时，除了内容，其边框，背景等都会显示在浮动元素之下。而position定位元素和普通元素重叠时，普通元素会完全显示在定位元素之下。

css中的 visibility属性可以控制html元素的显示和隐藏
visible 元素的默认值，显示状态，
hidden 元素隐藏，不可见

关键的点是，如果使用visibility: hidden；来控制元素的隐藏时，尽管元素已经被隐藏了，但是其依然会占据一定的位置空间，这一点于display属性来控制元素的隐藏和显示是有本质区别的。（display：none属性不会为隐藏的元素保留占据的位置空间）

注意：display:black 和transform、transition搭配使用想产生动画效果时，过渡时间会失效，因为display:black会引起回流，而transform也会引起元素尺寸改变，就也会引起回流，所以就产生冲突，所以就使得transition过渡时间失效（由于display对transition的破坏作用），解决方法最常用的一种设置定时器：
具体解决方法参考这篇文章，有三种方法，原理都是将display的操作和opacity的操作在不同的tick中被执行

//定时器作用是将opacity的操作推迟到下一个tick中处理，从而与display的操作分隔开
 btn2.on('click', function(e) {
     container.css("display","block");
     setTimeout(function(){
        container.css("opacity","1");
     },delay); //delay要大于0
  });

附：具有display:none属性的元素，还是可以用js语句获取到该元素的，虽然不显示在页面上，但在dom中依然存在

什么是回流/重排(reflow)？
当一个元素元素的尺寸、结构发生变化或者触发某些属性时，浏览器会使渲染树中受到影响的部分失效，导致需要重新构建页面的时候，就产生了回流/重排。

什么是重绘(repaint)？
当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘。（只改变了自身的样式，不会影响到其他元素位置时）

什么时候会进行回流？
1、添加或者删除可见的 DOM 元素；
2、元素的位置发生改变；
3、元素的尺寸发生改变；
4、内容改变；
5、页面第一次渲染的时候；

什么时候会进行重绘？
只改变自身样式，不会影响到其他元素；
CSS 样式改变：color、background-color、visibility、box-shadow、outline等

注意：回流一定会触发重绘，而重绘不一定会回流

隐藏页面元素的三种方式和差异：
visibility: hidden会引起重绘,不会引起回流，因为元素依旧占据空间；而display会引起回流和重绘，因为回流必定引起重绘，而重绘不一定会引起回流；opacity:0与visibility:hidden方式一样，同样会占据页面空间，会引起重绘,不会引起回流**

事件绑定差异性：
display:none; 的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。
visibility: hidden; 的元素不会触发绑定的事件。
opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。

在CSS中，有两组属性：
继承的属性组：默认具有继承性的属性，主要是排版属性，比如 font-size、font-family、color等
非继承的属性组：默认不继承的属性，比如用于盒模型的 padding、margin、border等

CSS （元素）选择器用于查找或选取要设置样式的 HTML 元素，分为通配符选择器<伪类选择器<元素选择器又称为标签选择器、后代选择器、子元素选择器、相邻兄弟选择器（例：h1 + p {margin-top:50px;}）<类选择器< 属性选择器< id选择器<内联样式< !important权重最高

css3的:target :root :empty选择器，可以称为css3新的样式选择器（很少用），但不是元素选择器

//突出显示活动的 HTML 锚：
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。

//设置HTML文档的背景色
:root选择器用匹配文档的根元素。
在HTML中根元素始终是HTML元素。
:root
{
    background:#ff0000;
}

//指定空的p元素的背景色：
:empty选择器选择每个没有任何子级的元素（包括文本节点）。
p:empty
{
    background:#ff0000;
}