前端常见面试题1-标准盒模型与怪异盒模型

最新推荐文章于 2024-08-26 19:57:53 发布

三千繁华不及你眉眼

最新推荐文章于 2024-08-26 19:57:53 发布

阅读量360

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/lancelote_pc/article/details/105299106

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

标准盒模型和怪异盒模型

1. box-sizing 设置盒模型

content-box 标准盒模型
border-box 怪异盒模型(也叫做IE盒模型)

<style>
    /*box-sizing把标准盒模型设置为怪异盒模型*/
    /*宽度 已经固定好 增加 padding border margin  不会增加盒子的总宽度*/
    /*而是减少content的宽度*/
    #first{
        box-sizing: content-box;
        width: 100px;
        height:100px;
        background-color:red;
        padding: 20px;
        border:2px solid black;
        margin: 10px;
    }
    #second{
        box-sizing: border-box;
        width: 100px;
        height:100px;
        background-color:green;
        border:2px solid black;
        margin:10px;

    }
    .container{
        height:400px;
        width:400px;
        background: lightcoral;
    }
</style>
<body>
<div class="container">
<div id="first">标准盒模型</div>
<div id="second">怪异盒模型</div>
</div>

2.两个模型的不同点

	标准盒模型	怪异盒模型
是否会被撑开	会，增加padding,border会将盒子撑开	不会，增加padding，border只会让content的宽高更小

3. 面试中描述

标准：一个盒子有四个部分从内到外是 content padding border margin，标准盒子模型的宽高指的就是content的宽高

怪异：而怪异盒模型的宽高是 content padding border 三部分的总宽高
width=(content_width)+(padding_width)+(border_width)
一个盒子占用的总宽度，需要将content padding border(注意没有margin) 的宽度相加