box-sizing属性和元素居中方式

1. box-sizing属性

box-sizing属性定义了如何计算一个元素的总宽度和总高度，它有以下两个值
1.content-box是默认值，如果设置一个元素的宽为100px，name这个元素的内容区会有100px的宽度，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中，这意味着调整一个元素的宽度和高度的时候需要计算这个元素的边框和内边距，布局时很繁琐。<br>
2.border-box设置的边框和内边距的值是包含在元素尺寸内，也就是说如果将一个元素的width设为100px，那这100px会包含它的边框和内边距，内容区的实际宽度是windth减去边框和内边距的值，大多数情况下布局更方便，一般都会使用这个值。

标准盒模型：content-box（不推荐）

标准盒子的width和hight不把padding，border包括在内

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing属性</title>
    <style>
        .box {
            width: 200px;
            height: 150px;
            padding: 20px;
            border: 2px solid red;
            background-color: violet;
        }
        .box {
            box-sizing: content-box;
            /* 元素的宽度：200px + （2*20px） + （2*2px） = 244px
            元素的高度：150px + （2*20px） + （2*2px） = 194px */
        }
        </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

使用border-box则不需要计算，以下是演示代码：

IE盒子会把padding，border计算在内，让盒子实际大小达到理想中的实际尺寸

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing属性</title>
    <style>
        .box {
            width: 200px;
            height: 150px;
            padding: 20px;
            border: 2px solid red;
            background-color: violet;
        }
        .box {
            box-sizing: border-box;
        }
        /* 元素的宽度：156px +（2*20px） + (2*2px) = 200px
        元素的高度：106px + （2*20px） + （2*2px） = 150px */
        </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

演示截图：

2. 常用元素居中方法：

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用元素居中方法</title>
    <style>
        :root {
            font-size: 20px;
        }
        .box {
            margin: auto;
            height: 20em;
            width: 30em;
            overflow: auto;
            border-radius: 1em;
            background-color: violet;
        }
        .title {
            line-height: 2em;
            text-align: center;
        }
        .content {
            width: 20em;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="title">棒！这群叫板命运的少年</p>
        <div class="content">
            最近，有一个关于棒球的故事在朋友圈刷屏。故事讲述了一群来自山区的困境少年，通过打棒球“叫板命运”。这部纪录片电影《棒！少年》被网友评价为“2020最值得带孩子去看的电影”。
12月16日，《棒！少年》的两位小主人公马虎和小双来到央视新闻《相对论》录制现场，畅谈少年逆风挥棒的故事。
        </div>
    </div>
</body>
</html>

演示截图：

box-sizing属性、元素居中方式实例演示

box-sizing属性和元素居中方式

1. box-sizing属性

2. 常用元素居中方法：

相关文章