css 盒模型

主题: css 盒模型的介绍及区别

1. 什么是盒模型

   1. 每个 HTML 元素都可以叫做盒模型 。
   2. 盒模型由外而内包括:
     1. 边距(margin), 边框(border), 填充(padding), 内容(content) 。
   3. 它在页面中所占的实际 宽度、高度 是 margin + border + padding + content 的相加 。
   4. 知道盒模型分为: 标准盒模型 / IE盒模型 / 特殊盒模型 。

---

2. 盒模型设置方法

   1. 标准盒模型: box-sizing: content-box (W3C / 默认模式)
   2. IE的盒模型: box-sizing: border-box (IE / 怪异模式)
   3. 特殊盒模型: box-sizing: padding-box (padding 计算设置)

---

3. 标准盒模型、IE的盒模型、特殊盒模型, 三者之间的区别:

   1. 不同之处就是内容的大小, 即 宽度 width 和 高度 height 的不同 。
   2. 宽度和高度哪里不同:
     1. content-box(标准盒模型): 这是默认样式指定 CSS 标准 。 计算 width 和 height 属性只包括内容 content, 但不包含 border、margin、padding 。
     2. border-box(IE的盒模型): IE盒模型(怪异盒模型) 的则是 content + padding + border 总的大小; width 和 height 属性包含 content、padding、border, 但不包含 margin 。
     3. padding-box(特殊盒模型): width 和 height 属性包括 padding 的大小, 不包括 border、margin, 即 padding + content 。

---

4. JS 如何设置和获取对应盒模型的宽度和高度

   1. 方法一: dom.style.width / dom.style.height
     1. 这种方法, 我们只能获取到内联样式中我们定义的宽和高, 使用 link 外联引入的样式, 是无法获取的到的 。

   2. 方法二: dom.currentStyle.width / dom.currentStyle.height
     1. 这个属性只有 IE 支持, 它是可以获取到浏览器渲染过后的真实的宽和高 。

   3. 方法三: window.getComputedStyle(dom).width / window.getComputedStyle(dom).height
     1. 这个可以在 IE 、火狐 、 谷歌 浏览器中使用 。

   4. 方法四: dom.getBoundingClientRect().width / dom.getBoundingClientRect().height
     1. 它也可以拿到一个元素的宽和高, 它也是及时运行完以后的 。
     2. 它是用来计算一个元素的绝对位置的, 它是根据视窗即: vierport, 左上角; 它可以拿到四个值, top、left、width、height

---

希望对大家有所帮助，如有问题还望不吝赐教，本人会及时更改；如果大家喜欢可以点个关注(如需转载，请注明出处)。