前端面试必备的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代码如下:

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

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

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

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

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

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
随笔日记

模仿实现主流网页

2020-11-9 3:58:58

随笔日记

banner | what is the \"banner\" ?

2020-11-9 3:59:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索