简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS基础学习（box-sizing属性、内容溢出设置、最小高度、常见元素的的居中方式）
Blogger Information
Blog 40
fans 0
comment 1
visits 34284
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
CSS基础学习（box-sizing属性、内容溢出设置、最小高度、常见元素的的居中方式）
景云
Original
679 people have browsed it

  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>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！