0
点赞
收藏
分享

微信扫一扫

行内元素于块级元素的区别,以及display:block;和display:inline的区别

狐沐说 2022-04-21 阅读 34
html5css3

常见的行内元素于块级元素:

 <!-- 常见的行内元素 -->
    <span>   <img >  <input >  <select>  <strong> <a>  <label>

 <!--常见的块级元素  -->
    <div> <ul> <ol> <dl> <dt> <dd> <h1>~<h6> <p> <table> <form> <hr> 等~~

行内元素和块级元素的区别:

1.行内元素不可以设置宽高,宽高由内容撑开,不独占一行

2.块级元素可以设置宽高,宽高默认由内容撑开,默认独占一行,垂直向下

display:block 和display:inline 的区别:

block元素的特点:

1.处于常规流中,如果width没有设置,会自动填充满父容器

2.可以用于margin/padding

3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素

4.处于常规流中布局时在前后元素位置之间(独占一个水平空间)

5.忽略vertical-align

inline元素特点:

1.水平方向上根据direction依次布局

2.不会再元素前后进行换行

3.受white-space控制

4.margin/padding在竖直反向无效,水平反向有效

5.width/height属性对非替换行内元素无效,宽度由元素内容决定

6.非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height、margin、padding、border决定

7.浮动或绝对定位时会转换block

8.vertcal-align属性无效

举报

相关推荐

0 条评论