所谓盒子模型就是把 html 页面的元素看作一个矩形盒子, 也将就是盛装内容的容器, 每个矩形都是元素的内容, 内边距 (padding), 边框(border), 和外边距(margin) 组成.
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
盒模型是有两种标准的, 一个是标准模型, 一个是 IE 模型.
从上面两图不难看出在标准模型中, 盒模型的宽高只是内容 (content) 的宽高,
而在 IE 模型中盒模型的宽高是内容 (content)+ 填充(padding)+ 边框(border) 的总宽高.
CSS 如何设置两种模型
这里用到了 CSS3 的属性 box-sizing
- /* 标准模型 */
- box-sizing:content-box;
- /*IE 模型 */
- box-sizing:border-box;
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14378.html