display: block;和display: inline;的区别？

轩辕小不懂发布于 2021-08-02 15:32

阅读 602

答案 1

分类：WEB前端开发

web前端

1538

Nen 2021-08-02 16:02

- 程序员

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.浮动或绝对定位时会转换为block8.vertical-align属性生效

1 关注

提出于 2021-08-02 15:32

全部

602 阅读

602 阅读

602 阅读

602 阅读

602 阅读

602 阅读