面试准备盒模型

CSS盒模型（理论转化应用）

题目：谈谈对css盒模型的认识

基本概念：标准模型和 IE模型

区别：计算高度和宽度的不同（理论）

标准：content IE：计算border 和padding

css如何设置两种模型：

box-sizing: content-box(默认)

box-sizing: border-box

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

dom.style.width/height ( 获取内联样式的宽高)

dom.currentStyle.width/height （获取已经渲染到页面的）！只有ie支持

window.getComputedStyle(dom).width/height 和第二个作用一样但是兼容更好

解释边距重叠：(原本存在 margin的重叠，塌陷，以大为准)

//兄弟元素以最大值为准

//空元素会以最大值为边距

//父子元素 (父元素不设置高度的情况下，以子元素content为高度，他俩的margin重叠，以大的为准)

要想父元素完全包裹子元素，就需要为父元素设置BFC

解决边距重叠的方案：BFC

1.BFC概念：块级格式化上下文

详细：BFC ： block-formatting-context

formatting context 是css 2.1中的一个概念。是页面中一块渲染区域。并且有一套渲染规则

决定了其子元素如何定位，以及和其他元素的关系，相互作用。常见的有BFC IFC

css3 新增了GFC（网格g ri d） FFC（flex）

定义：块级格式化上下文，是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素

如何布局，并且与这个区域外部毫不相干

2.BFC原理（渲染规则）（约束规则）

1.BFC元素解决垂直方向边距重叠
5 内部会垂直方向一个接一个放box。垂直方向距离由margin决定且相邻box有边距重叠
2.不会与浮动元素的box重叠 // 浮动元素高度变化的时候会被其他侵占
3.独立的容器，外内互不影响
4.计算bfc高度浮动元素也算在内。//普通元素。子元素浮动元素的时候父元素高度计算不会计算浮动元素。

3.创建BFC

1.float值不为none

2.position值不为relative static

3display属性inline-block table相关

4 overflow：auto hidden 不为visible（）

IFC内联格式化上下文

边距解决方案 IFC BFC：

4.使用场景（布局中的应用）

1.防止margin重叠

>>>适用场景：两个相邻Box垂直方向margin重叠

方法一：元素设置一个父元素然后父元素创建BFC（推荐用法）

方法二：也可以为其中一个元素设置BFC 用display：inline-block（overflow无效）

>>>适用场景：嵌套元素的margin重叠

  <div class="first"></div>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

  </ul>

解决：要阻止嵌套元素的margin重叠，只需让ul生成BFC即可（将上例中的注释去掉），这样div、ul、li之间便不会发生重叠现象。

而li位于同一BFC内所以仍然存在重叠现象

给li设置line-block重新生成一个bfc就不存在重叠现象了

清除浮动

>>>适用场景 清除内部浮动

<style>

    .par {

        border: 5px solid #fcc;

        width: 300px;

    }

 

    .child {

        border: 5px solid #f66;

        width:100px;

        height: 100px;

        float: left;

    }

</style>

<body>

    <div class="par">

        <div class="child"></div>

        <div class="child"></div>

    </div>

</body>

原理：计算BFC的高度时，浮动元素也参与计算

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

.par {

overflow: hidden;

}

BFC元素不和float元素重叠

>>>自适应多栏布局

自适应两栏布局

布局时候：BFC元素不和float元素重叠

左侧固定float 右侧设置BFC

自适应三栏布局，左右固定中间自适应

<!DOCTYPE html>

<html> 

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <!--The viewport meta tag is used to improve the presentation and behavior of the samples

    on iOS devices-->

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

  <title></title>

 

  <style>

    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    .left{

      background:pink;

      float: left;

      width:180px;

    }

    .center{

      background:lightyellow;

      overflow:hidden;

     

    }

    .right{

      background: lightblue;

      width:180px;

      float:right;

    }

  </style>

</head>

<body class="claro">

  <div class="container">

    <div class="left">

      <pre>

  .left{

    background:pink;

    float: left;

    width:180px;

  }

      </pre>

    </div>

    <div class="right">

       <pre>

  .right{

    background:lightblue;

    width:180px;

    float:right;

  }

      </pre>

    </div>

    <div class="center">

    <pre>

  .center{

    background:lightyellow;

    overflow:hidden;

    height:116px;

  }

      </pre>

    </div>

  </div>

 

</html>

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，

当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

posted @ 2019-11-29 21:31 容忍君阅读(261) 评论(0) 收藏举报

刷新页面返回顶部

容忍君

面试准备 盒模型