Html-标准盒子模型和怪异盒子模型

最新推荐文章于 2024-03-23 23:22:28 发布

可可鸭~

最新推荐文章于 2024-03-23 23:22:28 发布

阅读量1.5k

点赞数 1

分类专栏： html 文章标签：动画 css3 css html5

本文链接：https://blog.csdn.net/qq_43547255/article/details/121363352

版权

html 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

Html-盒子模型

一、概念篇

标准盒子模型css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，而且，每个框影响着其他元素框的位置和大小。
盒子模型包含了 元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。

标准盒子模型：

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)；
在这里插入图片描述

IE 盒子模型：

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

怪异模式下，一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding)；
在这里插入图片描述

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

CSS3 box-sizing
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的> 值。

<!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>Document</title>
  </head>
  <style>
    .d1 {
      width: 100px;
      height: 100px;
      padding: 50px;
      border: 30px solid #ccc;
      margin: 100px;
      background-color: pink;
      /* 默认值content-box 
      当内容是固定的就用content-box
      希望整个盒子大小是固定的不会因为设置了内边距设置大小而撑开
      */
      box-sizing: content-box;
    }
    .d2 {
    box-sizing: border-box;
      width: 100px;
      height: 100px;
      padding: 50px;
      border: 30px solid #ccc;
      margin: 100px;
      background-color: rgb(105, 209, 136);
    }
  </style>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
  </body>
</html>

效果图

可可鸭~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html-标准盒子模型和怪异盒子模型

Html-盒子模型一、概念篇标准盒子模型css盒子模型又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，而且，每个框影响着其他元素框的位置和大小。盒子模型包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。标准盒子模型：标准 W3C 盒子模型的范围包括 margin、bo
复制链接

扫一扫