国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

【CSS基礎(chǔ)學(xué)習(xí)】行內(nèi)元素,塊級(jí)元素,行內(nèi)塊級(jí)元素

2020-4-24    前端達(dá)人

文章目錄

    • 元素的顯示方式和轉(zhuǎn)換


    • 元素的顯示方式和轉(zhuǎn)換

      塊級(jí)元素

      塊級(jí)元素(inline):
      塊級(jí)元素可以包含行內(nèi)元素和其它塊級(jí)元素,且占據(jù)父元素的整個(gè)空間,可以設(shè)置 width 和 height 屬性,瀏覽器通常會(huì)在塊級(jí)元素前后另起一個(gè)新行。
      常見塊級(jí)元素:

      header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
      特點(diǎn):

      塊級(jí)元素會(huì)獨(dú)占一行
      高度,行高,外邊距和內(nèi)邊距都可以單獨(dú)設(shè)置
      寬度默認(rèn)是容器的100%
      可以容納內(nèi)聯(lián)元素和其他的塊級(jí)元素
      例如:





      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              div{
                  width: 150px;
                  height: 150px;
                  background-color: cadetblue;
              }
          </style>
      </head>
      <body>
          <div>塊級(jí)元素1</div>
          <div>塊級(jí)元素2</div>
      </body>
      </html>
      



       

      分析:
      塊級(jí)元素的高和寬可以被修改,而且塊級(jí)元素會(huì)在一個(gè)塊級(jí)元素之后另起一行。

      行級(jí)元素
      行級(jí)元素(block):
      一般情況下,行內(nèi)元素只能包含內(nèi)容或者其它行內(nèi)元素,寬度和長度依據(jù)內(nèi)容而定,不可以設(shè)置,可以和其它元素和平共處于一行。
      常見行級(jí)元素:
      a,b,strong,span,img,label,button,input,select,textarea
      特點(diǎn):

      和相鄰的行內(nèi)元素在一行上
      高度和寬度無效,但是水平方向上的padding和margin可以設(shè)置,垂直方向上的無效
      默認(rèn)的寬度就是它本身的寬度
      行內(nèi)元素只能容納純文本或者是其他的行內(nèi)元素(a標(biāo)簽除外)
      例如:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              span{
                  width: 150px;
                  height: 150px;
                  font-size: 40px;
                  background-color: cadetblue;
              }
          </style>
      </head>
      <body>
          <span>行級(jí)元素1</span>
          <span>行級(jí)元素2</span>
      </body>
      </html>
      


      分析:
      對(duì)他的高和寬進(jìn)行修改,但是沒有發(fā)生改變,對(duì)他的字體大小進(jìn)行修改卻發(fā)生了整體大小的改變,所以得出結(jié)論行級(jí)元素的寬高是與內(nèi)容有關(guān)的,且不可修改高寬的屬性,只能對(duì)內(nèi)容修改。

      行內(nèi)塊級(jí)元素
      行內(nèi)塊級(jí)元素(inline-block):
      他包含了行級(jí)元素與塊級(jí)元素的特點(diǎn),在同一行顯示,可以設(shè)置元素寬度和高度,可以將塊級(jí)元素和行級(jí)元素轉(zhuǎn)化為行內(nèi)塊級(jí)元素。他不屬于基本的元素,是通過修改獲得的。
      特點(diǎn):

      和其他行內(nèi)或行內(nèi)塊級(jí)元素元素放置在同一行上
      元素的高度、寬度、行高以及頂和底邊距都可設(shè)置
      舉例:
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              span{
                  width: 150px;
                  height: 150px;
                  font-size: 20px;
                  background-color: cadetblue;
                  display: inline-block;
              }
          </style>
      </head>
      <body>
          <span>以前我是行級(jí)元素,</span>
          <span>現(xiàn)在我只想做行內(nèi)塊級(jí)元素。</span>
      </body>
      </html>
      


      分析:
      他可以進(jìn)行修改寬高,也屬于同一行,包含著行級(jí)元素和塊級(jí)元素的特點(diǎn),他就是行!內(nèi)!塊!級(jí)!元!素!

      顯示方式之間的轉(zhuǎn)化
      想要轉(zhuǎn)成什么顯示方式 格式
      塊級(jí)元素 display:inline;
      行級(jí)元素 display: block;
      行內(nèi)塊級(jí)元素 display: inline-block;
      這些直接在元素里面添加就可以了,就會(huì)轉(zhuǎn)換成相對(duì)應(yīng)的格式。
      舉例:


      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              div{
                  width: 150px;
                  height: 150px;
                  font-size: 30px;
                  background-color: cadetblue;
                  display: inline;
              }
          </style>
      </head>
      <body>
          <div>我以前是塊級(jí)元素,</div>
          <div>現(xiàn)在我是行級(jí)元素!</div>
      </body>
      </html>
      






      分析:
      在VSC中,修改寬高的代碼已經(jīng)出現(xiàn)了波浪線,證明他是錯(cuò)誤的,所以現(xiàn)在的div已經(jīng)變成了行級(jí)元素。






      ————————————————
      版權(quán)聲明:本文為CSDN博主「董小宇」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
      原文鏈接:https://blog.csdn.net/lolly1023/article/details/105715892



日歷

鏈接

個(gè)人資料

存檔