块级元素和行内元素

一、行内元素与块级元素

块级元素:独占一行,可设width和height;


行内元素:根据内容多少决定是否换行(不独占一行),不可设置width和height。


二、行内元素与块级元素的区别

1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列,都是同一行的,水平方向排列。

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

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上

行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

三、相互之间转换

1.行转块

display:block (字面意思表现形式设为块级);加float后变块级。

2.块转行

display:inline;

3.非行非块(独占一行,可设width和height)

display:inline-block;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML中的元素可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素:显...
    adingmoon阅读 517评论 0 0
  • 一、定义 块级元素 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(...
    取个帅气的名字真好阅读 579评论 0 1
  • 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.行内元素不会独占一行,相邻的行内元素会排列在同一行里,...
    猿分让我们相遇阅读 805评论 0 1
  • 块级元素列表 行内元素 行内元素与块级元素区别 行内元素于块级元素直观上的区别 行内元素会在一条直线上排列,都是同...
    wmsj100阅读 363评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,813评论 1 92