CSS盒子模型

1.css盒子模型有哪些？

标准盒子模型    和    IE盒子模型

 

 2.CSS的盒子模型的区别

标准盒子模型： margin ,  border , padding, content

设置宽高就是设置 content 内容区的宽高。如果把padding扩大，content宽高没变的话，不会挤压里面的内容区content。而是撑大盒子。

IE盒子模型：margin , content( content + padding + border)

设置宽高就是设置content( content + padding + border)的宽高.整体宽高没变的话,如果把padding扩大，就会挤压里面的content。

3.CSS的盒子模型的转换

标准盒子模型：box-sizing:content-box;  //标准盒子模型  默认是标准盒子模型

IE盒子模型：box-sizing:border-box; //IE盒子模型 

4.代码验证

    <style>
        .box1{
            background-color: blue;
            width: 200px;
            height: 200px;
            padding: 100px;
            border: 5px solid red;
        }
        .box2{
            background-color: skyblue;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            padding: 100px;
            border: 30px solid red;
        }
    style>
    <div class="box1">1div>
    




    <div class="box2">2div>