<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          【CSS基礎學習】行內元素,塊級元素,行內塊級元素

          2020-4-24    前端達人

          文章目錄

            • 元素的顯示方式和轉換


            • 元素的顯示方式和轉換

              塊級元素

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

              header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
              特點:

              塊級元素會獨占一行
              高度,行高,外邊距和內邊距都可以單獨設置
              寬度默認是容器的100%
              可以容納內聯元素和其他的塊級元素
              例如:





              <!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>塊級元素1</div>
                  <div>塊級元素2</div>
              </body>
              </html>
              



               

              分析:
              塊級元素的高和寬可以被修改,而且塊級元素會在一個塊級元素之后另起一行。

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

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

              <!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>行級元素1</span>
                  <span>行級元素2</span>
              </body>
              </html>
              


              分析:
              對他的高和寬進行修改,但是沒有發生改變,對他的字體大小進行修改卻發生了整體大小的改變,所以得出結論行級元素的寬高是與內容有關的,且不可修改高寬的屬性,只能對內容修改。

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

              和其他行內或行內塊級元素元素放置在同一行上
              元素的高度、寬度、行高以及頂和底邊距都可設置
              舉例:
              <!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>以前我是行級元素,</span>
                  <span>現在我只想做行內塊級元素。</span>
              </body>
              </html>
              


              分析:
              他可以進行修改寬高,也屬于同一行,包含著行級元素和塊級元素的特點,他就是行!內!塊!級!元!素!

              顯示方式之間的轉化
              想要轉成什么顯示方式 格式
              塊級元素 display:inline;
              行級元素 display: block;
              行內塊級元素 display: inline-block;
              這些直接在元素里面添加就可以了,就會轉換成相對應的格式。
              舉例:


              <!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>我以前是塊級元素,</div>
                  <div>現在我是行級元素!</div>
              </body>
              </html>
              






              分析:
              在VSC中,修改寬高的代碼已經出現了波浪線,證明他是錯誤的,所以現在的div已經變成了行級元素。






              ————————————————
              版權聲明:本文為CSDN博主「董小宇」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
              原文鏈接:https://blog.csdn.net/lolly1023/article/details/105715892



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合