css 盒模型的 box-sizing 属性以及仅用 css 完成元素居中的方法 - css

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > css 盒模型的 box-sizing 属性以及仅用 css 完成元素居中的方法

博主信息

博文 29

粉丝 1

访问量 44488

专题推荐

更多>

一、box-sizing 属性

通常我们认为的盒子是由 width（宽）和 height（高）设置的，一旦两个属性设置好之后就不会变化了。但是在 html 中盒子不仅具有 width 和 height 属性，它的实际大小还会受到 padding（内边距）和 border（边框）的影响。
默认情况下，盒子的 width 和 height 是不包含 padding 和 border 的，所以当你不去刻意的设置的时候，你所得到的盒子大小总会与你想要的不符。我们可以设置两个盒子，来观察一下它们的实际表现。

演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>box-sizing</title>
  </head>
  <body>
    <div class="box">
      <div></div>
    </div>
  </body>
</html>

这里我们使用两个盒子来观察 padding 属性和 border 属性对盒子大小的影响。

:root {
  font-size: 10px;
}
* {
  padding: 0;
  margin: 0;
}
.box {
  background-color: skyblue;
  border: 5px solid yellow;
  /* 宽 */
  width: 20em;
  /* 高 */
  height: 15em;
  /* 这里设置成水平居中，有利于观察 */
  margin: auto;
}
/* 设置子盒子的宽度为父盒子的100%，用来观察盒子大小的变化。 */
.box div {
  background-color: green;
  width: 20em;
  height: 5em;
}

效果如下：

我们可以看到的是 child 此时是占据了 parent 的内容区，之后我们在给它添加上 padding 和 border 看看效果。

.box div {
  padding: 2em;
  border: 5px solid blue;
}

效果如下：

可以看到的是加上了 padding 和 border 之后，子盒子的大小瞬间就超出了父盒子，这就与我们所预期想要的结果不符了。我们想要的是第一种效果的样子。我们可以怎么解决这个问题呢?

使用计算公式
可以想到的是，既然它会自动的加上 padding 和 border 的值，那我们减去不就好了，我们可以试一下这种方法。此时盒子尺寸的计算方式：width/height + padding*2 + border*2。

.box div {
  width: calc(20em - 50px);
  height: calc(5em - 50px);
}

显示效果如下：

可以看到的是，我们如愿以偿的让子元素的大小变成了我们希望的样子。这证明用这个方法是完全行的通的，不过每次都需要去计算大小，好麻烦的样子，这时候就引出了 box-sizing 属性。

使用 box-sizing 属性

box-sizing 属性有两个值，分别是 content-box 和 border-box

ontent-box
这是 CSS 标准指定的初始值和默认值。width 和 height 属性包括的内容，但不包括填充，边框。例如，.box {width: 350px; border: 10px solid black;}渲染一个 370px 宽的框。
在这里，元素的尺寸计算为：width =内容的宽度，height =内容的高度。（边界和填充不包括在计算中。）
border-box
width 和 height 属性包括内容，填充和边框。请注意，填充和边框将在框内。例如，.box {width: 350px; border: 10px solid black;}渲染一个 350px 宽的框，内容区域为 330px 宽。内容框不能为负，且底限为 0，因此无法使用 border-box 该元素使元素消失。
在这里，元素的尺寸计算为：width =边框+填充+内容的宽度，height =边框+填充+内容的高度。

有了 box-sizing 属性，就可以不用那么麻烦的取计算了，以后就将 width: calc(20em - 50px);height: calc(5em - 50px);这两个值直接换成 box-sizing:border-box;就行了。

二、元素居中的实现

行内和行内块元素的居中

水平居中

行内元素和行内块元素水平居中,设置盒子的 text-align 属性就行

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>box-sizing</title>
  </head>
  <body>
    <div class="box">
      <a href="">链接</a>
      <img src="img/1.png" width="150px" alt="" />
      <div></div>
    </div>
  </body>
</html>

.box {
  width: 15em;
  height: 15em;
  border: 1px solid #111;
}
.box {
  text-align: center;
}

效果如下：

可以看到的是，“链接”处在水平居中的位置。

块元素的水平居中要使用 margin 属性来对盒子进行挤压达到居中的效果。

.box > div {
  width: 5em;
  height: 5em;
  background-color: skyblue;
}
.box > div {
  /* margin-right: auto;
        margin-left: auto; */
  margin: 0 auto;
}

可以看到效果如图：

垂直居中

行内元素不能设置自己的宽高,只能设置容器的宽高,所以设置盒子的 line-height 属性和盒子的高度一样,就可以实现居中效果。line-height 属性的值必须和 height 的值一样。

.box {
  line-height: 15em;
}

效果如图：

行内块元素的垂直居中要按照块元素的水平居中处理，块元素的垂直居中问题是由 padding 解决的，通过不设置盒子的高度，使用 padding 属性撑开，就可以实现垂直居中。

例子：

.box {
  width: 15em;
  /* 不要设置高度，高度由padding挤出来 */
  /* height: 15em; */
  border: 1px solid #111;
}
/* 行内元素不能设置自己的宽高,只能设置容器的宽高 */
.box a {
  /* 行内元素line-height属性的值和父级元素的行高一样,就可以实现居中 */
  line-height: 15em;
}
/* 行内块元素属于块元素范畴,line-height属性不起作用 */
.box {
  padding: 5em 0;
}
.box > div {
  background-color: skyblue;
  width: 5em;
  height: 5em;
  /* margin: auto; */
}

效果如图所示：

水平和垂直都居中

行内元素的水平且垂直居中通过设置 text-align 和 line-height 属性实现

示例：

.box {
  text-align: center;
  line-height: 15em;
}

效果如图：

块元素的水平垂直居中，使用 margin 实现绝对定位。

示例：

.box {
  /* 容器定位,转为定位元素 */
  position: relative;
}
.box div {
  /* 进行绝对定位(对块元素定位) */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}