【CSS基础学习】行内元素,块级元素,行内块级元素 - 蓝蓝设计_UI设计公司

帝皇彩票官网

【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



Powered by sitemap
吉利彩票计划 上海11选5 吉林快3 迪士尼彩乐园 帝皇彩票开奖 pk10怎么玩 帝皇彩票登陆 智慧彩票投注 博发彩票开户 吉利彩票投注