盒模型介绍

最新推荐文章于 2024-07-27 09:56:28 发布

@码农小洲

最新推荐文章于 2024-07-27 09:56:28 发布

阅读量337

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/m0_56546994/article/details/120186819

版权

本文介绍了HTML盒子模型，包括内容、内边距、边框和外边距四个部分，并详细阐述了标准模式和怪异模式下盒子模型的区别。标准模式下，元素总宽度等于内容宽度加上边距和边框；而在怪异模式下，宽度已包含边距和边框。转换模式可通过CSS的box-sizing属性实现。此外，文章还提及了使用JavaScript获取盒模型属性的方法。

摘要由CSDN通过智能技术生成

1. 什么是盒子模型？

把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。

下面的图片说明了盒子模型(Box Model)：

Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.盒子模型有哪两种

标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异模式下：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

3. 标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

4. JS盒模型

怎么获取和设置box的内容宽高

IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height


var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);