前端面试必备的css盒子模型

今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然。所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方,望指正见谅!

1、css3盒子模型

个人的理解是页面上所有的html元素都可以看作是盒子,即整个html页面就是由无数个盒子通过特定的布局结合在一起的,每个盒子包括内容(content)、内边距(padding)、边框(border)、外边距(margin)。

前端面试必备的css盒子模型

(一般来说margin有两种形式,一种是盒子与浏览器窗口的外边距,还有一种是盒子与相邻盒子的外边距)

2、关于盒子的宽高的问题

标准盒子模型,也就是咋们的大哥W3C规定的盒子模型,这种情况下:css中定义的宽高 = 盒子实际内容(content)的宽高,盒子的总宽高 = css定义的宽高 + padding + border + margin(注意计算时左右和上下的padding、margin都是两个)

前端面试必备的css盒子模型

如下定义了一个盒子,css代码和html代码如下:

 #box{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: solid red;/* border默认宽度是3px 所以没写直接3px了*/
}
 <div id="box">
我是一个盒子
</div>

在浏览器开发工具下的截图如下:

前端面试必备的css盒子模型

从图中可以看出:蓝色部分(200*200 )是盒子的content,绿色的是padding,黄色的是border, 深黄色是margin

但在IE浏览器中盒子的宽高计算方式会不一样:

        IE盒子模型也叫怪异盒模型

前端面试必备的css盒子模型

在该模式下,浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和;即在怪异模式下的盒模型,盒子的(content)宽度+内边距padding+边框border宽度=我们设置的width(height也是如此),盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
  写到最后就有点想要放弃了,望路过的大佬见谅!凑合看吧~

上一篇:利用对象思想来绘制canvas帧动画


下一篇:install openjdk & tomcat on the centos