彻底搞懂行内元素,块级元素,行内块元素

·  阅读 31

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 当然,他们之间也是可以转换的。

display:inline;转换为行内元素

display:block;转换为块状元素

display:inline-block;转换为行内块状元素

那各元素有些什么特征呢?

行内元素特征:

(1)设置宽高无效

(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间 

(3)不会自动进行换行

元素:a、span

块状元素特征:

(1)能够识别宽高

(2)margin和padding的上下左右均对其有效

(3)可以自动换行

(4)多个块状元素标签写在一起,默认排列方式为从上至下

元素:div、p、nav、aside、header、footer、section、article、ul-li、address

行内块状元素特征:

(1)不自动换行

(2)能够识别宽高

(3)默认排列方式为从左到右

元素:input、img

Tips: 当子元素没有设置宽高时,如果是块级元素,它会继承父元素的宽度,高度会随内容撑开

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 100px;
        height: 100px;
        background: pink;
      }
    
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">333</div>
    </div>
  </body>
复制代码

image.png

可以看到.box的宽度继承父元素的宽度,如果不想继承,可以给子元素设置display:inline-block

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改