relative
1.当父元素设置了relative的zindex，子元素为absolute时，设置zindex无效
2.当父元素relative设置了overflow：hidden时，子元素absolute超出父元素部分无效3.relative只能限制fix的zindex层级4.Relative相当于自身进行定位，absolute相对于边界5.Margin会影响其他元素定位，而relative无影响（自定义拖拽效果）6.top&&bottom同时存在，bottom无效；同理，right无效7.relative可提高层叠级数8.父元素的zindex较大排前面（数值）9.Auto排在上，（当前层叠上下文的生成盒子层叠水平是0 盒子【除非是根元素】不会创建一个新的层叠上下文）层叠上下文&层叠水平
层叠上下文：是html元素中的一个三维概念，表示元素再z轴上有了‘可以高人一等’
层叠水平：所有元素都有决定同一层叠上下文中的元素在z轴上的显示顺序，比较两个元素的层叠水平,必须是这两个元素在同一个层叠上下文中,否则没有意义。z-index可以影响 层叠水平(只是影响,不是决定)
页面根元素天生具有层叠上下文，称之为“根层叠上下文”
Zindex值为数值的定位元素也具有层叠上下文层叠顺序是规则
(在同一个层叠上下文中的元素,对应下面规则的序号越大,位置越高)
1.层叠上下文 background/border 2.负z-index 3.block块级元素 4.float浮动元素 5.inline/inline-block行内元素 6.z-index:auto或者z-index:0(不依赖z-index的层叠上下文) 7.正z-index1通常是装饰属性;34是布局,5是内容——所以行内元素具有较高的层叠序号
背景色覆盖是层叠顺序，文字覆盖是后来居上父元素成为层叠上下文
1.父元素设置display：flex且子元素的zindex不为0时
2.父元素的透明度有具体数值3.transform不等于none4.mix-blend-mode（混合模式）不等于normal5.filter不等于none6.isolation：（isolate isolation是为mix-blend-mode而生的属性;mix-blend-mode混合默认z轴所有层叠在下面的元素）7.条件1:父级需要是flex/inline-flex条件2:子元素z-index不为auto（只针对chrome等blink内核浏览器有效）8.will-change：transform（will-change是提高页面滚动、动画等渲染性能的属性）9.-webkit-overflow-scrolling:touch（移动端）定位元素层叠在普通元素之上,因为一旦成为定位元素,z-index自动生效,默认z-index:auto也可以看作z-index:0;所以会覆盖block、inline、float元素
IE7的zindex：auto也会新建层叠上下文；元素的层叠水平主要由所在的层叠上下文决定（避免使用定位属性，定位属性从大容器平级分离为私有小容器）
避免一山比一山高的样式问题（多人写作及后期维护）：对于非浮层元素，避免设置z-index值，zindex值没有任何道理需要超过2
避免浮层组件因zindex被覆盖的问题（组件的覆盖规则具有动态性，意向不到的高层级元素）：
Zindex负值元素再层叠上下文的背景之上，其他元素之下。
absolute：（无依赖）
1.独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏
2.绝对定位生效的时候，浮动无效3.用了absolute之后，用display，会保留位置跟随特性，要注意的是IE7中用了4.absolute之后，只会是inline-block水平显示，指定包上<div>就解决了；5.配合margin，精确定位，适应各种浏览器6.在image和i中间使用注释，可以消除它们之间的空格（保证贴合，可使用absolute跟随性）下拉框定位（无依赖定位）
利用了即使给予了绝对定位属性（前提不给予任何top/left/bottom/right值），元素会依然保持普通文档流的视觉位置。这里说的位置是一种视觉位置，并不是文档流位置，因为其本身高度在父元素中已经塌陷，也就是大家平时所谓的已经脱离文档流），此时使用margin做平移，也就是相对于自己进行了定位，前提要将“视觉位置”规划好，也就是按照正常的文档流进行布局（后面的元素在右或是下侧）。
对齐居中或边缘
绝对定位的元素前加 父元素text-align:center;即可使得绝对定位的元素居中
右边侧栏应用：
星号对齐：
图标进行无依赖绝对定位
文字溢出：
回流与重绘：动画尽量作用在绝对定位元素上
垂直空间的层级：后来居上z-index无依赖
1.如果只有一个绝对定位元素，自然不需要zindex，自动覆盖普通元素2.如果两个绝对定位，控制dom流的前后顺序达到需要的覆盖效果，依然无zindex3.如果多个绝对定位交错，非常非常少见！，zindex：1控制4.如果非弹框类的绝对定位元素zindex>2，必定zindex冗余，需要优化

