张鑫旭，国内前端大神，只想到一个词来形容他——“专业”！
以下为本人观看其讲课时所做的笔记，仅供同学们作为观看其视频的参考。
《深入理解border》
border-width不支持百分比！（原因：border本来就不应当能变得很大，与内容高宽度的比例没有意义，还有outline,box-shadow,text-shadow也是）
border-width: thin(1px)，
medium(默认的,3px)，
thick(5px)。以上这些，在IE7以下是例外的
border-style: solid(实线)，
dashed(虚线)，在Chrome和Firefox下其小块的宽高比例为3:1，在IE下则是2:1
double(双实线), 至少要3px才有效果哦！原因：(0+1+0)(1+0+1)(1+1+1)(1+2+1)(2+1+2)(2+2+2)(2+3+2)...
实现3道杠图标：{width:120px; height:20px; border-top:60px double; border-bottom:20px solid;}
dotted(点线)，在Chrome和Firefox下的小点是方形的，在IE下则是圆形的。嘻嘻，可以通过设置很大的border值来实现IE7/8下的border-radius效果哦
inset(内凹)，已被淘汰
outset(外凸)，已被淘汰
groove(沟槽)，已被淘汰
ridge(山脊)。已被淘汰
border-color的默认颜色就是color！（当没有指定border-color、box-shadow、text-shadow...时，会使用color作为边框色！）
例如：.add{color:#ccc; border: 1px solid; transition: color .25s;} .add:hover{color:#06c;} 即可实现边框与字体的颜色一致变化
在CSS2.1中，background-position默认是相对左上方定位的！{border-right:50px solid transparent; background-position: 100% 40px;} 即可实现背景图片相对于容器的右边50px定位
因为background-position的100%(右侧)定位不计算border区域（只计算内容和两侧padding区域）。
.trapezium{width:100px; height:100px; border: 100px solid; border-color: red green blue orange;} 你就可以看到四个不同颜色的梯形！
.trangle{width:0px; height:0px; border: 100px solid; border-color: red green blue orange;} 你就可以看到四个不同颜色的三角形！(可以通过把border-color相关的值改为transparent即可取得某块三角形！)
甚至，你还可以通过将梯形叠加了一个块的上下面来实现近似的圆角效果。例如该梯形： .trapezium{width:300px; border:100px solid; border-color: transparent transparent #c00;}
透明边框：使用超级广泛，谁让它始于IE7呢！(相比较之下，color的transparent值要在IE9才开始兼容)
backround-position定位(上面已给出了相对于右边定位的例子)
三角与梯形的实现(上面也已经给出例子)
优雅地增加radios和checkboxs的响应区域大小
.checkbox{border: 2px solid transparent; background-clip: content-box; background-color: #fff; box-shadow:inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px; color: #d0d0d5;}
即可实现一个复选框拥有20px*20px的可点击区域，而视觉区域依然是16px*16px。在这里，box-shadow实现原来的border效果(毕竟border已经变透明了嘛)
增加可视渲染区域
CSS3中的drop-shadow可以给png图标赋色（即得到一个指定了颜色的与图标图案一致的投影）！ .icon{filter:drop-shadow(20px 0 #ff8040);}
具体方案如：.icon{position:relative; left:-20px; border-right:20px solid transparent; filter:drop-shadow(20px 0 #ff8040);} //图标是20px*20px的png图片
.box{width:20px overflow:hidden;} //父级元素的设置
实现两栏等高布局
父级元素：.box{border-left:300px solid #222;} //该border-left是为了放置子元素导航栏的
子元素导航栏：.left{width:300px; margin-left:-300px; float:left;}
然后在子元素导航栏的同一级下任意添加内容即可（很遗憾，由于border-width不支持百分比，因此导航栏不支持百分比宽度）《深入理解padding》
对于block水平元素，padding是会增加元素的尺寸的（即width为非auto时，padding一定会影响尺寸）！
但是！当元素设置了 width:auto 或者元素声明了 box-sizing:border-box 时，
则在一定程度下，padding不增加元素的尺寸，而是把元素的width变小了！
然而当padding值过大时，还是会增加元素的尺寸的，内部的内容则按最小宽度显示！
对于inline水平元素，水平padding影响尺寸，但垂直padding不影响尺寸！
但是！垂直padding是会影响元素的背景色区域的（即垂直padding会影响inline盒模型的content-area区域的大小）！
可以利用inline元素的垂直padding来实现高度可控的分隔线
方法：注册<span></span>退出登录 span{padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0;}//就可以实现一条高为16px的分隔线
padding不支持任何形式的负值！
padding百分比均是相对于宽度计算的！
对于block水平元素：
div{padding:50%;} //轻松实现一个正方形！IE7以上支持！
.container{padding:50%; background:url(1.jpg); background-size:100%; position:relative;}//放置了一张正方形的图片！
对于inline水平元素：
其百分比值同样是相对于宽度计算
默认的高度宽度细节有差异（即使元素里面完全是空的！要想一致，可设置font-size:0;）
padding会断行（可自行试验！）
标签元素的padding
ol/ul元素内置padding-left，但单位是px而不是em（例如在Chrome下其值是40px;）
所以，如果字号(font-size)很小，序号与容器边沿的间距就会很开；如果字号很大，序号就会爬到容器外面
若要解决列表的序号会爬到容器外面的问题，则可把容器的padding-left值设置为1.5em（当font-size为12px到14px时，父容器的padding-left值为22px到25px就可以实现上方的列表序号与下方的内容左对齐）
表单元素的内置padding
所有的input/textarea输入框都内置了padding
所有的button按钮都内置了padding（button的padding是最难控制的！）
设置 padding:0 时，在Firefox下的button的左右端依然有padding！（解决办法 button::-moz-focus-inner{padding:0;} ）
在IE浏览器下，button内部的文字越多，左右padding会逐渐变大！（解决办法 button{overflow:visible;} ）
在各个流浪器下，padding与高度的计算并不兼容。例如 button{line-height:20px; padding:10px; border: none;} //高度：IE7:45px IE8+:40px FireFox:42px Chrome: 40px
解决办法：<button id='btn'></button><label for="btn">按钮</label> label{display:inline-block; line-height:20px; padding 10px;} #btn{position:absolute; left:10000px;}
部分浏览器的select下内置了padding，如Firefox。IE8+可以设置padding
所有浏览器下，radio/checkbox 单复选框无内置padding
通过padding实现三道杠
<div class="line"></div> .line{width:150px; height:30px; padding: 15px 0; border-top:30px solid; border-bottom: 30px solid; background-color: currentColor; background-clip: content-box;}
实现原因：background-clip:content-box 使得background只作用于内容区域
通过padding实现白眼效果
<div class="eye"></div> .eye{width:150px; height:150px; padding: 10px; border:10px solid; border-radius: 50%; background-color: currentColor; background-clip: content-box;}
使用百分比单位构建固定比例布局结构：
<div class="box"></div> .box{padding:50%;} //实现 1:1 的布局效果
配合margin实现两栏等高布局
父级元素：.box{overflow:hidden;}
.child-l,.child-r{margin-bottom:-600px; padding-bottom:600px; float:left;}
通过padding实现两栏自适应布局
可以把padding设置在容器上 <div class="pbox"><img src="1.jpg"/>hehe...</div>
.pbox{padding-left:120px;} .phox img{float:left;margin-left:-120px;}
可以把padding设置在子元素上 <div class="pbox"><img src="1.jpg"/><div class="auto">hehe...</div></div>
img{float:left;} .auto{padding-left:120px;}《深入理解margin》
margin可以改变容器的尺寸！（尺寸又分为可视尺寸[clientWidth](标准！盒模型的实线所包含的部分或者说border所包含的部分)、占据尺寸[outerWidth](盒模型的虚线所包含的部分或者说包括了margin在内的部分)）
若margin要影响可视尺寸，有两个必要条件：
1、适用于没有设定width/height的普通block水平元素
2、只适用于水平方向尺寸
应用场景：
1、一侧定宽的自适应布局：左边的元素给予一个固定的宽度并左浮动，右边的block元素设置一个固定的margin-left值即可
margin与占据尺寸，有三点：
1、block/inline-block水平元素均适用
2、与有没有设定width/height值无关
3、适用于水平方向和垂直方向
应用场景：
1、滚动容器内上下留白：不要通过给父容器添加上下padding来实现(浏览器不兼容)，通过给子元素添加上下margin值来实现
margin与百分比单位：
1、水平方向百分比：
2、垂直方向百分比
3、普通元素百分比：上下左右的百分比margin都是相对于容器的宽度计算的
3、绝对定位元素百分比：上下左右的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的
应用场景：
1、宽高2:1的自适应矩形：父容器设置 overflow:hidden; ，子元素设置 margin:50% 。那么，子元素上方就可以形成一个宽高为2:1的矩形
2、宽高1:1的自适应矩形：父容器设置 overflow:hidden; ，子元素设置 margin:100% 。那么，子元素上方就可以形成一个宽高为1:1的矩形
margin重叠的通常特性：
1、发生在block水平元素(不包括float和absolute元素)
2、不考虑writing-mode的话，只发生在垂直方向(即margin-top/margin-bottom)
margin重叠的三种情况：
1、相邻的兄弟元素
2、父级和第一个/最后一个子元素：即该子元素设置了margin-top/margin-bottom时，等同于父级元素也设置了一个margin-top/margin-bottom
父子margin重叠的其他条件：
margin-top重叠:
1、父元素非块状格式化上下文元素
2、父元素没有border-top设置
3、父元素没有padding-top值
4、父元素和第一个子元素之间没有inline元素分隔
margin-bottom重叠：
1、父元素非块状格式化上下文元素
2、父元素没有border-bottom设置
3、父元素没有padding-bottom值
4、父元素和最后一个子元素之间没有inline元素分隔
5、父元素没有height，min-height，max-height限制
3、空的block元素：元素自己与自己发生重叠：即margin-top与margin-bottom重叠在一起
空block元素margin重叠的其他条件：
1、元素没有border设置
2、元素没有padding值
3、里面没有inline元素
4、没有height，或者min-height
margin重叠的值计算：
1、正正取大值；
2、正负值相加；
3、负负最负值。
应用场景：
1、巧用margin重叠：给列表中的每一项都设置相等的margin-top和margin-bottom值，使页面更具健壮性，即最后一个元素移除或位置调换，均不会破坏原来的布局
margin:auto 的作用机制
1、block水平元素有时候就算没有设置width和height，也会自动填充(满父级元素)；浮动或绝对定位元素也会自动填充(满第一个拥有定位属性的父元素)
2、此时，如果block水平元素设置width或height，自动填充特性就会被覆盖。此时，剩余的宽度或高度就有了利用的需要
3、在第二步的情况下，再设置 margin-right: 100px; margin-left: auto; ，就能实现block水平元素距父元素右边100px。
margin:auto 的规则：
1、如果一侧定值，一侧auto，auto就为剩余空间大小(请参照上例)
2、如果两侧均是auto，则平分剩余空间(这就是 margin: 0 auto; 的作用)
要注意：若是要通过 margin:auto; 设置元素在height方向居中，可用以下方法：
1、父元素需要设置流方向 writing-mode: vertical-lr; (CSS3的写法)
2、父元素设置定位和固定高度，子元素设置绝对定位并设置 top:0; bottom:0; ，再给予一个固定的高度后，就可以使用 margin:auto 0; 了。
margin负值定位：
1、margin负值下的两端对齐
例如：子元素们设置了一个 margin-right: 20px; float: left; ，则父级元素可设置一个 margin-right: -20px; 使得一行的最后一个元素的margin-right撑到非可视区即实现了两端对齐
2、margin负值下的等高布局 (margin可改变元素占据的空间)
例如：父元素设置了 overflow: hidden; ，左右子元素则设置 margin-bottom: -600px; padding-bottom: 600px; (600可替换成其他值) 即可实现两栏等高布局。
在这里，margin-bottom改变了子元素所占据的空间，而padding-bottom则把原来消失了的空间补回来。
3、margin负值下的两栏自适应布局 (元素占据空间会跟随margin移动)
例如：原来的实现图片相对于文字右浮动：img设置 width: 150px; float: right; p设置 margin-right: 170px; 即可。
修改后：p标签外面套一层 div ，令div左浮动，并设置宽度为100%，令p的margin-right:170px; ，令img也为左浮动，并设置margin-lef:-150px; 这样，就实现了p与img的margin重叠，以及效果。
margin无效情形解析：
1、inline水平元素的垂直margin无效（有两个前提：一、非替换元素，例如，不是<img>元素；二、正常书写模式）
2、display:table-cell/table-row 等声明的margin无效
（注意，FireFox：table-cell类型inline-block的渲染行为；IE：table-cell类型也是table-cell的渲染行为）
3、绝对定位元素的非定位方位的margin值"无效"。（即例如它没有设置left，则margin-left无效）
（注意，绝对定位的margin值其实一直有效 [为父元素设置定位即可看到效果]，只是不像普通元素那样，可以和兄弟元素那样重叠在一起）
4、当元素的左边拥有浮动的图片时，margin-left实际上是相对于父级元素而言，所以当margin-left小于浮动图片的占据尺寸时，是无法看到效果的
5、元素的内联特性导致的margin无效：例如为一张图片设置margin-top的负值时，图片(以底部为标准)最多只能移动到文字的基线位置（文字是不可能跑到父级容器外部的，最多只跟着图片移动到顶部）
了解margin-start/margin-end等(CSS3)属性：
1、当流向是正常的，margin-start等同于margin-left，两者重叠不累加
2、如果水平流是从右往左，margin-start等同于margin-right
3、在垂直流下(writing-mode:vertical-*;)，margin-start等同于margin-top
margin-collapse：控制margin重叠
目前只有webkit支持，-webkit-margin-collapse: <collapse> | <discard> | <separate>
collapse：重叠margin(默认)
discard：取消margin
separate：分隔，没有margin重叠《深入理解z-index》
z-index: auto; (默认值)
<integer>; (某个整数)
inherit; (继承)
z-index的特性：
1、支持负值
2、支持CSS3 animation动画(好奇怪啊，哈哈)
3、在CSS2.1时代，需要和定位元素配合使用（即只有声明了 position:relative/absolute/fixed/sticky 的z-index才有作用！position:static的元素的z-index是无效的）
如果定位元素z-index没有发生嵌套：
1、后来居上的原则
2、哪个大，哪个上
如果定位元素z-index发生嵌套：
1、祖先优先原则（前提：祖先的z-index值是数值，而不是auto！否则就以当前元素的z-index为准与另外一个元素的祖先的z-index值进行比较）
原因：z-index: auto; 当前层叠上下文的生成盒子层叠水平是0.盒子(除非是根元素html)不会创建一个新的层叠上下文
层叠上下文：层叠上下文(stacking context)是HTML元素中的一个三维概念，表示元素在z轴上有了“可以高人一等”。具有层叠上下文的元素：
1、页面根元素。它天生具有层叠上下文，称之为“根层叠上下文”
2、z-index值为数值的定位元素也具有层叠上下文。
3、其他属性
层叠水平(stacking level)：层叠上下文中的每个元素都有一个 层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。（遵循"后来居上"和"谁大谁上"的层叠准则）
注意：层叠水平(stacking level)和z-index不是一个东西。普通元素也有层叠水平。
层叠上下文的特性：
1、层叠上下文可以嵌套，组合成一个分层次的层叠上下文
2、每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素
3、每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中
层叠顺序(stacking order)：元素发生层叠的时候有着特定的垂直显示顺序
7阶层叠水平(stacking level)：
background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或看成z-index:0 < 正z-index
z-index与层叠上下文：
1、定位元素默认z-index:atuo;可以看成是z-index:0;
例如：为何定位元素会覆盖普通元素？原因：当元素拥有定位属性后，隐含的z-index:auto; 生效，根据7阶层叠水平可知，z-index:auto; 的元素是在inline水平元素之上的
2、z-index不为auto的定位元素会创建层叠上下文
在父容器div和图片img均为定位元素的情况下，若img的z-index为负值，则会被div的背景颜色覆盖；但是，一旦容器z-index值为数值(包括0)，图片的就覆盖了div的背景色
上例中，一开始时，div的z-index为auto，结果img的层叠上下文为html，所以会被div的背景色覆盖。然后，div的z-index因为不再是auto，所以成为了img的层叠上下文
因此，从层叠顺序上讲，z-index:auto; 可以看成 z-index:0; 。但是，从层叠上下文来讲，两者却有着本质差异！（当然，在IE7下，z-index:auto;也会创建层叠上下文）
3、z-index层叠顺序的比较止步于父级层叠上下文（z-index受限于层叠上下文）
即父级元素与其兄弟元素的z-index大小比较会影响子元素和父元素的兄弟元素(及其子元素)的层叠顺序
其他参与层叠上下文的属性们（大部分为CSS3属性）：
1、z-index值不为auto的flex项(即父元素display:flex|inline-flex。子元素的z-index值不为auto，则子元素会创建层叠上下文)
2、元素的opacity值不是1（这个厉害了！当transition动画产生时，opacity未达到1时，会把文字给覆盖掉，直到opacity为1时，文字才可见。在这里，文字与图片同级）
3、元素的transform值不为none
4、元素mix-blend-mode值不是normal
5、元素的filter值不是none（是指CSS3的滤镜哦！）
6、元素的isolation值是isolate
7、position: fixed 声明（blink/webkit内核浏览器支持！）
8、will-change指定的属性值为上面任意一个
9、元素的-webkit-overflow-scrolling设为touch
z-index与其他CSS属性层叠上下文：非定位元素层叠上下文和z-index的关系
1、不支持z-index的层叠上下文元素的层叠顺序均是 z-index:auto 级别（请参照7阶层叠水平）
2、依赖z-index的层叠上下文元素的层叠顺序取决于z-index的值
通过z-index值创建层叠上下文的情况有以下两种：
1、position值为relative/absolute或fixed(部分浏览器)
2、display:flex|inline-flex容器的子flex项
z-index相关实践：
1、最小化影响原则：避免z-index嵌套层叠关系混乱
原因： 1、元素的层叠水平主要由所在的层叠上下文决定；
2、IE7 z-index:auto也会新建层叠上下文
做法： 1、避免使用定位属性
2、定位属性从大容器平级分离为私有小容器
2、不犯2准则：避免z-index混乱，一山比一山高的样式问题
原因： 1、多人协作以及后期维护
做法： 1、对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2
3、组件层级计数器：避免浮层组件因z-index被覆盖的问题
原因： 1、总会遇到意想不到的高层级元素
2、组件的覆盖规则具有动态性
做法： 1、组件层级计数器方法：通过JS获得body下子元素的最大z-index值
4、负值z-index与可访问性隐藏：即人肉眼不可见，但是辅助设备可以识别
原因： 1、z-index负值元素在层叠上下文的背景之上，其他元素之下
例如： 1、[type=submit]{position: absolute; z-index: -1;}
把按钮隐藏在label的下面，让label(for="submit按钮的id")来模拟按钮，从而实现漂亮的按钮效果！
如果连IE7都不考虑了，[type=submit]{display:none;}就好了！《深入理解relative》
relative对absolute的限制作用：
1、限制left/top/right/bottom定位：父元素使用了relative定位后，使用了absolute的子元素无法越过父元素进行定位；
2、限制z-index层级：使用了relative定位的同级元素，其本身的z-index值将决定其子元素的z-index层级；
3、限制在overflow下的嚣张气焰：子元素设置了absolute定位时，其父级元素的 overflow 属性无法对该子元素进行有效约束。但父级元素再设置relative定位时，会把该子元素的超出部分砍掉。
relative对fixed的限制作用：
1、限制z-index层级： 与对absolute限制z-index的作用一样。
relative自身的定位特性：
1、相对自身：即相对于原来自身的位置进行偏移；
2、无入侵：即不影响原来的文档流。（应用：实现自定义拖拽）
relative元素设置了对立属性：top/bottom 或 left/right 时：
结论：1、绝对定位是拉伸；2、相对定位是斗争。
近水楼台先得月，top会使bottom无效，声明left后则会导致right无效。
relative与z-index层级：
1、提高元素的层叠上下文：鬼畜级别，即相当有效。
2、新建层叠上下文与层级控制：
当元素的z-index为一个具体的数值（包括0）时，设置了relative后会使元素新建层叠上下文，即元素的子元素层级会被该元素所约束。
在IE6/7以外的浏览器中，当元素的z-index为auto时，即使设置了relative，元素也无法约束其子元素的层级（即子元素会参考更上级元素的层叠上下文进行层叠排序）。
relative的最小化影响原则：即尽量降低relative属性对其他元素或布局的潜在影响
1、尽量避免使用relative
子元素直接使用absolute，而父级元素不必要使用relative就可使子元素相对于父级元素进行定位（只要子元素不使用left、top等属性即可，可使用margin-left、margin-top代替）
2、relative最小化
若子元素有很多同级的元素，应当将子元素拿出来与父级元素同级后，再为其套一父元素，对该新父元素使用relative来实现子元素如右对齐的定位。可避免其原来的同级元素的层级关系被破坏
随时随地看视频
