前端开发行内元素与块级元素

分享 :
标签: HTML/CSS

前端开发行内元素与块状元素

以图例来表述行内元素和块级元素的区别会更加直观:

// 我是行内元素span标签 // //我是行内元素strong标签//

注:行内元素会再一条直线上,是在同一行的。

//我是块级元素div标签// //我是块级元素P标签//

注:块级元素各占一行。是垂直方向的!

如果你要将行内元素变成块级元素,那么就只需要在该标签上加上样式 display:block; 块级元素可以用样式控制其高、宽的值。

行内元素不可以控制宽和高,除非你想将它转变成为块级元素。它的宽和高,是随标签里的内容而变化。

常见的块状元素

  • address-----地址
  • blockquote-----块引用
  • center----- 举中对齐块
  • dir-----目录列表
  • div-----常用块级容易,也是CSS layout的主要标签
  • dl-----定义列表
  • fieldset-----orm控制组
  • form-----交互表单
  • h-----标题
  • hr-----水平分隔线
  • isindex-----input prompt
  • menu-----菜单列表
  • noframes-----frames可选内容,(对于不支持frame的浏览器显示此区块内容
  • noscript-----可选脚本内容(对于不支持script的浏览器显示此内容)
  • ol-----有序表单
  • p-----段落
  • pre-----格式化文本
  • table-----表格
  • ul-----无序列表

常见的行内元素

  • a----- 锚点
  • abb-----缩写
  • acronym-----首字
  • b-----粗体(不推荐)
  • bdo-----bidi override
  • big-----大字体
  • br-----行
  • cite-----引用
  • code-----算机代码(在引用源码的时候需要)
  • dfn-----定义字段
  • em-----强调
    • font-----字体设定(不推荐)
  • i-----斜体
  • img-----图片
  • input-----输入框
  • kbd-----定义键盘文本
  • label-----表格标签
  • q-----短引用
  • s-----中划线(不推荐)
  • samp-----定义范例计算机代码
  • select-----项目选择
  • small-----小字体文本
  • span-----常用内联容器,定义文本内区块
  • strike-----中划线
  • strong-----粗体强调
  • sub-----下标
  • sup-----上标
  • textarea-----多行文本输入框
  • tt-----电传文本
  • u-----下划线

行内元素与块级元素有什么不同?

区别一:

块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二:

块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高

区别三: >块级:块级元素可以设置margin,padding >行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别四: >块级:display:block; >行内:display:inline; >可以通过修改display属性来切换块级元素和行内元素

文章分类

在线客服
热线电话

微信公众账号