Relative
1.限制left/top/right/bottom定位(absolute)；
2.限制z-index层级(限制内部层级,外部的relative说了算)；
3.限制在overflow下的嚣张气焰（absolute）；
4.相对自身定位；
5.无侵入，不影响其他元素的布局（保留了本身所在的空间）；
6.left,right,top,bottom同时出现时，只有left和top起作用；
7.层级高于普通元素，用于改变自然的层叠顺序；
8.当子元素的z-index为auto时，父元素的z-index并不能限制层级；
9.relative最小化原则（独立限制absolute）,滥用relative可能引发不可知的问题。
Absolute
1.absolute与float的兄弟关系（包裹性和破坏性）；
2.独立的absolute可以摆脱overflow的限制；
3.脱离文档流与位置跟随；
4.无依赖的绝对定位，图标覆盖左（右）上角的实例；
5.使用text-align和absolute配合 实现居中或右对齐；
6.后来居上的层叠准则；
7.left:0，top:0，right:0,bottom:0之爆裂拉伸；
8.距离右侧X像素的中间自适应布局和百分比高度自适应；
9.相互合作性，在同一级别的css中，实际宽度以width为准，当margin:auto出现时会有绝对定位的绝对居中效果；
10.兼容性好，自适应强，扩展性好，性能优异，方便实现诸多效果，适合移动端，PC端同样精彩。
Z-index
1.支持负值和css3 animation动画；
2.只对非static定位起作用（有点类似absolute）；
3.定位元素的z-index遵循后来居上和哪个大哪个上（没有嵌套情况）；
4.如果发生嵌套，则遵循祖先优先原则（z-index值为数值而不是auto）；
5.从层叠顺序上讲，z-index:auto可以看成z-index:0，但从层叠上下文来讲，两者却有本质区别，z-index:auto不会创建层叠上下文而z-index可以创建；
6.层叠等级：层叠上下文（background/border），负z-index，block块水平盒子，float浮动盒子，inline/inline-block水平盒子，z-index:auto或z-index:0，正z-index，（装饰，布局，内容）；
7.display：flex配合子元素正z-index会创建层叠上下文；
8.不犯二准则：非浮层元素，避免设置z-index值，没有任何道理需要超过2。
Float
1.历史来源：设计成像word那样文字环绕效果；
2.包裹性（子元素的空间变得紧实）和破坏性（会让父元素高度塌陷）；
3.清除浮动：.clearfix:after{content:"";display:block;height:0;overflow:hidden;clear:both;} .clearfix{*zoom:1} ;
4.元素block块状化（砖头化）和破坏性造成的紧密排列特性（去空格化）；
5.自适应布局；
6.IE7兼容性问题。
Margin
1.一侧定宽的自适应布局；
2.支持负值；
3.滚动容器上下留白；
4.普通元素的百分比margin都是相对容器的宽度计算的（尤其是上下的百分比）；
5.绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的；
6.margin重叠通常特性：block水平元素（不包括float和absolute），不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）；
7.margin重叠的三种情况：1.相邻兄弟元素重叠（1 1=1），2.父子元素margin重叠，3.空block元素margin重叠；（元素没有border，padding，inline元素和高度设置）
8.margin重叠的计算规则：正正取大值，正负值相加，负负最负值；
9.margin：auto是为了分配剩余空间的大小，剩余空间不能为负值，常规模式下无法实现垂直居中；
10.absolute与margin居中（天使羽翼加高宽值和margin实现垂直水平居中）；
11.display：table-cell和table-row等情形无效；
12.绝对定位元素非定位方位的margin值“无效”；
13.margin相对于整个容器而言的，浮动会占据位置，但不影响margin，导致鞭长莫及；
14.margin无法使内联元素脱离容器；
Overflow
1.overflow：visible/hidden/auto/scroll;
2.无论什么浏览器，默认滚动条均来自<html>!而不是<body>标签；
3.overflow与BFC：清除浮动影响，避免margin穿透问题，两栏自适应；
4.绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候（overflow元素或子元素为relative时失效）；
5.resize:both;overflow:hidden;创建可拖拽的div；
6.text-overflow:ellipsis;overflow:hidden;文字溢出...效果；
7.锚点定位与overflow选项卡技术；
Border
1.不支持百分比单位；
2.borde-width:thin(1px)/medium(3px)/thick(5px);
3.border-color会继承color的值；
4.background-position默认相对于左上方定位；
5.制作三角形{width:0;height:0;border-style:solid;border-color:red transparent transparent transparent;}
Padding
1.padding为一个值的时候只影响左右的距离不影响上下的（inline水平）；
2.padding百分比相对于宽度而定；
对语义化的理解:
去掉或丢失样式的时候可以清晰地呈现页面结构;
有利于seo;
有利于团队合作,语义化更具可读性;
方便其他设备的解析
清除浮动的四种方法:
设置父元素的高度
添加一个空标签,并设置空标签样式 clear:both
给父元素添加样式 overflow:hidden
给最后一个浮动元素添加伪元素::after{content:"";height:0;clear:both;zoom:1;display:table}
渐变:background:-moz-linear-gradient{lef, #effbfb 10%, #fhkocs 68%} //线性渐变
background:-moz-radial-gradient(red 20%, yellow 50%, blue 80%) //径向渐变
background: conic-gradient(red, orange, yellow, green, teal, blue, purple); // 圆锥渐变:
当满足以下任何一条件都会触发BFC:
1.浮动;2.absolute或fixed;3.overflow不为visible;4.display为以下任一值:inline-block/table-cells/table-caption
得到div的height值:
div.offsetHeight(带滚动条的完整高度)
div.clientHeight(内容的高度)
重新加载页面:window.location.reload()
重绘和回流:
当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,就称之为回流,每个页面至少经过一次回流,就是在第一次加载的时候
当渲染树中的一部分元素需要更改属性,而这些属性只会更改元素的外观和风格,不会影响布局,比如background,就叫重绘
伪类: :hover 伪元素: ::before
placeholder颜色值:
input::-webkit-input-placeholder{color:#90ee90}
input:focus::-webkit-input-placeholder{color:#87ceeb}
href:跳转到外部资源,比如超链接,css样式链接
src:引入资源到页面,如script,图片img,会影响进程的进行
强制使用IE最先进的内核渲染页面:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
文本溢出以...显示:display:block;width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
a:link; a:visited; a:hover; a:active;
把鼠标移到按钮并点击时产生一串事件分别是:hover,focus,active
内容水平居中的方式:
1.inline:text-align:center;
2.block:margin:0 auto;
3.left:50%;margin-left:-内容一半的宽度;
4.left:50%;transform:translateX(-50%);
5.position:absolute;left:0;right:0;top:0;bottom:0;margin:0 auto;
6.display:flex;justify-content:center;
