Community Learn Tools Library Leisure
search
English
Home > List of blog posts > box-sizing属性、常用的元素居中方式
Blogger Information
Blog 29
fans 0
comment 0
visits 19811
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属性、常用的元素居中方式
手机用户1576673622
Original
548 people have browsed it

box-sizing属性

  • 盒子属性

    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.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>盒子属性</title>
    8.   <style>
    9.       :root {
    10.           font-size: 10px;
    11.       }
    13.       .box {
    14.           /* 宽 */
    15.           width: 20em;
    16.           /* 高 */
    17.           height: 30em;
    18.           /* 背景色 */
    19.           background-color: aqua;
    20.       }
    22.       .box {
    23.           /* 内边距 */
    24.           padding: 3em;
    25.           /* 边框 */
    26.           border: 3px solid;
    27.           /* 将背景色裁切到内容区,让padding可视化 */
    28.           background-clip: content-box;
    29.       }
    31.       .box {
    32.           /* content-box: w3c标准盒子模型,width/height不含padding/border  */
    33.           box-sizing: content-box;
    35.           /* border-box:padding,border计算在盒子大小内 */
    36.           box-sizing: border-box;
    37.           /* 叫 ie盒子 或者 怪异盒模型 */
    38.           /* margin不影响盒子大小，影响盒子的排列 */
    39.       }
    41.   </style>
    42. </head>
    43. <body>
    44.   <div class="box"></div>
    45. </body>
    46. </html>
  • margin
    • margin只会对页面中的元素的位置或多个元素的排列产生影响,对盒子大小无影响
    • 水平方向，margin累加
    • 垂直方向，margin折叠。margin折叠之后,大者胜出
  • 全局的盒子大小设置
    只要清零不可视的元素就可以了。
    1.       margin: 0;
    2.       padding: 0;
    3.       /* 全局使用IE盒子模型 */
    4.       box-sizing: border-box;

  • 元素的高度：内容超出了怎么办

    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.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>元素的高度：内容超出了怎么办？</title>
    8.   <style>
    9.       :root {
    10.           font-size: 10px;
    11.       }    
    13.       .box {
    14.           width: 20em;
    15.           height: 15em;
    16.           background-color: rgb(231, 130, 130);
    17.           border: 1px solid;
    18.           /* 默认值，不隐藏溢出 */
    19.           overflow: visible;
    20.           /* 隐藏溢出 */
    21.           overflow: hidden;
    22.           /* 滚动条 */
    23.           overflow: scroll;
    24.           /* 内容如果超出，滚动条自动出现 不然自动隐藏  */
    25.           overflow: auto;
    26.       }
    27.   </style>
    28. </head>
    29. <body>
    30.   <div class="box">
    31.       1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中境外输入病例18例（广东7例，辽宁4例，天津2例，上海2例，福建1例，云南1例，陕西1例），本土病例85例（河北82例，辽宁2例，北京1例）；无新增死亡病例；无新增疑似病例。
    32.       1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中境外输入病例18例（广东7例，辽宁4例，天津2例，上海2例，福建1例，云南1例，陕西1例），本土病例85例（河北82例，辽宁2例，北京1例）；无新增死亡病例；无新增疑似病例。
    33.   </div>
    34. </body>
    35. </html>

  • 容器最小高度和最大高度

    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.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>容器最小高度和最大高度</title>
    8.   <style>
    9.       body>* {
    10.           margin: 1em;
    11.       }
    13.       body div {
    14.           border: 2px solid;
    15.       }
    17.       body div:first-of-type {
    18.           /* 高度由内容撑开 */
    19.           height: auto;
    20.       }
    22.       body div:nth-of-type(2) {
    23.           /* 最小高度，小于最小高度不会塌掉，会留出空白
    24.           超出最小高度会自动撑开 */
    25.           min-height: 20em;
    26.       }
    28.       body div:nth-of-type(3) {
    29.           /* 最大高度 */
    30.           max-height: 3em;
    31.           /* 滚动条 */
    32.           overflow: auto;
    33.       }
    35.   </style>
    36. </head>
    37. <body>
    38.   <div>1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例</div>
    40.   <div>
    41.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    42.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    43.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    44.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    45.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    46.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    47.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    48.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    49.   </div>    
    51.   <div>
    52.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    53.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    54.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    55.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    56.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    57.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    58.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    59.           1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
    60.   </div>
    61. </body>
    62. </html>

    常用的元素居中方式

  • 水平居中

    1.   <style>
    2.       .box {
    3.           width: 15em;
    4.           height: 15em;
    5.           border: 1px solid #000;
    6.       }
    8.       .box {
    9.           /* 行内元素或行内块元素水平居中 */
    10.           text-align: center;
    11.       }
    13.       .box>div {
    14.           width: 5em;
    15.           height: 5em;
    16.           background-color: yellow;
    17.       }
    19.       .box>div {
    20.           /* 块元素的水平居中 */
    21.           /* auto:这个值由浏览根据上下文自动计算 */
    22.           margin: 0 auto
    23.       }
    24.   </style>
  • 垂直居中问题: 行内元素
    只要line-height和height相等就能实现行内元素垂直居中（图片无效）
    1.       .box a {
    2.           line-height: 15em;
    3.       }
  • padding
    可以对图片生效。
    不要设置高度，由padding挤出来。
    1.   .box {
    2.       padding: 5em 0;
    3.   }

  • 水平且垂直的解决方案
    1.行内元素
    text-align + line-height 

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

    2.padding
    不能设置高度。或者使用auto让宽高失效。

    1.   .box {
    2.       padding: 5em
    3.   }

    3.margin

    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.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>margin</title>
    8.   <style>
    9.       .box {
    10.           width: 10em;
    11.           height: 15em;
    12.           background-color: rgb(231, 125, 125);
    13.           box-sizing: border-box;
    14.       }
    16.       .box {
    17.           position: relative;
    18.       }
    20.       .box {
    21.           position: absolute;
    22.           top: 0;
    23.           left: 0;
    24.           right: 0;
    25.           bottom: 0;
    26.           margin: auto;
    27.       }        
    28.   </style>
    29. </head>
    30. <body>
    31.   <div class="box"></div>
    32. </body>
    33. </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