CSS 盒模型

EmmaLee
175 阅读3分钟

盒模型的基本概念

盒模型又称框模型，其包含的元素从外到内有margin（外边距） border（边框） padding（内边距） 和 content（内容）

盒模型的分类

盒模型一般分成两种模型：IE盒模型和W3C盒模型(边框盒和内容盒)，两者区别为：

  • W3C盒模型的高度和宽度为内容的高度和宽度（即内容盒 content box）：width = content width

  • IE盒模型的高度和宽度为内容的高度和宽度加上内边距加上边框的高度和宽度（即边框盒 border box）:width = content width + padding+border

后来在css3中引入了box-sizing的属性，允许改变默认的盒模型对元素的宽和高的计算方式：

  1. content-box：宽度和高度为内容的宽度和高度
  2. border-box：包含了border和padding的宽度和高度，在计算宽高的时候会将他们也作为width和height的一部分

margin边框合并问题

margin合并问题指的是当两个垂直的外边距相遇时，两个外边距会出现重合的现象，并且合并后的外边距的值为两个合并的外边距中更大的那个一个。这里面值得注意的有：

  1. margin合并只会发生在垂直方向，即上下位置重合左右位置不会重合
  2. 处于普通文档流的两个或多个块级元素会发生margin合并 具体的情况如下：
  3. 父元素的上外边距与第一个自元素的上外边距重合
.parent{
  border: 3px solid blue; 
  background-color: red;
  margin:20px 0;
}
.child {
  border: 2px solid black;
  height:40px;
  margin: 30px 0;
}

在没有去掉父元素的边框时，父元素的上外边距为20px,第一个子元素的上外边距为30px，上外边距未重合 

.parent{
  border: 3px solid blue; 
  background-color: red;
  margin:20px 0;
}
.child {
  border: 2px solid black;
  height:40px;
  margin: 30px 0;
}

在去掉父元素的边框时，父元素的上外边距为20px，第一个子元素的上外边距为30px，但是两者的上外边距合并了

此情况同样适用于父元素的下外边距和子元素的下外边距

  1. 相邻的子元素之间的外边距合并
.child {
  border: 2px solid black;
  height:40px;
  margin: 30px 0;
}
.firstchild {
  border:2px solid pink;
  margin-bottom:30px;
}

第一个子元素的下外边距和第二个子元素的上外边距合并了，若两者外边距不一样，取最大的那个外边距显示

3. 空元素 ，自己的上外边距会和自己的下外边距合

.secondchild {
 border:3px solid green
/* margin:20px 0; */
}


.secondchild {
 border:3px solid green
 margin:20px 0; 
}

此时第一个子元素和第三个子元素之间外边距距离为30px

margin合并解决办法

  1. 解决父元素和子元素外边框合并问题
  • 在父元素上面加上border或者padding
  • overflow:hidden
  1. 摆脱普通文档流模式
  • position: absolute 或 fixed
  • float
  1. 变成非块级元素 display:inline-block
avatar
文章
阅读
粉丝