zoukankan      html  css  js  c++  java
  • js面试题-----CSS盒模型

    题目:谈谈你对CSS盒模型的认识

       基本概念:标准模型(width只包括content)+IE模型(IE模型的width包括content、padding和border)

       CSS如何设置这两种模型(box-sizing:content-box(标准) box-sizing:border-box(IE))

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

         通过dom.style.width/height

         通过dom.currentStyle.width/height

           通过getComputedStyle(dom).width/height

           通过dom.getBoundingClientRect().width/height

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

     <section id='sec'>
            <style>
                #sec{
                  background:red;
                  overflow:hidden;/*形成BFC*/
                }
                .child{
                  height:100px;
                  margin-top:10px;
                  background:yellow;
                }
            </style>
            <article class='child'></article>
        </section>

       BFC(边距重叠解决方案):块级格式化上下文

       BFC的原理

         BFC元素不会与float的元素重叠

         BFC上下的边距不会重叠

         BFC是一个独立的容器和外面的容器互不干扰

         计算BFC高度的时候浮动子元素也会参与运算

       如何创建BFC:

       float的值不等于none;position的值不等于static或者relative;diaplay:table/table-cell;overflow:hidden/auto

       BFC的使用场景 

    <!--BFC垂直方向边距重叠-->
        <section id='margin'>
          <style>
            #margin{
              background:pink;
              overflow:hidden;
            }
            #margin>p{
              margin:5px auto 25px;
              background:red;
            }
          </style>
          <p>1</p>
          <div style='overflow:hidden'>
            <p>2</p>
          </div>      
          <p>3</p>
        </section>
        <!--BFC不与float重叠-->
        <section id="layout">
          <style>
            #layout{
              background:red;
            }
            #layout .left{
              float:left;
              width:100px;
              height:100px;
              background:pink;
            }
            #layout .right{
              height:110px;
              background:#ccc;
              overflow:auto;
            }
          </style>
          <div class='left'></div>
          <div class='right'></div>
        </section>
        <!--BFC子元素即使是float也会参与高度计算-->
        <section id="float">
          <style>
            #float{
              background:red;
              float:left;
            }
            .float{
              float:left;
              font-size:30px;
            }
          </style>
          <div class='float'>我是浮动元素</div>
        </section>
  • 相关阅读:
    RegExp正则表达式心得 1 -分解MIME格式
    转载:ASP.Net性能优化(作者:刘鉴平)
    asp.Net中的多文件上传[载]
    我做的程序
    C#代码执行者1.0
    wordwrap,wordbreak,whitespace,textoverflow的区别和用法[转]
    SQL里面Case的用法
    richTextBox中插入图片的方法
    关于CodeDom的测试
    关系数据库的索引技术
  • 原文地址:https://www.cnblogs.com/diasa-fly/p/7506397.html
Copyright © 2011-2022 走看看