css中简介盒模型

原创

咏之随笔 2022-02-27 10:48:03 ©著作权

文章标签 盒模型 css 盒子模型宽高 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者咏之随笔的原创作品，请联系作者获取转载授权，否则将追究法律责任

1. 什么是盒子模型？

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

css中简介盒模型_盒子模型

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盒模型

css中简介盒模型_盒子模型_02

怎么获取和设置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);