阅读 2081

CSS盒子模型

序言

CSS盒子模型算是CSS中最重要的一部分,在开发中遇到难以理解的现象,往往是因为对模型的理解不够。 盒子模型主要有标准模型和IE模型,本文主要讲述:

  • 标准模型基本概念
  • 标准模型与IE模型的区别
  • 边距重叠与BFC
  • 其他

标准模型基本概念

标准模型「默认:box-sizing: content-box」由四部分组成,从内到外依次是:

  • 内容区域「content」:可以放置元素的区域如文本,图像等,一般设置宽高度指的是这个内容的宽高;
  • 内边距区域「padding」:内容与边框之间的距离
  • 边框区域「border」:就是边框
  • 外边距区域「margin」:由外边边距限制,用空白区域扩展边框区域,来分开相邻的元素。

标准模型与IE模型的区别

标准模型指的是设置box-sizing为content-box的盒子模型,一般width,height 指的是content的宽高。 而IE模型指的是box-sizing为border-box的盒子模型。宽高的计算是content+padding+border;

边距重叠与BFC

外边重叠三种情况:

  • 相邻元素之间
  • 父元素与其第一个或最后一个字元素之间
  • 空的块级元素

BFC

BFC的定义:见MDNBFC

BFC的作用:

  • 让浮动内容与周围内容等高 当浮动内容溢出容器的时候,创建容器的BFC,来包裹这个浮动。

  • 外边距蹦陷 当外边距被合并时,创建各自的BFC,来解决问题 父元素与第一个元素上边距合并,创建父元素与第一个元素的各自的BFC

其他

包含块的影响

当我们设置元素的一些属性,譬如:width、height、padding、margin、定位的偏移值「top,left」,常常受到起包含块的影响。

谁是你的包含块

  • position 属性为static,relative 包含块为最近祖先块元素。
  • position 属性为absolute,包含块为不是static的祖先元素,这跟定位差不多。
  • position 为 fixed,包含块就是 viewport,也就是整个屏幕大小

元素的width、padding、margin、定位的偏移值「top,left」百分比是根据包含块的宽度计算

如何画一个自适应宽高的正方形

div{
    width: 100%;
    padding-bottom: 100%;
}
复制代码

因为padding跟width的计算是根据包含块的宽度计算的,而height = content + padding 所以这样能画出一个正方形。

参考

布局与包含块

盒子模型

块格式化上下文

文章分类
前端
文章标签