前端面试题(2)——CSS盒模型


题目:谈谈你对CSS盒模型的理解

  1. 基本概念:标准模型+IE模型
  2. 标准模型和IE模型的区别
  3. CSS如何设置这两种模型
  4. JS如何设置获取盒模型对应的宽和高
  5. 实例题(根据盒模型解释边距重叠)
  6. BFC(边距重叠解决方案)/IFC

一、基本概念

CSS盒模型:内容(content)、填充(padding)、边框(border)、边界(margin)

二、标准模型和IE模型的区别

  1. 标准模型:宽高都指content,不包括padding和border;


    标准模型.jpg
  2. IE模型:宽高是指content+padding+border的总的宽高;


    IE模型.jpg

三、CSS如何设置这两种模型

  1. 设置标准盒模型(<font color='#f00'>浏览器默认</font>):box-sizing:content-box;;
  2. 设置IE盒模型:box-sizing:border-box;;

四、JS如何设置获取盒模型对应的宽和高

  1. dom.style.width/height(只能取出内联样式的宽和高);
  2. dom.currentStyle.width/height(三种设置方式设置的宽高都可以取到,但是只支持IE浏览器);
  3. window.getComputedStyle(dom).idth/height(三种设置方式设置的宽高都可以取到,兼容firefox和chrome,相比上一种通用性更好一些)
  4. dom.getBoundingClientRect().width/height(适用场所:计算一个元素的绝对位置,相对于视窗viewport的左顶点的绝对位置,dom.getBoundingClientRect()方法可以拿到四个元素,分别是top/left/width/height);

五、实例题(根据盒模型解释边距重叠)

  1. 父子元素:子元素的height=100px;marign-top=10px;请问父元素的高度是?
  • 下面的代码片段显示子元素和父元素的高度都是100px;
  • 若给父元素加上overflow:hidden;(BFC),则子元素的高度为100不变,父元素的高度为110px;
    <section id="sec">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            #sec {
                background: #f00;
            }
            
            .child {
                height: 100px;
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article class="child"></article>
    </section>
    
  1. 兄弟元素:若为上下分布,则大的margin兼容小的margin;若为左右分布,则相加;

    • 上下分布: 以下代码片段中,elderBrotheryoungerBrother之间的上下间距是30px;
    <section id="sect">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            #sect article {
                height: 200px;
            }
            
            .elderBrother {
                margin-bottom: 30px;
                background: #f00;
            }
            
            .youngerBrother {
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article class="elderBrother"></article>
        <article class="youngerBrother"></article>
    </section>
    
    • 左右分布:以下代码片段中,elderBrotheryoungerBrother之间的左右间距是40px;
    <section id="sect">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            #sect article {
                height: 100px;
                width: 300px;
                display: inline-block;
            }
            
            .elderBrother {
                margin-bottom: 30px;
                background: #f00;
            }
            
            .youngerBrother {
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article class="elderBrother"></article>
        <article class="youngerBrother"></article>
    </section>
    

六、BFC(边距重叠解决方案)

  1. BFC的基本概念:块级格式化上下文;IFC的基本概念:内联元素格式化上下文;
  2. BFC的原理(BFC的渲染规则):
    • 在BFC这个元素的垂直方向上的边距重叠;
    • BFC的区域不会和浮动元素的box重叠(用来清除浮动和做布局);
    • BFC在页面上是一个独立的容器,它外面的元素不会影响它里面的元素,它里面的元素也不会影响它外面的元素;
    • 计算BFC高度的时候,浮动元素也会参与计算;
  3. 如何创建BFC?
    • float的值不是none的时候;
    • position的值不是static/relative的时候;
    • display的值是table相关的值的时候;
    • overflow的值不是visible的时候;
  4. BFC的使用场景
    • BFC垂直方向边距重叠的问题;
    • BFC不与float重叠;
    • 清除浮动;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • css盒模型 1.题目:谈谈你对css盒模型的认识(从理论转化到应用) 基本概念:标准模型+ IE模型border...
    飞菲fly阅读 967评论 0 2
  • 50道CSS基础面试题(附答案) 1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒...
    杀个程序猿祭天阅读 1,685评论 0 71
  • 在我苦逼的做着第三个PPT的时候,老曹在QQ上蹭蹭蹭发了好几张照片,猛一看,我去,这谁家大胖小子,白胖白胖的!在我...
    宝藏女王阅读 206评论 0 1