Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 神奇盒子魔方变幻：box-sizing属性和常用的元素居中方式
Blogger Information
Blog 41
fans 0
comment 0
visits 41139
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
神奇盒子魔方变幻：box-sizing属性和常用的元素居中方式
幸福敲门的博客
Original
630 people have browsed it

box-sizing属性

属性值 说明
content-box 盒模型以元素内容区为边界，不包含padding、border值
border-box 盒模型以元素边框区为边界，包含padding、border值

实例代码：

  1. <DOCTYPE html>
  2. <html  lang="en">
  3. <head>
  4.     <meta  charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.     <title>盒模型box-sizing属性计算方式</title>
  7.     <style>
  8.      :root{
  9.            font-size:10px;
  10.      }
  11.    .box {
  12.       width: 20em;
  13.       height: 15em;
  14.       background-color: red;
  15.       border: 5px solid #000;
  16.       box-sizing: content-box;
  17.       padding:2em;
  18.       margin-bottom:10em;
  19.     }
  20.    .box1 {
  21.       width: 20em;
  22.       height: 15em;
  23.       background-color: red;
  24.       border: 2px solid #000;
  25.       box-sizing: border-box;
  26.       padding: 2em;
  27.     }
  28.   </style>
  29. </head>
  30. <body>
  31.   <div class="box"></div>
  32.   <div class="box1"></div>
  33. </body>
  34. </html>

图示：
盒模型box-sizing效果图

相关说明：

在CSS中，box-sizing属性定义了用户代理（浏览器）应该如何计算一个元素的总宽度和总高度。
通常情况下，在默认的CSS盒模型定义里，一个元素的宽（width）高（height）只会应用到当前元素的内容区里。如果这个元素有padding（内边距）或border（边框），那么这个盒子在显示的时候，宽高会加上内边距和边框的值。这就意味着我们在布局的时候，需要时刻主要到这个盒子的内边距和边框，尤其是在使用响应式布局的时候，这点非常烦人。因此，w3c给出了一个新属性，box-sizing，它可以被用来调整这些烦人的特点。
box-sizing有两个值：
content-box： 默认值，元素的宽高只用到内容区，在该元素的宽高之外绘制内边距和边框。
尺寸计算公式：
width = 内容区的宽度
height = 内容区的高度
宽度和高度的结果值都不包含内边距（padding）和边框（border）
border-box： 元素的内边距和元素宽高都是包含在宽高内的。
尺寸计算公式：
width = 内容区的宽度 + padding + border
height = 内容区的高度 + padding +borderheight = 内容区的高度 + padding +border

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>行内元素、行内块元素的水平居中</title>
  7.     <style>
  8.         :root {
  9.             font-size: 20px;
  10.         }
  11.         .box {
  12.             width: 20em;
  13.             height: 20em;
  14.             border: 1px solid #000;
  15.             box-sizing: content-box;
  16.         }
  17.         .box {
  18.             text-align: center;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <!-- 行内元素、行内块元素的水平居中 -->
  24.     <div class="box">
  25.         <a href="">学习改变命运</a>
  26.         <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1817245611,3998879057&fm=26&gp=0.jpg" width="300" alt="">
  27.     </div>
  28. </body>
  29. </html>

图示：
行内元素、行内块元素对齐

2.行内元素的垂直居中：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>行内元素的垂直居中</title>
  7.     <style>
  8.         :root {
  9.             font-size: 20px;
  10.         }
  11.         .box {
  12.             width: 20em;
  13.             height: 20em;
  14.             border: 1px solid #000;
  15.             box-sizing: content-box;
  16.         }
  17.         .box {
  18.             text-align: center;
  19.         }
  20.          .box a {
  21.             line-height: 20em;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="box">
  27.         <a href="">努力学好技术，加油！</a>
  29.     </div>
  30. </body>
  31. </html>

图示：
行内元素的垂直居中

3.垂直居中问题-padding

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>垂直居中问题：padding</title>
  7.     <style>
  8.         html {
  9.             font-size: 16px;
  10.         }
  11.         /* padding是最简单的方式 */
  12.         .box {
  13.             width: 15em;
  14.             /* 不要给高度，这个高度应该由padding挤出来 */
  15.             /* height: 10em; */
  16.             border: 5px solid #000;
  17.         }
  18.         .box {
  19.             padding: 10em 0;
  20.         }
  21.         .box > div {
  22.             width: 10em;
  23.             height: 10em;
  24.             background-color: red;
  25.             margin: 0 auto;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="box">
  31.         <div></div>
  32.     </div>
  33. </body>
  34. </html>

图示：
padding垂直居中

3.水平且垂直

3.1 行内元素的水平垂直居中：text-align + line-height

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>行内元素的水平垂直居中</title>
  7.     <style>
  8.         /* 行内元素的水平垂直居中 */
  9.         /* text-align:center + line-height */
  10.         .box {
  11.             width: 15em;
  12.             height: 10em;
  13.             border: 2px solid #000;
  14.             box-sizing: border-box;
  15.         }
  16.         .box {
  17.             text-align: center;
  18.             line-height: 10em;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <a href="">努力学好技术，加油！</a>
  25.     </div>
  26. </body>
  27. </html>

3.2 padding实现水平和垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>padding实现水平和垂直居中</title>
  7.     <style>
  8.         .box {
  9.             width: auto;
  10.             height: auto;
  11.             padding: 5em;
  12.             text-align: center;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="box">
  18.         <a href="">努力学好技术，加油！</a>
  19.     </div>
  20. </body>
  21. </html>

3.3margin实现水平垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>margin实现水平垂直居中</title>
  7.     <style>
  8.         .box {
  9.             width: 15em;
  10.             height: 10em;
  11.             border: 2px solid #000;
  12.             box-sizing: border-box;
  13.             position: relative;
  14.         }
  15.         .box div {
  16.             position: absolute;
  17.             top: 0;
  18.             left: 0;
  19.             right: 0;
  20.             bottom: 0;
  21.             margin: auto;
  22.         }
  23.         .box > div {
  24.             width: 5em;
  25.             height: 5em;
  26.             background-color: red;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="box">
  32.         <div></div>
  33.     </div>
  34. </body>
  35. </html>
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