学习张鑫旭前辈课程的有关笔记（一）

张鑫旭，国内前端大神，只想到一个词来形容他——“专业”！
以下为本人观看其讲课时所做的笔记，仅供同学们作为观看其视频的参考。

《深入理解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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"/>hehe...</div>
        .pbox{padding-left:120px;}  .phox img{float:left;margin-left:-120px;}
    可以把padding设置在子元素上   <div class="pbox"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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来实现子元素如右对齐的定位。可避免其原来的同级元素的层级关系被破坏