box-sizing属性与元素居中 -

一：box-sizing

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度,盒子模型由四个部分组成，内容: Content、内边距: Padding 、边框: Border 、外边框边界:Margin 。

box-sizing分为标准盒模型和IE盒模型：
标准盒模型 box-sizing: content-box；
IE盒模型 box-sizing: border-box；
他们的区别是：
标准盒子的width和hight不把padding,border包括在内
IE盒模型的width=content+padding+border,height=content+padding+border
举例说明：

    <style>
        .box1 {
            /* 使用box-sizing:border-box;盒子实际大小达到理想中的100px*100px */
            box-sizing: border-box;
            width:100px;
            height: 100px;
            padding: 20px;
            background-color: #f00;
            border: 1px solid #000;
        }
        .box2 {
            /* 没有使用box-sizing:border-box;box-sizing的默认值是:content-box，俗称标准盒子，
            盒子实际大小是：100+20*2+1*2=142px；
             */
            width:100px;
            height: 100px;
            padding:20px;
            background-color: #f00;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

运行结果如下：

二：常用元素居中方法：

1.行级元素，水平居中使用：text-align: center，垂直居中：line-height:父元素的高度;
2.块级元素，水平居中：margin: 0 auto;垂直居中：父元素不要给高度，让子元素的上下padding自动撑起来，例如padding: 5em 0;
例子：

 <style>
        .box {
            width:600px;
            height: 380px;
            border-radius: 10px;
            background-color: #F6F1E7;
        }
        p {
            /*行内元素居中：  */
            text-align: center;
            /* display: block; */
            height: 50px;
            line-height: 50px;
        }
        .content {
            width:400px;
            /* 块元素居中： */
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="title">电影没死，只是电影的时代要结束了</p>
    <div class="content">
        大导演克里斯托弗·诺兰在2020年底被长期合作的华纳电影彻底激怒了。
12月8日，诺兰批评了影视巨头华纳兄弟的一项重磅决定，并称华纳主导的HBO Max是“最烂的流媒体”。
在此之前，华纳宣布将其2021年上映的全部17部电影，采取线上线下同步首映的方式登陆流媒体HBO Max。
也就是说，HBO Max会员可以第一时间在网上点播《黑客帝国4》《自杀小队2》《沙丘》《真人快打》《哥斯拉大战金刚》《猫和老鼠》《高地人生》等重磅制作。
华纳方面称，是疫情促使他们做出这一决定，这是“电影爱好者和放映者的双赢”。
但诺兰在社交媒体上说道：“我们行业中最伟大的制片人和最出色的演员们在睡觉前还认为自己是在为最棒的电影公司工作，早上醒来就却发现，他们是在为最烂的流媒体工作！”
</div>
</div>
</body>

效果如下：