CSS 盒模型
Posted 黑木令
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 盒模型相关的知识，希望对你有一定的参考价值。
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端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 计算设置(注意: padding-box已被移除) )
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css 盒模型</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.w_nor-box {
display: inline-block;
box-sizing: content-box;
width: 500px;
height: 200px;
line-height: 200px;
background-color: aqua;
padding: 20px;
border: 3px solid red;
margin: 10px;
}
#w_ie-box {
display: inline-block;
box-sizing: border-box;
width: 700px;
height: 200px;
line-height: 200px;
background-color: royalblue;
padding: 20px;
border: 3px solid yellowgreen;
margin: 10px;
}
.w_pad-box {
display: inline-block;
box-sizing: padding-box !important;
-moz-box-sizing: padding-box !important;
-webkit-box-sizing: padding-box !important;
width: 900px;
height: 200px;
line-height: 200px;
background-color: skyblue;
padding: 20px;
border: 3px solid red;
margin: 20px;
}
</style>
<body>
<div>
<p class="w_nor-box">1. 标准盒模型: box-sizing: content-box (W3C / 默认模式) 。</p>
<p id="w_ie-box">2. IE的盒模型: box-sizing: border-box (IE / 怪异模式) 。</p>
<p class="w_pad-box" style="box-sizing: padding-box !important;">3. 特殊盒模型: box-sizing: padding-box (padding 计算设置) 。</p>
</div>
</body>
<script>
// 获取 标准盒模型 宽高打印结果
let norBox = document.getElementsByClassName("w_nor-box")[0]
console.log("标准盒模型 高 : ", window.getComputedStyle(norBox).height, "标准盒模型 宽 : ", window.getComputedStyle(norBox).width)
// 获取 IE的盒模型 宽高打印结果
let ieBox = document.getElementById("w_ie-box")
console.log("IE的盒模型 高 : ", window.getComputedStyle(ieBox).height, "IE的盒模型 宽 : ", window.getComputedStyle(ieBox).width)
// 获取 特殊盒模型 宽高打印结果
let padBox = document.getElementsByClassName("w_pad-box")[0]
console.log("特殊盒模型 高 : ", window.getComputedStyle(padBox).height, "特殊盒模型 宽 : ", window.getComputedStyle(padBox).width)
</script>
</html>
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 。
图片示例:
如果对你有所帮助，大家喜欢点个关注或者给个赞；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。
以上是关于CSS 盒模型的主要内容，如果未能解决你的问题，请参考以下文章