search

博客列表 >神奇盒子魔方变幻：box-sizing属性和常用的元素居中方式

神奇盒子魔方变幻：box-sizing属性和常用的元素居中方式

幸福敲门的博客
幸福敲门的博客原创
2020年12月22日 17:18:20629浏览

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>
上一条：em与rem，vw与vh下一条：浮动元素与元素的定位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多