继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

学习张鑫旭前辈课程的有关笔记(一)

Ego_echo
关注TA
已关注
手记 6
粉丝 17
获赞 231

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

《深入理解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来实现子元素如右对齐的定位。可避免其原来的同级元素的层级关系被破坏
打开App,阅读手记
16人推荐
发表评论
随时随地看视频慕课网APP