盒模型

爱⌒轻易说出口 提交于 2020-03-27 06:39:44

1. box-sizing: 默认取值content-box,width对应内容区content的宽度。

当box-sizing取值为border-box时,给出padding, border后,width对应的是content的宽度+padding(左右)+border(左右)

2. 元素width的单位为%时,是相对于其父元素width的百分比;

*上下方位的padding,margin单位为%,是相对于包含块的width来计算

    包含块:如果元素的position是static(默认值)或者relative【这两种属于常规文档流】, 则包含块的边界计算到最近一个父元素;该元素的display属性必须能够提供类似块级上下文,如:block, inline-block,  table-cell, list-item等。默认情况下,width, height, padding, margin的值为百分比时,以父元素的尺寸为依据。

  • 脱离常规文档流:
  1. position: absolute
  2. 浮动

块级格式化上下文(BFC):

满足以下条件可以创建自己的BFC

  1. position: absolute
  2. display: inline-block, table-cell
  3. float: 不是none
  4. overflow: 不是visible

BFC规则:

  • 自动包含浮动的元素(解决盒子塌陷问题);
  • 所有块级盒子的左边界默认与包含块的左边界对齐(文字方向为从右到左,则与右边界对齐);
  • 当一个元素具备了bfc的条件,且挨着一个浮动元素时,它就会忽略自己的边界必须接触自己的包含块边界的规则,同时该元素自动调整以适应浮动元素旁边的剩余空间,确保挨着浮动元素的一边始终是直的。(取消文字环绕)

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!