码迷,mamicode.com
首页 > Web开发 > 详细

HTML行内元素、块级元素、行内块级元素的特点与区别

时间:2019-06-26 13:42:49      阅读:654      评论:0      收藏:0      [点我收藏+]

标签:star   pad   多个   结束   等等   排列   上下   开始   转换   

元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

元素分类方式

HTML 可以将元素分类方式分为行内元素、块状元素和行内块状元素三种,这三者可以通过设置display属性值实现相互转化。实现如下

#转换为行内元素
display:inline;

#转换为块状元素
display:block;

#转换为行内块状元素
display:inline-block;

元素特点

行内元素
  • 不会自动换行
  • 设置宽高无效
  • 设置margin上下方向无效,左右方向有效
  • 设置padding上下左右方向都有效

常用的元素有:span 、a、b、br、u、ur等等

行内块状元素
  • 不会自动换行
  • 可以识别宽高
  • 默认排列方式为从左到右

常用的元素有:img、input、td等

块状元素
  • 自动换行
  • 可以识别宽高
  • 设置margin和padding的上下左右均有效
  • 多个块状元素标签写在一起,默认排列方式为从上至下

常用的元素有:div、p、ul、ol、li、h1、h2等

HTML行内元素、块级元素、行内块级元素的特点与区别

标签:star   pad   多个   结束   等等   排列   上下   开始   转换   

原文地址:https://www.cnblogs.com/paul666/p/11089103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!