CSS进阶怪异盒模型和常用元素对齐方式

怪异盒模型（box-sizing）

在前几章中我们提到盒模型，何为盒模型呢？有HTML元素可以看作盒子，在CSS中，盒模型就是用来设计和布局时使用的常用术语。

在布局盒模型的时候，是让我们头疼的就是隐形式的margin和padding，这些隐形式的间距会让我们的布局变得不可控，常常会使得排版错乱，这个时候就出现怪异盒模型box-sizing。

1.box-sizing原理

最主要的用法是规定容器元素的最终尺寸计算方式。

如果我们创建一个<div>没有设置box-sizing属性为border-box的话（默认值为content-box），例子如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<>, initial-scale=1.0">
    <title>盒模型(box-sizing)</title>
    <style>
      :root{
          font-size: 10px;
      }  
      div{
          width: 20em;
          height: 15em;
          background-color: lightgreen;
      }
      .box{
          padding: 1em;
          border: 2px solid; 
          /* 将背景色载切到内容区，让padding可视化 */
          background-clip: content-box;
      }
    </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

效果如下
盒模型讲解
默认W3C标准盒子(content-box)，border和padding的设置是会破坏掉元素的宽高，必须得重新计算，非常麻烦；这个时候就用到我们的主角border-box了。

版本	值	说明	能否继承	备注
CSS3	content-box	元素的填充和边框布局和绘制指定宽度和高度除外	否	默认值
CSS3	border-box	置border、padding不会影响元素width与 height的尺寸	否	IE模型

新增如下代码

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

IE怪异盒模型

2.元素对齐方式

元素对齐方式是最基础，而且也是最考验大家基本功扎实程度；因为元素对齐几乎是必选项，每个页面布局都会用到。

2.1水平居中方式

水平居中方式一共有两种

行内或行内块的水平居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平居中问题</title>
  <style>
      div{
          width: 10em;
          height: 10em;
          border: 1px solid;
      }
      /* 行内或行内块水平居中 */
      .box{
          text-align: center;
      }
  </style>
</head>
<body>
  <div class="box">
      <span>文字标题</span>
  </div>
</body>
</html>

行内水平居中

块元素的水中居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平居中问题</title>
  <style>
      div{
          width: 10em;
          height: 10em;
          border: 1px solid;
      }
      /* 块元素的水平居中 */
      .box>div{
          width: 5em;
          height: 5em;
          background-color: yellow;
          /* 使用text-align: center;是无效的，需要用到margin: ; */
          margin: auto;
      }
  </style>
</head>
<body>
  <div class="box">
      <div></div>
  </div>
</body>
</html>

块元素的水平居中

注意：使用margin来实现块的水平居中，挤压式的居中；auto这个值由浏览器根据上下文自动计算。

2.2垂直居中方式

行内元素使用line-height实现居中效果，但是图片img不能够使用line-height实现居中，因为img已经有高度了，所以需要使用padding方法实现垂直居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中问题：padding</title>
    <style>
        .box{
            width: 15em;
            /* 不要使用高度，这个高度应该由padding挤出来 */
            /* height: 15em; */
            border: 1px solid;
        }
        .box{
            padding: 5em 0;
        }
        .box img{
            width: 5em;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt=""> 
    </div>
</body>
</html>

效果如下
垂直居中方式

元素	展现形式	实现代码	备注
行内元素	水平	text-align: center;	行内元素或行内块可以实现水平居中
块元素	水平	margin: auto;	不能使用text-align，需要用margin实现水平居中
行内元素	垂直	line-height	行内元素或行内块可以实现垂直居中
图片元素	垂直	padding	不能使用line-height，需要用padding挤出来

怪异盒模型（box-sizing）

1.box-sizing原理

2.元素对齐方式

2.1水平居中方式

2.2垂直居中方式

相关文章