块级元素和行内元素

1、块级元素和行内元素区别

  块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。块级元素可以包含行内元素和块级元素。

  行内元素不能包含块级元素。行内元素会在一条直线上排列,都是同一行的,水平方向排列。行内元素设置width无效,height无效(可以设置line-height让文字垂直居中),margin上下无效,padding上下无效。

2、两者之间可通过display属性进行转换。display:inline;将块级元素转换为行内元素。display:block;将行内元素转换为块级元素。写代码的时候尽量将其写道前面。

3、如果想让两个块级元素并排,还能设置宽高,这个时候就不能只让块级元素变为行内元素实现并排,因为行内元素不能设置宽高。这个时候的处理应该是脱去标准文档流,使用浮动,绝对定位,固定定位。

4、行内元素的空白折叠现象

  这个是因为html对代码中的空格和换行不敏感,不论你代码中有多少空格和换行,在浏览器上浏览的页面会只呈现一个空格。

原文地址:https://www.cnblogs.com/sylz/p/5701541.html