面试视频知识点整理1-4(css盒模型)


css盒模型:

      基本概念:

  1. 标准模型和IE模型区别
  2. css如何设置这两种模型(box-sizing:content-box;标准模型,box-sizing:border-box;IE模型)
  3. js如何设置获取盒模型对应的宽和高
    dom.style.width/height //只能取到内联的宽高
    dom.currentStyle.width/height //获取当前渲染好的宽高,只有ie支持
    window.getComputedStyle(dom).width/height //获取当前渲染好的宽高,兼容性比较好ie9及以上支持,edge12及以上
    dom.getBoundingClientRect().width/height //获取真实的宽高,一般用于确定位置

     

  4. 实例题(根据盒模型解释边距重叠)父元素里包着一个子元素,子元素高100px,margin-top:10px;问父元素高是多少?给兄弟盒子设置一个是margin-top,一个是margin-bottom时会出现重叠,取较大的那个margin值
  5. BFC(边距重叠解决方案)IFC,BFC的基本概念,BFC的基本原理如何创建BFC ?BFC使用场景?  1)基本概念:块级格式化上下文。             2)BFC原理:渲染规则,a、垂直方向的边距会重叠。b、BFC区域不会与浮动的box重叠。c、BFC是一个独立的容器,BFC区域不会影响外面的元素外面的元素也不会影响里边的元素。d、计算BFC高度的时候浮动元素也会参与计算               3)创建BFC:a、overflow:hidden。 b、float:none。c、设置position:absolute。d、insplement属性。             4)使用场景:a、边距重叠。b、浮动元素重叠。c、清楚浮动。

         

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告