美文网首页前端面试集锦
刷前端面经笔记(四)

刷前端面经笔记(四)

作者: LHH大翰仔仔 | 来源:发表于2019-02-07 22:56 被阅读135次
    1.说说前端中的事件流?

    事件流描述的是从页面接收事件的顺序,DOM2级事件流包括下面几个阶段。
    事件捕获阶段
    处理事件阶段
    事件冒泡阶段
    addEventListeneraddEventListenerDOM2级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。最后的布尔值如果为true,表示在捕获阶段调用事件处理程序;如果为false,表示在冒泡阶段调用事件处理程序,默认为false

    2.如何实现一个自适应的正方形

    1)CSS 3vw单位
    CSS3中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw=1%viewport widthvh是相对于视口高度百分比的单位,1vh=1%viewport heightvmin是相对于当前视口宽高中较小的一个的百分比单位,同理vmax是相对当前视口宽高中较大的一个百分比单位。
    代码实现:

    .placeholder{
      width: 50vw;
      height: 50vw;
    }
    

    优点:简洁方便
    缺点:浏览器兼容不好
    2)设置垂直方向的 padding撑开容器
    margin、padding的百分比数值是相对于父元素宽度计算的。由此可以发现只需要将元素垂直方向的padding值设定为与width相同的百分比就可以制作出自适应正方形了:
    代码实现:

    .placeholder{
      width: 100%;
      padding-bottom:100%;
    }
    

    如果正方形中没有内容(相当于只是一个几何里面的正方形,并没有展示其他任何内容),一切看起来都很正常;但是,如果正方形中有其他内容(这种情况会更常见一些,比如说有一些文本和图片),此时容器的高度就会被拉伸,因为盒子模型中的padding 是不包含在content 中的,所以我们可以通过 height:0 解决这个问题;这种方案简洁明了,且兼容性好;但是除了填充内容后会出现问题以外,还有可能碰上max-height不收缩,于是第三种方案来了:
    3)利用伪元素的margin(padding)-top撑开容器
    在方案二中,我们利用百分比数值的 padding-bottom属性撑开容器内部空间,但是这样做会导致在元素上设置的 max-height 属性失效;而失效的原因是max-height属性只限制于 height,也就是只会对元素的content height起作用。那么我们是不是能用一个子元素撑开 content部分的高度,从而使max-height 属性生效呢?我们来试试:

            .placeholder {
                width: 20%;
                background-color: #000;
    
                /* overflow: hidden; */
                /* display: inline-block; */
                float: left;
                /*设置成BFC才能使margin-top撑起高度*/
            }
            
            .placeholder:after {
                content: '';
                display: block;
                margin-top: 100%;
                /* margin 百分比相对父元素宽度计算 */
            }
    
    3.js中的位置关系

    offsetParent:该属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为body元素的引用。 当容器元素的style.display被设置为 "none"时(译注:IEOpera除外),offsetParent属性 返回 null
    top:该属性一般对用过css定位的元素有效(position“static”时为auto,不产生效果),定义了一个top属性有效的元素(即定位元素)的上外边距边界与其包含块上边界之间的偏移。
    clientTop:元素上边框的厚度,当没有指定边框厚底时,一般为0
    scrollTop:位于对象最顶端和窗口中可见内容的最顶端之间的距离,简单地说就是滚动后被隐藏的高度。
    offsetTop:获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
    clientHeight:内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
    scrollHeightIEOpera 认为scrollHeight是网页内容实际高度,可以小于clientHeightFF 认为scrollHeight 是网页内容高度,不过最小值是 clientHeight
    offsetHeight:获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。IEOpera 认为 offsetHeight = clientHeight + 滚动条 + 边框。FF 认为 offsetHeight是网页内容实际高度,可以小于clientHeightoffsetHeight在新版本的FF和IE中是一样的,表示网页的高度,与滚动条无关,chrome中不包括滚动条。

    *诸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等,和top、height类似,不再赘述。

    clientXclientY:相对于浏览器窗口可视区域的XY坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。
    pageXpageY:类似于event.clientXevent.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
    offsetXoffsetY:相对于事件源元素(targetsrcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
    screenXscreenY:相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

    4.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

    Doctype声明于文档最前面,告诉浏览器以何种方式来渲染页面,这里有两种模式,严格模式和混杂模式。
    严格模式的排版和 JS运作模式是 以该浏览器支持的最高标准运行。
    混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面。

    5.link标签和import标签的区别?

    link属于html标签,而@importcss提供的
    页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
    linkhtml标签,因此没有兼容性,而@import只有IE5以上才能识别。
    link方式样式的权重高于@import的。

    6.元素的文本省略号?

    单行:

     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap
    

    多行:
    1)直接用css属性设置(只有-webkit内核才有作用)

    display: -webkit-box
    -webkit-box-orient:vertical
    -webkit-line-clamp:3
    overflow:hidden
    

    移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;
    -webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS规范草案中。
    display: -webkit-box将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式 。
    text-overflow: ellipsis 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。
    2)利用伪类

    <div id="con">
      <span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
      <span class="t"></span>
    </div>
    <style>
    #txt{
      display: inline-block;
      height: 40px;
      width: 250px;
      line-height: 20px;
      overflow: hidden;
      font-size: 16px;
    }
    .t:after{
      display: inline;
      content: "...";
      font-size: 16px;
        
    }
    </style>
    

    这种方法的缺点就是内容不足以超过位置的时候,还是会有...

    欢迎关注

    相关文章

      网友评论

        本文标题:刷前端面经笔记(四)

        本文链接:https://www.haomeiwen.com/subject/frxnsqtx.html