Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css 盒模型的 box-sizing 属性以及仅用 css 完成元素居中的方法
Blogger Information
Blog 29
fans 1
comment 0
visits 35401
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css 盒模型的 box-sizing 属性以及仅用 css 完成元素居中的方法
祥子弟弟
Original
641 people have browsed it

一、box-sizing 属性

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

演示：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>box-sizing</title>
  6.   </head>
  7.   <body>
  8.     <div class="box">
  9.       <div></div>
  10.     </div>
  11.   </body>
  12. </html>

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

  1. :root {
  2.   font-size: 10px;
  3. }
  4. * {
  5.   padding: 0;
  6.   margin: 0;
  7. }
  8. .box {
  9.   background-color: skyblue;
  10.   border: 5px solid yellow;
  11.   /* 宽 */
  12.   width: 20em;
  13.   /* 高 */
  14.   height: 15em;
  15.   /* 这里设置成水平居中，有利于观察 */
  16.   margin: auto;
  17. }
  18. /* 设置子盒子的宽度为父盒子的100%，用来观察盒子大小的变化。 */
  19. .box div {
  20.   background-color: green;
  21.   width: 20em;
  22.   height: 5em;
  23. }

效果如下：

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

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

效果如下：

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

  1. 使用计算公式
    可以想到的是，既然它会自动的加上 padding 和 border 的值，那我们减去不就好了，我们可以试一下这种方法。此时盒子尺寸的计算方式：width/height + padding*2 + border*2。
  1. .box div {
  2.   width: calc(20em - 50px);
  3.   height: calc(5em - 50px);
  4. }

显示效果如下：

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

  1. 使用 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;就行了。

二、元素居中的实现

  1. 行内和行内块元素的居中
  • 水平居中

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

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>box-sizing</title>
  6.   </head>
  7.   <body>
  8.     <div class="box">
  9.       <a href="">链接</a>
  10.       <img src="img/1.png" width="150px" alt="" />
  11.       <div></div>
  12.     </div>
  13.   </body>
  14. </html>
  1. .box {
  2.   width: 15em;
  3.   height: 15em;
  4.   border: 1px solid #111;
  5. }
  6. .box {
  7.   text-align: center;
  8. }

效果如下：

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

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

  1. .box > div {
  2.   width: 5em;
  3.   height: 5em;
  4.   background-color: skyblue;
  5. }
  6. .box > div {
  7.   /* margin-right: auto;
  8.         margin-left: auto; */
  9.   margin: 0 auto;
  10. }

可以看到效果如图：

  • 垂直居中

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

  1. .box {
  2.   line-height: 15em;
  3. }

效果如图：

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

例子：

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

效果如图所示：

  • 水平和垂直都居中

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

示例：

  1. .box {
  2.   text-align: center;
  3.   line-height: 15em;
  4. }

效果如图：

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

示例：

  1. .box {
  2.   /* 容器定位,转为定位元素 */
  3.   position: relative;
  4. }
  5. .box div {
  6.   /* 进行绝对定位(对块元素定位) */
  7.   position: absolute;
  8.   top: 0;
  9.   left: 0;
  10.   bottom: 0;
  11.   right: 0;
  13.   margin: auto;
  14. }

效果显示：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：将课堂内容几乎背下来了, 辛苦了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post