Absolute绝对定位的方向是对立的（left&right top&bottom）
举例：Position:absolute; left:0; top:0; width:50%等同于==》position：absolute; left:0; top:0; right:50%;（IE7+才支持）
若拉伸和width&height尺寸同时存在，那么width/height尺寸大于left/top/right/bottom拉伸尺寸
因此=》position：absolute；top：0；left：0；right：0；width：50%的实际宽度是50%而不是100%（当使用margin：auto 可实现居中=》绝对元素的绝对居中效果 IE8+支持）一些例子
没有宽度和高度声明实现的全屏自适应效果：
高度自适应的九宫格效果：
高度自适应的九宫格效果
absolute与整体布局：1.body降级，子元素升级（全屏拉伸效果：position：absolute；left：0；top：0；right：0；bottom：0）绝对定位受限于父级，因此子元素想要拉伸需要：html，body{ height：100%；} 
float
具有包裹性：
display：absolute fixed stickyposition：absolute fixed stickyoverflow：hidden scroll具有破坏性：
display：noneposition：absolute fixed sticky清除浮动的两大方法：
底部插入clear：both父元素BFC(IE8+)或haslayout（IE6/IE7）Clear通常应用形式：html block水平元素底部 css after伪元素底部生成
IE6&IE7：
伪元素更好的方法：
.clearfix应用在包含浮动子元素的父级元素上
注意：
1.使用了"clear:both"但是它会与margin重叠，则margin-botttom无法发挥作用；2.使用了“overflow：hidden”使得元素BFC化，包裹好了，不影响margin-bottom发挥作用
clear:both;本文字离图片的距离是？2.本文字离图片的距离是？
float作用
1.元素block块状化（砖头化）
2.破坏性造成的紧密排列特性（去空格化）规定可以由用户调整 div 元素的大小：
div{resize:both;overflow:auto;} IE7浮动问题
一些要注意的点
包含块：离该该元素最近的块级祖先（父级）
《css权威指南》：浮动元素同时处于（常规）流内和流外
1.浮动元素不影响块级元素的布局（块级元素会当浮动元素不存在）2.浮动元素会影响行内元素的布局（从而间接影响块级元素的布局浮动元素的摆放：
尽量靠上尽量靠左/右仅能要挨着靠，margin外边缘挨着（两个浮动元素之间的margin不会被合并）浮动元素间接影响块级元素
撑开内含浮动元素的无高度div：
1.可用a标签 设置display：inline-block；width：100%， 把含浮动元素的div撑起来（div不用设计高度）
2.overflow：hidden(BFC)3.可用a标签 设置display：block；width：100%，clear：both
4.div=》display：table
5.div=》display：table-cell
6.div=》display：flow-root（触发BFC）
7.div::after代替a标签=》content:’’ display:block; clear:both;(最下方存在一个没有高度的元素)
8.使用.clearfix:after{content:’’ display:block; clear:both;}
9.让div也浮动（BFC）
教学视频：
overflow
overflow-x：y方向自动变成auto
在IE7中，设置了宽度100%时，会出现水平滚动条使overflow起效：1.非display：inline水平2.对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸3.对于单元格td等，还需要table为table-layout：fixed状态overflow：visible
IE7浏览器下，文字越多，按钮两侧padding留白就越大
=》IE7解决方案：给所有的按钮添加样式overflow：visible 
注意:
无论什么浏览器，默认滚动条均来自<html>，而不是<body>标签
Body/html与滚动条
去除页面默认滚动条：html{ overflow:hidden; }
js与滚动高度:
chrome： document.body.scrollTop;其他浏览器：document.documentElement.scrollTop;但两者不会同时存在，因此：var st = document.body.scrollTop+document.documentElement.scrollTop;（不推荐）建议写法：var st = document.body.scrollTop||document.documentElement.scrollTop;
overflow的pading-bottom缺失现象：
除了chrome浏览器，其他浏览器都不显示 =》 导致了不一样的scrollHeight（元素内容高度）
解决水平居中跳动的问题的修复
1.html{ overflow-y:scroll;}2..container{ width:1200px; padding-left:calc(100vw - 100%);}100vw-浏览器宽度；100%-可用内容宽度 自定义滚动条-webkit
Ios原生滚动回调效果：
-webkit-overflow-scrolling：touch；
JQ滚动条自定义插件：
BFC
块级格式化上下文（内部元素不会影响外部元素）
渲染规则：
1.bfc元素的垂直方向边距发生重叠2.bfc区域不会与浮动元素重叠3.独立容器4.计算bfc高度时，浮动元素也会参与计算创建bfc：
1.overflow2.浮动不为none3.position不是static4.display与table有关bfc使用场景：
...
BFC垂直方向重叠//消除重叠1
3
布局应用：
overflow与bfc:
1.auto2.scroll3.hidden清除部分浮动：
.clearfix{ overflow:hidden; _zoom:1;}清除浮动影响 通用：
.clearfix{overflow:hidden;*zoom:1;
}
.clearfix:after{content:’’;display:table;clear:both;
}
避免margin穿透问题
Overflow:auto scroll hidden
两栏自适应布局
Overflow:scroll auto hidden
注意：使用padding做流体自适应布局的时候，万万不可让自适应层BFC化！
两栏自适应布局
（IE7只适用于block元素）
overflow与absolute
absolute使overflow：hidden失效
绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块（含position：relative absolute fixed声明的父级元素，没有则body元素）之间的时候
避免失效
1.overflow元素自身为包含块2.overflow元素的子元素为包含块（为绝对定位元素的父级）3.任意合法transform生命当做包含块（让overflow元素自身transform只适用于IE9+/FireFox；让overflow子元素transform可通用IE9+)overflow失效妙用

