标准盒模型与怪异盒模型的区别

一. 清除浮动的方式。使用overflow属性来清除浮动 (overflow: hidden)二. visibility: hidden 与 display: none 的区别。三. 谷歌浏览器的盒子与IE浏览器的盒子区别。四. 让盒子垂直水平居中的方式。

俊小赞

12163人浏览 · 2020-12-24 12:19:45

俊小赞 · 2020-12-24 12:19:45 发布

文章目录

前言
一、标准盒模型
二、怪异盒模型
三、css样式
四、测试代码
总结

前言

盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。它允许我们在其它元素和周围元素边框之间的空间放置元素。
目前盒模型主要分为两大门派：标准盒模型和怪异盒模型。其中早期的怪异盒模型是存在于IE内核浏览器。

一、标准盒模型

标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。
标准盒大小计算公式：width(content) + padding + border + margin

在这里插入图片描述

二、怪异盒模型

怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。
怪异盒大小的计算公式：width(content + padding + border) + margin

在这里插入图片描述

三、css样式

在 css3 中添加了对盒模型设置的属性 box-sizing，可以根据需要自由调整。浏览器支持：IE8+

float 常用属性值

属性值	描述
content-box	默认值，盒子宽度高度等于content（标准盒模型）。
border-box	盒子宽度高度等于content + padding + border（怪异盒模型）。
padding-box	盒子宽度高度等于content + padding。
inherit	从父元素中继承 box-sizing 属性的值。

四、测试代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        padding: 20px;
        width: 80px;
        height: 40px;
        border: 10px solid #00007e;
        background: #fec997;
        box-sizing: border-box /* 设置盒子类型 */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>