40.块级元素和行内元素的特点

发表于 | 分类于

在学习JavaScript的一些总结和经验，供大家参考和学习，同时也欢迎大家参与讨论。

前言：块级也叫块状，简称块元素；行内也叫内联，一般叫行内元素，看喜好，爱怎么叫就怎么叫；

还有一种叫内联替换元素，俗称具备inline-block属性的怪物；

这样的细节，有点恶心

块级元素和行内元素的特点

block特点：

  1. 总是从新的一行开始，如果不为其设置宽度，那它默认是100%；
  2. 高度，行高以及外边距和内边距均可控制（设置）；
  3. 可以容纳（包含）内联元素和其他块级元素

特例：p段落元素不可包含（嵌套）div元素

inline特点：

  1. 与其他元素都在一行上；
  2. 高度，行高以及上下外边距和上下内边距均不可设置；
  3. 它的宽度即是它包含的文字或图片的宽度，不可改变；
  4. 内联元素只能容纳文本或者其他内联元素

典型例子：

  • span大佬

特性：

  1. 可以设置margin-left、margin-right、padding-left、padding-right
  2. 在为其设置padding-top和padding-bottom的时候，我们视觉上是看的到效果的，but并没有什么鸟用，因为不影响周边的元素。

​ 很明显，绿色的表明从视觉上看，padding-top和padding-bottom是有效果的，但是，他并没有撑开，对外面父元素div不产生任何效果。所以，div的高度还是等于里面文本的高度。

这样的设计有点恶心，为什么要这么做？？？

  • 具有怪物特性的input、img标签，内联替换元素

特性：

height 、 width 、 padding 、 margin 均可设置，效果等同于块级元素。


文章标题: 40.块级元素和行内元素的特点
文章作者: 王奕聪，QQ:1301842163
许可协议: 知识共享许可协议
©署名-非商用-相同方式共享 4.0