盒子大小设置内容溢出和元素水平垂直居中 - html

Home > List of blog posts > 盒子大小设置内容溢出和元素水平垂直居中

Blogger Information

Blog 9

fans 0

comment 0

visits 9122

Special Recommendation

More>

Related recommendations

盒子大小设置

IE盒子属性 box-sizing:border-box 大小含有边框和内边距的盒子 box-sizing:content-box 原来意义上的盒子不含边框和内边距

元素的高度:内容超出处理方式

如果盒子高度设置了固定值，内容已经超出了盒子的高度，需要用overflow属性来设置显示，隐藏或者滚动条自动

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的高度:内容超出处理方式</title>
    <style>
      html {
        font-size: 10px;
      }
      .box {
        width: 20em;
        /* 高度可以不设置，通过内容将高度撑开，不设置固定值 */
        height: 20em;
        box-sizing: border-box;
        background-color: rgb(170, 240, 200);
        border: 1px solid #333;
      }
      /* 如果高度设置了固定值，此时内容已经超出了盒子的高度 */
      .box {
        /* 默认值是显示 可以省略不写 */
        overflow: visible;
        /* 溢出内容隐藏 */
        overflow: hidden;
        /* 使用滚动条查看被隐藏的内容 */
        overflow: scroll;
        /* 使用auto表示 溢出时显示滚动条，不溢出时不显示 */
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      嫦娥五号任务圆满成功，彰显了中国特色制度优势。新型举国体制是突破国家重大技术短板、推进重大项目工程、实现核心关键技术顺利攻关的最大法宝。航天工程规模宏大，系统复杂，要想在相对较短时间取得巨大成就，必须集中有限的力量攻坚克难。千万颗心连着太空，亿万双手托举航天，这次嫦娥五号任务坚持自主创新、协同创新、开放创新，是探索建立新型举国体制的又一生动实践。
      从新中国成立之初的“两弹一星”到新时期的“嫦娥探月工程”，无不闪烁着举国体制的光芒。实践证明，中国航天事业之所以能够不断取得新的突破，靠的就是党的集中统一领导，靠的就是跨部门、跨地区、跨专业的团结协作，靠的就是发挥社会主义制度集中力量办大事的政治优势。
    </div>
  </body>
</html>

容器最小高度与最大高度

设置最小高度，内容超出后自动撑开，内容不足时按最小高度显示，不塌陷。
设置最大高度，内容超出最大高度时隐藏或加滚动条显示，内容没有超出最大高度时，按内容高度显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>容器最小高度与最大高度</title>
    <style>
      body div {
        border: 1px solid red;
        width: 25em;
      }
      body div:first-of-type {
        /* 内容由高度撑开 */
        height: auto;
      }
      body div:nth-of-type(2) {
        min-height: 5em;
        /* 只设置最小高度，内容超出后自动撑开，内容不足时按最小高度显示，不塌陷 */
      }
      body div:nth-of-type(3) {
        max-height: 10em;
        /* 最大高度，内容超出最大高度时隐藏或加滚动条显示，
        内容没有超出最大高度时，按内容高度显示 */
        background-color: turquoise;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div>2020年十大房价下跌城市：北京、郑州、青岛上榜</div>
    <div>2020年十大房价下跌城市：北京、郑州、青岛上榜<br /></div>
    <div>
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
      2020年十大房价下跌城市：北京、郑州、青岛上榜<br />
    </div>
  </body>
</html>

元素水平垂直居中

行内元素的水平居中（图片和文字）text-align: center
行内块元素水平居中使用 margin: 0 auto 使用margin来实现块的水平居中,挤压式的居中

垂直居中（文字）通过设置行高等于盒子高度挤出垂直居中，但是这种方式对图片无效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>垂直居中</title>
    <style>
      .box {
        width: 20em;
        height: 15em;
        background-color: violet;
      }
      .box a {
        /* 通过设置行高等于盒子高度挤出垂直居中 */
        line-height: 15em;
      }
      .box img {
        /* 这种设置对图片无效 图片属于是块元素 */
        line-height: 15em;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <a href="">php.cn</a>
      <!-- <img
        src="https://img.php.cn/upload/course/000/000/001/5fae261f9c169870.png"
        width="150"
        alt=""
      /> -->
    </div>
  </body>
</html>

垂直居中（图片和块元素）盒子不要给高度,这个高度应该由padding挤出来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>垂直居中块元素padding</title>
    <style>
      .box {
        width: 20em;
        /* 不要给高度,这个高度应该由padding挤出来 */
        /* height: 15em; */
        background-color: violet;
      }
      .box {
        /* 垂直居中也是挤出来的 */
        padding: 5em 0;
      }
      .box > div {
        width: 5em;
        height: 5em;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- 图片当做块元素来对待 -->
      <img
        src="https://img.php.cn/upload/course/000/000/001/5fae261f9c169870.png"
        width="150"
        alt=""
      />
      <!-- <div></div> -->
    </div>
  </body>
</html>

水平和垂直居中
行内元素水平垂直居中比较简单 text-align: center 和
通过设置行高等于盒子高度挤出垂直居中 line-height: 15em

行内块元素水平垂直居中 padding和Margin同时挤压
最终效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行内块元素水平垂直居中</title>
    <style>
      .box {
        width: 20em;
        /* 不要给高度,这个高度应该由padding挤出来 */
        /* height: 15em; */
        background-color: violet;
      }
      /* 首先水平居中通过padding挤出来 */
      .box {
        padding: 5em 0;
      }
      .box > div {
        width: 5em;
        height: 5em;
        background-color: yellow;
      }
      /* 在垂直居中通过margin挤出来 */
      .box > div {
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div></div>
    </div>
  </body>
</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

html基本标签

2020-12-12 15:43:22