前端简单实现海贼王人物展示栏-运用border-box怪异盒模型

最新推荐文章于 2022-11-21 15:43:16 发布

星空0107

最新推荐文章于 2022-11-21 15:43:16 发布

阅读量207

点赞数 1

分类专栏： IE盒模型文章标签：前端

本文链接：https://blog.csdn.net/weixin_52263227/article/details/121122484

版权

之前复习面试题的时候遇到盒模型的题目，CSS3中盒模型包含两种:标准盒模型与 IE盒模型

其中IE盒模型（怪异盒模型）的width与height范围则包含了 border,padding与content

可以通过修改元素的boxzing属性来改变元素的盒模型

box-sizeing: border-box IE盒模型

首先用代码简单实现一下box-sizeing: border-box IE盒模型

首先简单创建一个宽高皆为100px的div盒子

    <style>
        .text {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 200px auto;
            border: 50px solid red;
        }
    </style>

<body>
    <div class="text">
    </div>
</body>

然后通过修改元素的boxzing属性来改变元素的盒模型，使其成为怪异盒模型，观察盒子的变化

最低0.47元/天解锁文章

星空0107

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端简单实现海贼王人物展示栏-运用border-box怪异盒模型

之前复习面试题的时候遇到盒模型的题目，CSS3中盒模型包含两种:标准盒模型与 IE盒模型其中IE盒模型（怪异盒模型）的width与height范围则包含了 border,padding与content 可以通过修改元素的boxzing属性来改变元素的盒模型 box-sizeing: border-box IE盒模型首先用代码简单实现一下box-sizeing: border-box IE盒模型首先简单创建一个宽高皆为200px的div盒子...
复制链接

扫一扫