【Web前端实操06】实现一个怪异盒子模型

墨倾许

已于 2024-01-24 11:38:47 修改

阅读量406

点赞数 8

分类专栏： Web前端实操文章标签：前端 css html

于 2024-01-17 06:00:00 首次发布

本文链接：https://blog.csdn.net/qq_45498824/article/details/135637390

版权

Web前端实操专栏收录该内容

22 篇文章 0 订阅

订阅专栏

怪异盒子又称为IE盒子，在这种模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin

从实现的效果可以看出来，其宽度并不会跟随内容的宽度而进行扩展，而是会有溢出。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>怪异盒模型(IE盒子模型)</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 2px dotted red;
            margin: 2px;
        }
    </style>
</head>
<body>
   <div>
    在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；
    <br>即在怪异模式下的盒模型，盒子的<br>
    （content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)
    <br>盒子总宽度/高度=width/height + margin
   </div>
    
</body>
</html>

实现效果：

墨倾许

关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【Web前端实操06】实现一个怪异盒子模型

怪异盒子又称为IE盒子，在这种模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，从实现的效果可以看出来，其宽度并不会跟随内容的宽度而进行扩展，而是会有溢出。
复制链接

扫一扫

专栏目录