search

博客列表 >box-sizing属性、常用的元素居中方式

box-sizing属性、常用的元素居中方式

手机用户1576673622
手机用户1576673622原创
2021年01月11日 18:52:27547浏览

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>
上一条：Vue自学:数组中那些能做到响应式下一条：对于 JS 中解构的补充和函数原型中 bind(),call()和 apply()三种方法的演示以及访问器属性的实现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多