search

博客列表 >CSS基础学习（box-sizing属性、内容溢出设置、最小高度、常见元素的的居中方式）

CSS基础学习（box-sizing属性、内容溢出设置、最小高度、常见元素的的居中方式）

景云
景云原创
2021年01月03日 14:53:46695浏览

  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>CSS基础学习（box-sizing属性、内容溢出设置、最小高度、常见元素的的居中方式）</title>
  7.     <style>
  8.     /* 将通用属性设置一下适用于绝大部门页面制作 */
  9.     *{
  10.         margin: 0;
  11.         padding: 0;
  12.         /* 全局使用IE盒子模型 */
  13.         box-sizing: border-box;
  14.     }
  15.     /* <!-- 1.使盒子大小不受宽高之外属性的影响 --> */
  16.         .box{
  17.             width: 200px;
  18.             height: 100px;
  19.             /* 方案一（笨方法），把影响大小的元素值减掉，比如padding值或者border：calc(); */
  20.             /* width: calc(200px - 22px); */
  21.             /* height: calc(100px - 22px); */
  22.             /* 方案二（新方法），让用户自己决定要不要将padding/border等影响盒子大小的属性加入到计算方式中：box-sizing() */
  23.             /* box-sizing: content-box;默认值，w3c标准盒子模型，不含border/padding */
  24.             box-sizing: border-box;/* 固定大小，不额外计算padding/border；这种盒子模型，最早由微软的IE浏览器实现的，称之为IE盒子模型 */
  25.             border: 1px solid greenyellow;
  26.             padding: 10px;
  27.             background-color: hotpink;
  28.             background-clip: content-box;
  29.         }
  32.         /* 2.当内容超出元素的高度设置方式（文档流是元素默认布局方式）： */
  33.         .content{
  34.             width: 20em;
  35.             height: 10em;
  36.             background-color: greenyellow;
  37.             /* overflow: visible;设置宽高后，溢出部分不处理，此为默认值； */
  38.             /* overflow: scroll;设置宽高后，溢出部分以滚动条方式下拉显示，默认为Y轴下拉 */
  39.             overflow: auto;/* 设置宽高后，当内容溢出时默认按照Y轴下拉显示溢出部分，无溢出则隐藏滚动条 */
  41.         }
  43.         /* 3.最小高度：只限制最小高度未限制最大高度
  44.             当内容超过最小高度时会自动伸展
  45.             当内容不足时，使用最小高度，保证页面保持规则不会缩小 */
  46.         .mh div:nth-of-type(2){
  47.             min-height: 5em;
  48.             background-color: blueviolet;
  49.             overflow: auto;
  50.         }
  51.         /* 4.常见元素的居中方式 */
  52.         .inline{
  53.             width: 20em;
  54.             height: 15em;
  55.             border:1px solid cadetblue;
  56.             box-sizing: border-box;
  57.         }
  58.             /* a.行内/行内块元素 */
  59.             .inline{
  60.                 /* text-align: center;水平居中 */
  61.             }
  62.             .inline a{
  63.                 /* line-height: 15em;垂直居中，父元素需要设置宽高，行高与父元素的高度一致即可实现。其中图片无效，因为它是行内块元素，有自己的宽高。 */
  64.             }
  65.             /* b.块元素居中 */
  66.             .inline>div{
  67.                 width: 10em;
  68.                 height: 5em;
  69.                 background-color: chartreuse;
  70.             }
  71.             /* 使用margin来实现块元素的水平居中 */
  72.             .inline>div{
  73.                 /* margin:0 auto;水平居中 */
  74.             }
  75.             /* 使用padding来实现块元素的垂直居中             */
  76.              .inline{
  77.                  /* padding: 3em 0;垂直居中，不能设置高度 */
  78.              }
  79.              /* c.行内元素的水平+垂直居中 */
  80.              /* .inline{
  81.                  text-align: center;
  82.                  line-height: 15em;
  83.              } */
  84.              /* c.块元素的水平+垂直居中 */
  85.              /* 方案一 */
  86.              .inline{
  87.                  /* padding: 5em; */
  88.              }
  89.              /* 方案二 */
  90.             .inline{
  91.                 position: relative;
  92.             }
  93.             .inline div{
  94.                 position: absolute;
  95.                 top: 0;right: 0;bottom: 0;left: 0;
  96.                 margin: auto;
  97.             }
  98.     </style>
  99. </head>
  100. <body>
  101. <div class="box"></div>
  102. <div class="content">
  103.     新华社北京1月3日电（记者胡喆）记者从国家航天局获悉，截至1月3日6时，“天问一号”探测器已经在轨飞行163天，飞行里程突破4亿公里，距离地球约1.3亿公里，距离火星约830万公里。探测器姿态稳定，按计划将在一个多月后实施近火制动，进入环火轨道，准备着陆火星。
  104. “天问一号”任务是我国独立开展行星际探测的第一步，将通过一次发射实现对火星的“绕、着、巡”，即火星环绕、火星着陆、火面巡视。“天问一号”探测器总重约5吨，由环绕器和着陆巡视器组成，着陆巡视器主要包括进入舱和火星车。目前，环绕器已完成第三次在轨自检，各系统工作正常。（完）
  105. </div>
  106. <div class="mh">
  107.     <div>
  108.         aaa
  109.     </div>
  110.     <div>
  111.         bbb<br>
  112.         bbb<br>
  113.     </div>
  114. </div>
  115. <div class="inline">
  116.     <!-- <a href="https://www.php.cn" target="_blank">PHP中文网</a> -->
  117.     <div></div>
  118. </div>
  119. </body>
  120. </html>
上一条：样式表模块化：让CSS更简洁高效下一条：内联框架的常用标签与CSS初体验
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多