今天同学发给了我一份前端基础的面试题, 第一道便是对 CSS 盒子模型的理解, 我看到的第一眼想到的是 div, 然后就... 懵逼了, 知其然不知其所以然. 所以打算写一写盒子模型的概念理解啥的, 如有写的不当的地方, 望指正见谅!
1,css3 盒子模型
个人的理解是页面上所有的 html 元素都可以看作是盒子, 即整个 HTML 页面就是由无数个盒子通过特定的布局结合在一起的, 每个盒子包括内容(content), 内边距(padding), 边框(border), 外边距(margin).
(一般来说 margin 有两种形式, 一种是盒子与浏览器窗口的外边距, 还有一种是盒子与相邻盒子的外边距)
2, 关于盒子的宽高的问题
标准盒子模型, 也就是咋们的大哥 W3C 规定的盒子模型, 这种情况下: CSS 中定义的宽高 = 盒子实际内容 (content) 的宽高, 盒子的总宽高 = CSS 定义的宽高 + padding + border + margin(注意计算时左右和上下的 padding,margin 都是两个)
如下定义了一个盒子, CSS 代码和 HTML 代码如下:
- #box{
- width: 200px;
- height: 200px;
- margin: 10px;
- padding: 10px;
- border: solid red;/* border 默认宽度是 3px 所以没写直接 3px 了 */
- }
- <div id="box">
我是一个盒子
</div>
在浏览器开发工具下的截图如下:
从图中可以看出: 蓝色部分 (200*200 ) 是盒子的 content, 绿色的是 padding, 黄色的是 border, 深黄色是 margin
但在 IE 浏览器中盒子的宽高计算方式会不一样:
IE 盒子模型也叫怪异盒模型
在该模式下, 浏览器的 width 属性不是内容的宽度, 而是内容, 内边距和边框的宽度的总和; 即在怪异模式下的盒模型, 盒子的 (content) 宽度 + 内边距 padding + 边框 border 宽度 = 我们设置的 width(height 也是如此), 盒子总宽度 / 高度 = width/height + margin = 内容区宽度 / 高度 + padding + border + margin.
写到最后就有点想要放弃了, 望路过的大佬见谅! 凑合看吧~
来源: https://www.cnblogs.com/liduh/p/10590952.html