zoukankan      html  css  js  c++  java
  • Web前端面试指导(九):盒子模型你是怎么理解的?

    问题分析

    这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的。

    解答思路

    1)盒子模型有两种,W3C和IE盒子模型

    (1)W3C定义的盒子模型包括margin、border、padding、content ,元素的width=content的宽度

      (2)IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度,元素的width=content+padding+border

    2)个人理解和心得,要记住在面试时,我们和面试官是平等的,而且面试官也非常欣赏喜欢交谈的人,在面试的时候能够去表达自己的想法,往往会给面试官留下非常好的印象。例如上面的盒子模型,示范如下:

    我个人认为W3C定义盒子模型与IE定义的盒子模型,IE定义的比较合理,元素的宽度应该包含border(边框)和padding(填充),这个和我们现实生活的盒子是一样的,W3C也认识到自己的问题了,所以在CSS3中新增了一个样式box-sizing,包含两个属性content-box 和 border-box。

    (1) content-box  元素的width=content+padding+border

    1. .test1{  
    2.     box-sizing:content-box;  
    3.     200px;  
    4.     padding:10px;  
    5.     border:15px solid #eee;  
    6. }  

    (2) border-box   元素的width=width(用样式指定的宽度)

    1. .test1{  
    2.     box-sizing:border-box;  
    3.     200px;  
    4.     padding:10px;  
    5.     border:15px solid #eee;  
    6. }  

    加分项回答(自己比较独到理解)

    1.对于行级元素,margin-top和margin-bottom对于上下元素无效,margin-left和margin-right有效

    2.对于相邻的块级元素margin-bottom和margin-top 取值方式

     1) 都是正数: 取最大值

       距离=Math.max(margin-botton,margin-top)

     2) 都是负数: 取最小值

       距离=Math.min(margin-botton,margin-top)

     3)上面是正数,下面是负数或者 上面是负数,下面是正数: 正负相加

       距离=margin-botton+margin-top

    -----------------------------------------------------------------------------------------------------------------------------
  • 相关阅读:
    自己第一个github开源的感受
    直播时代--IOS直播客户端SDK,美颜直播【开源】
    OpenCL / OpenGL / OpenAL
    FFmpeg 라이브러리 코덱과 영상 변환을 중심으로
    nginx + http2.0 解决浏览器跨域和同源限制问题
    软件编译系统构建
    SRS支持rtmp/srt/gb28181/webrtc上行推流和rtmp/http-flv/hls/dash/gb28181/webrtc下行拉流
    SIP UA/UAC/UAS/GB28181-Server/GB28181-Client 五合一
    SUPL(安全用户面定位)
    RTMP低延时配置
  • 原文地址:https://www.cnblogs.com/zxwy/p/6122294.html
Copyright © 2011-2022 走看看