lovecoding
/
VIP24


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div{
            width: 200px;
            height: 200px;
            background: #f00;

            /*内边距  内容和边框之前的距离 */
            /* 上 右  下 左 */
            /* padding:20px 30px 40px 50px; */
            /* padding:20px; */
            /* padding-top:20px; */

            /* 外边距  边框以外的距离 */
            /* margin:50px; */
            /* 边框:宽度 线 颜色  */
            /* border:5px solid #000; */

            /* 标准盒模型 */
            /* padding:30px; */
            /* border:10px solid #000; */

            /* 怪异盒模型 */
            box-sizing: border-box;

            
        }
    </style>
</head>
<body>
    <!-- 盒模型 
         盒模型 ： 内容  + padding + border + margin 

         标准盒模型  标准浏览器中
         元素宽度（元素占宽度） = 内容（width=200）+ padding +border 


         怪异盒模型 不会被撑大 
         box-sizing:border-box;
         元素宽度（元素占宽度）(=width:200)= 内容 + padding + border

        标准盒模型和怪异盒模型转化
        box-sizing:border-box(怪异盒模型)|content-box 标准盒模型


    -->

    <div>
        我是div哈哈哈哈 
    </div>

</body>
</html>