经典css题面试(一)—— 请说说你对css盒模型的理解

前言:CSS盒模型简介

在网页开发中,CSS 盒模型是一个重要的概念,它描述了网页中的元素是如何被呈现和布局的。每个元素被看作一个矩形盒子,这个盒子由内容区域、内边距、边框和外边距组成。

1. 它是什么?

浏览器在渲染页面时将所有元素视为矩形盒子,每个盒子包含以下四部分:

  • 内容区域(content):元素内部实际显示的内容,比如文本、图片等。
  • 内边距(padding):内容区域与边框之间的空间。
  • 边框(border):定义内容区域的边界。
  • 外边距(margin):盒子与其他元素之间的空间。

2. 标准盒模型

在标准盒模型下,盒子总宽度计算公式为:width + padding + border + margin

这里的 width 指的是内容区域的宽度,padding 是内边距的宽度,border 是边框的宽度,margin 是外边距的宽度。

3. 怪异盒模型(IE)

在怪异盒模型下(IE 盒模型),盒子总宽度计算公式为: width + margin

这里的 width 包含内容区域、内边距和边框的宽度(width = content + padding + border),而内边距和边框的宽度会被包含在 width 中,不会额外增加盒子的宽度。 简单来说就是怪异盒子模型中增加 padding + border 是在width里面缩占,而width并不改变。

俩种盒模型html实例:
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 300px;
      height: 300px;
      padding: 10px;
      margin: 20px;
      border: 5px solid #000;
      /* box-sizing: content-box;  */
      /* 要求浏览器以标准盒模型来加载容器,若不写则默认为标准盒模型 */
      box-sizing: border-box;
      /* 要求浏览器以IE盒模型来加载容器 */
    }
  </style>
</head>
<body>
  <div class="box">盒子模型</div>
</body>
</html>
标准盒子模型:
怪异盒子模型:

由上图可知,我们设置了宽度为 300px,内边距为 20px,边框为 5px ,外边距为 20px。根据标准盒模型,这个盒子的总宽度将会是 370px(300px + 10px * 2 + 5px * 2 + 20px * 2)。而在怪异盒模型下(IE 盒模型),这个盒子的总宽度将仅为 340px(300px + 20px * 2)。

因为浏览器将盒子的宽度计算为内容区域、内边距和边框的宽度之和,而外边距则是在盒子宽度之外进行定位,所以浏览器上显示的宽度并没有计算外边距margin。

4. 总结

  1. 标准盒模型:

    • 在大多数现代浏览器中使用,包括 Chrome、Firefox、Safari 等。
    • 在标准盒模型中,一个元素的宽度属性(width)指定的是内容区域的宽度,而不包括内边距(padding)和边框(border)。
    • 标准盒模型更符合直觉,便于进行网页布局和设计。它使得元素的尺寸和位置更容易控制和计算。
  2. 怪异盒模型(IE 盒模型):

    • 早期的 Internet Explorer 浏览器采用的是怪异盒模型。
    • 在怪异盒模型中,一个元素的宽度属性(width)包括了内容区域、内边距和边框的宽度,导致了在进行布局计算时需要做一些额外的调整。
    • 怪异盒模型在一些特定场景下可能会导致布局上的问题,但如果你需要兼容旧版 IE 浏览器,可能仍然需要考虑怪异盒模型。

一般来说,现代的网页设计和布局通常会使用标准盒模型,因为它更直观、易于控制,并且得到了主流浏览器的支持。如果你需要在旧版的 IE 浏览器中进行兼容性处理,那么可能需要考虑怪异盒模型。总的来说,对于大多数现代网页设计和布局项目,标准盒模型是首选。

相关推荐
码事漫谈19 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER39 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
聪明的笨猪猪1 小时前
Java Redis “缓存设计”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
聪明的笨猪猪2 小时前
Java Redis “运维”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试