CSS盒模型

1.CSS盒模型有哪几种，基本概念是什么？

所有的HTML元素都可以看做一个盒子，盒模型的概念在设计和布局使用。盒模型由以下几部分组成：

①外边距 margin

②边框 border

③内边距 padding

④实质内容 content

有两种盒模型：分别是标准盒模型(又名W3C盒模型)、IE盒模型

 

 

2.标准盒模型和IE盒模型有什么区别？

采用标准盒模型，CSS的width实质就是content.width

采用IE盒模型，CSS的width实质就是 content.width + padding + border

如下图：

 

给定一个html元素

.box-model {
  width: 200px;
  height: 100px;
  padding: 10px 20px;
  margin: 10px 20px;
  border: 10px solid #ccc;
  background: pink;
}

（浏览器默认使用标准模型）

当元素采用标准盒模型，元素所占空间大小如下

宽：200+20*2+20*2+10*2 = 300

高：100+10*2+10*2+10*2 = 160

当元素采用IE盒模型，元素所占空间大小如下

宽：200+20*2=240

高：100+10*2=120

 

 

3.CSS如何设置这两种盒模型？

IE盒模型 box-sizing: border-box;

标准盒模型 box-sizing: content-box; // 这个是默认值

 

 

4.JS如何获取盒模型对应的宽和高？

dom.style.width/height // 只能取内联样式

dom.currentStyle.width/height // 只有IE支持

window.getComputedStyle(dom).width/height // 兼容Firefox/Chrome

dom.getBoundingClientRect().width/height // 通常用于获取元素在视窗上的绝对位置，width返回的是元素实质所占的宽度，不包括margin

 

 

扩展知识：dom.getBoundingClientRect()的返回值如下，表示元素距离视口的绝对位置

 

 

5.如何解决边距(margin)重叠问题

边距重叠是指两个盒子(父子或兄弟之间)的相邻边界重合在一起而形成一个单一边界。

发生边距重叠的常见场景：

（1）两个相邻元素的下边距和上边距

（2）父元素与子元素发生边距折叠

（3）空的块级元素的上下边距

不会发生重叠的情况：

（1）水平边距不会重叠

（2）相邻的盒模型中，如果其中一个是float，垂直margin不会重叠，并且浮动的盒模型和它的子元素也一样

（3）设置overflow属性的元素和它的子元素不会重叠（overflow：visible除外）

（4）设置绝对定位的盒模型（相邻/父子）

（5）设置display:inline-block的元素（相邻/父子）

外边距重叠的意义：

外边距重叠只产生在普通文档流的上下边距之间。外边距重叠，盒子之间就不会产生双倍的距离。

防止外边距重叠的解决方法：

1 外层元素padding代替；

2 内层元素透明边框border:1px solid transparent;

3 内层元素绝对定位position:absolute;

4 外层元素overflow:hidden;

5 内层元素float:left; display:inline-block;

6 内层元素 padding:1px;