麻豆av一区二区三区,国产三级久久久精品麻豆三级,亚洲精品蜜桃久久久久久

首頁 > 博客列表 > 盒子大小設(shè)置內(nèi)容溢出和元素水平垂直居中

博主信息

博文 9

粉絲 0

評論 0

訪問量 11723

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

盒子大小設(shè)置

IE盒子屬性 box-sizing:border-box 大小含有邊框和內(nèi)邊距的盒子 box-sizing:content-box 原來意義上的盒子不含邊框和內(nèi)邊距

元素的高度:內(nèi)容超出處理方式

如果盒子高度設(shè)置了固定值，內(nèi)容已經(jīng)超出了盒子的高度，需要用overflow屬性來設(shè)置顯示，隱藏或者滾動條自動

代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的高度:內(nèi)容超出處理方式</title>
    <style>
      html {
        font-size: 10px;
      }
      .box {
        width: 20em;
        /* 高度可以不設(shè)置，通過內(nèi)容將高度撐開，不設(shè)置固定值 */
        height: 20em;
        box-sizing: border-box;
        background-color: rgb(170, 240, 200);
        border: 1px solid #333;
      }
      /* 如果高度設(shè)置了固定值，此時內(nèi)容已經(jīng)超出了盒子的高度 */
      .box {
        /* 默認(rèn)值是顯示 可以省略不寫 */
        overflow: visible;
        /* 溢出內(nèi)容隱藏 */
        overflow: hidden;
        /* 使用滾動條查看被隱藏的內(nèi)容 */
        overflow: scroll;
        /* 使用auto表示 溢出時顯示滾動條，不溢出時不顯示 */
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      嫦娥五號任務(wù)圓滿成功，彰顯了中國特色制度優(yōu)勢。新型舉國體制是突破國家重大技術(shù)短板、推進(jìn)重大項(xiàng)目工程、實(shí)現(xiàn)核心關(guān)鍵技術(shù)順利攻關(guān)的最大法寶。航天工程規(guī)模宏大，系統(tǒng)復(fù)雜，要想在相對較短時間取得巨大成就，必須集中有限的力量攻堅(jiān)克難。千萬顆心連著太空，億萬雙手托舉航天，這次嫦娥五號任務(wù)堅(jiān)持自主創(chuàng)新、協(xié)同創(chuàng)新、開放創(chuàng)新，是探索建立新型舉國體制的又一生動實(shí)踐。
      從新中國成立之初的“兩彈一星”到新時期的“嫦娥探月工程”，無不閃爍著舉國體制的光芒。實(shí)踐證明，中國航天事業(yè)之所以能夠不斷取得新的突破，靠的就是黨的集中統(tǒng)一領(lǐng)導(dǎo)，靠的就是跨部門、跨地區(qū)、跨專業(yè)的團(tuán)結(jié)協(xié)作，靠的就是發(fā)揮社會主義制度集中力量辦大事的政治優(yōu)勢。
    </div>
  </body>
</html>

容器最小高度與最大高度

設(shè)置最小高度，內(nèi)容超出后自動撐開，內(nèi)容不足時按最小高度顯示，不塌陷。
設(shè)置最大高度，內(nèi)容超出最大高度時隱藏或加滾動條顯示，內(nèi)容沒有超出最大高度時，按內(nèi)容高度顯示。

<!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 {
        /* 內(nèi)容由高度撐開 */
        height: auto;
      }
      body div:nth-of-type(2) {
        min-height: 5em;
        /* 只設(shè)置最小高度，內(nèi)容超出后自動撐開，內(nèi)容不足時按最小高度顯示，不塌陷 */
      }
      body div:nth-of-type(3) {
        max-height: 10em;
        /* 最大高度，內(nèi)容超出最大高度時隱藏或加滾動條顯示，
        內(nèi)容沒有超出最大高度時，按內(nèi)容高度顯示 */
        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>

元素水平垂直居中

行內(nèi)元素的水平居中（圖片和文字）text-align: center
行內(nèi)塊元素水平居中使用 margin: 0 auto 使用margin來實(shí)現(xiàn)塊的水平居中,擠壓式的居中

垂直居中（文字）通過設(shè)置行高等于盒子高度擠出垂直居中，但是這種方式對圖片無效

<!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 {
        /* 通過設(shè)置行高等于盒子高度擠出垂直居中 */
        line-height: 15em;
      }
      .box img {
        /* 這種設(shè)置對圖片無效 圖片屬于是塊元素 */
        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>

垂直居中（圖片和塊元素）盒子不要給高度,這個高度應(yīng)該由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;
        /* 不要給高度,這個高度應(yīng)該由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">
      <!-- 圖片當(dāng)做塊元素來對待 -->
      <img
        src="https://img.php.cn/upload/course/000/000/001/5fae261f9c169870.png"
        width="150"
        alt=""
      />
      <!-- <div></div> -->
    </div>
  </body>
</html>

水平和垂直居中
行內(nèi)元素水平垂直居中比較簡單 text-align: center 和
通過設(shè)置行高等于盒子高度擠出垂直居中 line-height: 15em

行內(nèi)塊元素水平垂直居中 padding和Margin同時擠壓
最終效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行內(nèi)塊元素水平垂直居中</title>
    <style>
      .box {
        width: 20em;
        /* 不要給高度,這個高度應(yīng)該由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>

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

html基本標(biāo)簽

2020-12-12 15:43:22

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

盒子大小設(shè)置

元素的高度:內(nèi)容超出處理方式

容器最小高度與最大高度

元素水平垂直居中