您的位置: 首页  >  文章  >  CSS盒模型

CSS盒模型

分类: 文章 • 2024-01-27 15:37:34

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

标准模型：
CSS盒模型

  • CSS中的宽（width）= 内容（content）的宽
  • CSS中的高（height）= 内容（content）的高

IE模型：
CSS盒模型

  • CSS中的宽（width）=内容（content）的宽+（border+padding）*2
  • CSS中的高（height）=内容（content）的高+（border+padding）*2

标准模型和IE模型的区别就是它们的宽高不一样，包含也不同

CSS如何设置这两种模型

通过

  • box-sizing : content-box // 标准模型
  • box-sizing : border-box // IE模型

来区分两种模型

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

  1. dom.style.width / height（取不到外链）
    是否能取到所有的宽和高？并不是，只能获得内联属性
    css写法三种：
    1. 内联样式，在html结点直接嵌入
    2. 在head中进行style（取不到）
    3. link引入外部样式（取不到）
  2. dom.currentStyle.width / height
    这种方式取得及时渲染出来的结果，三种CSS写法都可以获取到，但缺点是只有IE支持
  3. window.getComputedStyle(dom).width / height
    兼容了Chrome和firefox的，兼容性更好
  4. dom.getBoundingClientRect().width / height
    使用场所：
    计算盒子的相对于viewport左上顶点绝对距离，
    获取的属性有left, top,width,height
  5. dom.offsetWidth / offsetHeight ，最常用

实例题（根据盒模型解释边距重叠）

什么是边距重叠？
如下图，父元素没有设置margin-top，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距。
CSS盒模型
又如：
兄弟元素：每个都有上边距或下边距，则也会重叠
空元素：margin-top和margin-bottom最大值作为边距

BFC（边距重叠解决方案）

BFC基本概念： 其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

BFC原理：

  1. 内部的box会在垂直方向，一个接一个的放置
  2. 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
  3. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
  4. bfc的区域不会与浮动区域的box重叠
  5. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
  6. 计算bfc高度的时候，浮动元素也会参与计算

如何创建BFC?

  1. float属性不为none（脱离文档流）
  2. position为absolute或fixed
  3. display为inline-block,table-cell,table-caption,flex,inline-flex
  4. overflow不为visible 根元素
  5. 根元素

BFC使用场景？

  1. 自适应两栏布局
  2. 清除浮动 （BFC子元素即使是浮动元素也会参与高度计算）
  3. 防止垂直margin重叠

参考网址：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

相关推荐