什么叫 CSS 盒模型?哪种情况下会有外边距伸缩?

本文带大家了解一下CSS 盒模型，介绍一下什么叫外边距伸缩？哪种情况下会有外边距伸缩？并谈一谈解决方案。

在 CSS 中，每一个原素都已经被一个个的 “小盒子（box）” 包围着，大家普遍地应用二种“小盒子” —— 块级小盒子 (block box) 和 内联小盒子 (inline box)。

什么叫 CSS 盒模型？

在 CSS 中，盒模型（box model）要在设计与合理布局时进行。

盒模型的概念可以分成这几个一部分：

• Content box: 该区域就是用来表明具体内容，尺寸能够可设置 width 和 height.
• Padding box: 包围着在内容地区外部空缺地区； 尺寸根据 padding 有关特性设定。
• Border box: 包囊内容与内边距。尺寸根据 border 有关特性设定。
• Margin box: 这是很外边的地区，是小盒子和其它原素中间的空白地区。尺寸根据 margin 有关特性设定。

块级小盒子全面地运用了 CSS 盒模型，内联小盒子只使用盒模型中界定的一些内容。

box-sizing

box-sizing 属性定义了电脑浏览器应当怎么计算一个元素总宽度和总相对高度。

• content-box（初始值），即规范盒模型，width: 100px 是指具体内容区会出现 100px 宽。
  • 纸盒的尺寸 = content(100px) padding border
• border-box，即取代（IE）盒模型，width: 100px 是指 具体内容区 外框 内边距 之和是 100px 宽。
  • 纸盒的尺寸 = content padding border = 100px

无论那类实体模型，margin 全是不纳入具体尺寸 —— 自然，他会危害小盒子在网页页面所占用空间，可是危害是指小盒子外部空间。

display

这儿可以促进一个概念 -- 内部结构外部表明种类。

• 外界表明种类，我们可以通过对小盒子 display 属性设定，例如 inline 或是 block ，来调节纸盒的是内联或是块级。
• 内部结构表明种类，它取决于小盒子内部结构原素是如何规划的。

假如设定 display: flex，在一个元素上，外界表明类型是 block，可是内部结构表明种类调整为 flex。 该纸盒的全部立即子元素都将成为 flex 原素，会依据 弹性盒子（Flexbox ）标准进行布局。

还有一个特殊值 -- display: inline-block，他在内联和块中间提供了一个中间状态。这对以下情形非常有利:不出现自动换行，但能设置总宽和高度，换句话说完成了块级的那一部分实际效果：

• 设定 width 和 height 特性会起效。
• padding, margin, 及其 border 会拉开别的原素。

行内元素 / 块级元素

HTML4 中，原素被分为两类: inline (内联元素) 与 block (块级元素)。

1. 什么叫行内元素？

一个行内元素只占有它相匹配标签的外框包含的空间。

比较常见的行内元素有 a、 b、 span、 img、 strong、 sub sup、 button、 input、 label、 select、 textarea

2. 什么叫块级元素？

块级元素占有父亲原素（器皿）的整个房间，因而创建了一个“块”。一般电脑浏览器会到块级元素前后左右另起一个新型。

比较常见的块级元素有 div、ul 、ol、 li、 dl、 dt、 dd、 h1、 h2、 h3、h4 、 h5、h6 、p

3. 差别？

• 文件格式上（默认设置状况），行内元素不容易自动换行，而块级元素都是会自动换行。

• 内容和形式（默认设置状况），行内元素只有包括数据与别的行内元素。而块级元素能够包括行内元素和其它块级元素。

• 在特性上：

  • 行内元素
    • width 和 height 设定失效（能设 line-height)，
    • 内边距（padding）、外边距（margin） 和 外框（border） 在 左右方位 也不会对别的原素造成影响。
  • 块级元素
    • width 和 height 特性能够充分发挥，
    • 内边距（padding）、外边距（margin） 和 外框（border） 会把别的原素从目前原素周边“拉开”

外边距（margin）伸缩

块上外边距(margin-top)及下外边距(margin-bottom)有时候合拼(伸缩)为单独间距，其尺寸为单独间距的最高值(或假如他们相同，则仅是其中一个)，这种做法称之为 间距伸缩。

什么原因才出现

2 个或几个紧邻的一般流中的块元素竖直方向上的 margin 会伸缩

• 紧邻： 就是指没被非空具体内容、padding、border 或 clear 分分隔
• 竖直方向： 就是指仅有竖直方向的 margin 才能

怎样解决？

• 创立了 BFC 元素 和它子元素/哥们原素不会产生伸缩

• 设定 padding / border ，一些实际的画面：

  • 父元素的 margin-top 和子元素的 margin-top 产生重合。

    产生重合是由于它们都是邻近的，所以我们可以根据这一点来解决这个问题。我们能为父元素设 border-top、padding-top 值来隔开他们。

  • 高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 产生重合。

    产生重合一个是由于他们相 邻，一个是由于父元素高度不规律。所以我们能够为父元素设定 border-bottom、 padding-bottom 来隔开他们，还可以为父元素设置一个相对高度，max-height 和 min-height 也可以解决这些问题。

  • 是无内容元素，自已的 margin-top 和 margin-bottom 所发生的重合。

    我们通过向其设定 border、padding 或是相对高度来解决这个问题。

开启 BFC 的影响因素

• float（除开 none）
• overflow（除开 visible）
• display（table-cell / table-caption / inline-block）
• position（除开 static / relative）

大量程序编写基本知识，请访问：编程视频！！

以上就是关于什么叫外边距伸缩？哪种情况下发生？如何解决？的具体内容，大量欢迎关注AdminJS其他类似文章！