关于前端:jsliang-求职系列-41-盒子模型

32次阅读

共计 2521 个字符，预计需要花费 7 分钟才能阅读完成。

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三举例
四题目
4.1 题目 1：简略形容下盒子模型
4.2 题目 2：计算理论 margin 和 padding

返回目录

CSS 盒子模型分为规范盒子和怪异盒子。

那么规范盒子和怪异盒子的 width、padding、border 以及 margin 是如何相处的呢？

如何设置一个块为规范盒子或者怪异盒子呢？

上面咱们一一解说。

返回目录

已知有代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> 盒子模型 </title>
  <style>
    div {
      background: deepskyblue;

      /* 怪异盒子：100 */
      /* box-sizing: border-box;  */

      /* 规范盒子：140 */
      box-sizing: content-box;

      width: 100px;
      padding: 10px;
      border: 10px solid #ccc;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div> 盒子模型 </div>
</body>
</html>

此刻它在 W3C 规范（规范盒子）下展现为：

在 IE（怪异盒子）下展现为：

假如咱们编写 JS 脚本如下：

const div = document.querySelector('div');

// 如果写在行内，能够获取 100px，以后打印为空
//（规范盒子和怪异盒子雷同，留神带单位的）console.log(div.style.width); // 100px || ''

// 规范盒子：140；怪异盒子：100;（不带单位的）console.log(div.offsetWidth); // 100 || 140

对于 JavaScript 获取 HTML 元素的理论宽度高度：

#div.style.width：这种办法只有在款式写在行内的时候，能力获取到宽度，并且是带单位的：100px。如果不是行内款式，那么获取到的是空的。
#div.offsetWidth：这种办法看盒子模式，如果是 IE 模式的怪异盒子，那么获取到 100（border-box）；如果是 W3C 的规范盒子（content-box），那么获取到 140。留神是不带单位的。

返回目录

小收集几道题。

返回目录

请简略形容下盒子模型？

考查内容：盒子模型

答：

CSS 盒子模型分为规范盒子和怪异盒子。
规范盒子的 contentWidth 等于设置的 width，它的 理论总宽度 = width + padding + border + margin。（高度也一样）
怪异盒子的 contentWidth 等于设置的 width + padding + border，它的 理论总宽度 = contentWidth + margin。（高度也一样）
倡议在页面初始化的时候，设置全局 CSS 属性 box-sizing，统一标准。
- inherit – 继承父元素的值
- content-box – 指定盒子为 W3C（规范盒子）
- border-box – 指定为 IE（怪异盒子）。

返回目录

怪异盒子（border-box）下宽度为 100px，高度为 200px，设置它的 padding 和 margin 为 20%，请问它的 padding 和 margin 理论为多少？

<style>
  div {
    box-sizing: border-box;

    width: 100px;
    height: 200px;
    padding: 20%;
    border: 10px solid #ccc;
    margin: 20%;
  }
</style>

<body>
  <div> 怪异盒子 </div>
</body>

考查内容：盒子模型 + CSS 百分比

答：

开放式题目，有坑，百分比设置是绝对于上一个块元素来说的。

假如 body 下有一个 div，那么这个 div 设置百分占比就是找它上一个 display: block/inline-block 元素，即 body 的宽度（默认 100%）。

所以这时候须要得悉 body 在浏览器中显示的理论宽度，才能够计算出 div 的 padding 和 margin。

所以这道题跟盒子模型无关的！

既然这样，咱们改下题目，假如：

<style>
.div {
  background: deepskyblue;

  /* 怪异盒子 */
  box-sizing: border-box;

  /* 规范盒子 */
  /* box-sizing: content-box; */

  width: 100px;
  height: 200px;
  padding: 20%;
  border: 10px solid #ccc;
  margin: 20%;
}
</style>

<div style="display: inline-block">
 <div class="div">
   盒子模型
 </div>
</div>

请问怪异盒子和规范盒子下它的 padding 和 margin 是多少？

怪异盒子

此时父元素（第一个盒子）没有宽度，会被它的子元素撑宽，所以父元素的宽度是 100px。（这个宽度就跟怪异盒子无关，100px 是 .div 盒子的宽度）
父元素的 20% = 100 * 20% = 20px。
所以此时它的 padding 和 margin 是 20px。

规范盒子

此时父元素被子元素撑宽，父元素的宽度是 120px（规范盒子下，120px 是 .div 盒子的 width + 两个 border）
父元素的 20% = 120 * 20% = 24px。
所以此时它的 padding 和 margin 是 24px。

那么高度呢？请计算一下！

jsliang 的文档库由梁峻荣采纳常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。

正文完