resize拉伸
Both：水平垂直两边拉
horizontal：只有水平方向拉vertical：只有垂直方向拉使用前提：元素overflow的属性值不能是visible文本域默认overflow：autotext-overflow：ellipsis
文本溢出用省略号表示
使用前提：元素overflow的属性值是hidden锚点技术
锚点定位的本质：改变容器的滚动高度
锚点定位的触发：url地址中锚链和锚点元素 可focus的锚点元素处于focus态锚点定位的作用：快速定位锚点定位与overflow选项卡技术：
页面布局的变通
左右宽度固定，中间适应
已知左右栏高度和宽度，中间块为自适应
浮动绝对定位弹性表格网格
上下高度固定，中间适应
绝对定位绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
绝对定位
两栏布局
左宽度固定，右边自适应
左侧顶宽
右侧自适应
.content { width: 100%; margin: 0 0 10px; } .left1 { position: relative; float: left; width: 100px; margin-right: -100px; background: #4eb3b9; } .right1 { float: right; width: 100%; background: #f8de72; } .right1-content { margin-left:110px; background: #ff0097; } 左宽度自适应，右边固定宽
左侧自适应右侧顶宽
.content { width: 100%; margin: 0 0 10px; } .left1 { background: #4eb3b9; float: left; width: 100%; } .right1 { background: #f8de72; width:100px; float: right; position: relative; margin-left: -100px; } .left1-content { background: #ff0097; margin-right: 120px; } 上高度固定，下自适应
盒模型
基本概念
两种模型的设置：
box-sizing:content-box;//标准模型 默认box-sizing:border-box;//IE模型
JS设置盒模型对应的宽和高
dom.style.width/height:只能取出内联样式dom.currentStyle.width/height:三种方式都可以，只有ie支持window.getComputedStyle(dom）.width/height:都通用dom.getBoundingClientRect().width/height:计算一个元素的绝对位置，根据视窗计算
实例题
解释边距重叠
解决方案：块级格式化上下文bfc