CSS 盒模型

最新推荐文章于 2021-07-08 16:58:18 发布

黑木令

最新推荐文章于 2021-07-08 16:58:18 发布

阅读量6.7k

点赞数 3

分类专栏：前端 css 文章标签：前端 css css3

本文链接：https://blog.csdn.net/wuzhiyue2/article/details/118155904

版权

前端 css 专栏收录该内容

19 篇文章 6 订阅

订阅专栏

之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是前端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 。

图片示例:

在这里插入图片描述

如果对你有所帮助，大家喜欢点个关注或者给个赞；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

黑木令

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 盒模型

之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是前端CSS 相关的内容; 不积跬步，无以至千里, 戒焦戒躁。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。主题: css 盒模型的介绍及区别1. 什么是盒模型1. 每个 HTML 元素都可以叫做盒模型。2. 盒模型由外而内包括: 1. 边距(
复制链接

扫一扫