常用的行内元素和块级元素、它们各自的特点是啥?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常用的行内元素和块级元素、它们各自的特点是啥?相关的知识,希望对你有一定的参考价值。

参考技术A 块元素:

      div,li,ul,p,h1-h6

特点:

     (1)所有的块级元素都会独占一行;

     (2)块级元素可以直接设置其宽度和高度;

     (3)如果一个块级元素没有设置宽度,那么其默认的宽度是父元素的宽度。

行内元素:

span,a,strong,em,b,i,font,strike

特点:

      (1)所有行内元素都在一行上显示;

      (2)行内元素没有宽度和高度(即使设置也不生效)。

常见行内块元素:img ,input ,select ,textarea ,button ,label …

特点:

    (1)与所有的行内元素相同都在一行上显示

     (2)与块级元素相同可以设置宽度和高度。

不同元素之间的转换方式

转换为块级元素:disaplay : block

转换为行内块元素:dispaly : inline-block

转换为行内元素:display : inline

行内元素和块级元素

 

块级元素

内联元素

address - 地址

block - 块引用

center - 居中对齐块(不推荐)

dir - 目录列表(HTML5踢出)

div - 常用的不能再常用了

dl - 列表

fieldset - 一个包含着form组的框

form - 表了个单

  h1 ~ h6 各种尺寸标题

hr - 水平分隔线(不推荐)

menu - 菜单列表

noframes - 浏览器不支持frames显示的块

noscript - 浏览器不支持script显示的块

ol - 有序列表

ul - 无序列表

p - 段落

pre - 格式化文本

table - 表了个格

a - 锚点

abbr - 缩写(语义、利于搜索引擎)

acronym - 首字(HTML5踢出)

b - 粗体(不推荐)

big - 大字体(不推荐)

cite - 引用(语义、利于搜索引擎)

code - 引用源码(语义)

em - 强调(如果仅为了斜体请用<i>)

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

label - 表单标签(事件关联对应表单项)

q - 短引用(标准添加引号,IE不添加引号)

s - 中划线(不推荐)

samp - 用于提取内容

select - 项目选择

small - 小字体(不推荐)

strong - 粗体(不推荐)

sub - 下标

sup - 上标

textarea - 多行文本输入框

u - 下划线

var - 定义变量

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. Top-level element 【顶级元素】:    { html, body, frameset }
包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.  

2. Block-level element 【块级元素】:   { p, h1~h6, div, ul }
顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。
块级元素能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.

3. Inline element 【内联元素】: { a, br, em, img, li, span }
通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。当然内联元素也能变成块级元素,那就是通过css的display:inline;和float来实现。
内联元素依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行.

以上是关于常用的行内元素和块级元素、它们各自的特点是啥?的主要内容,如果未能解决你的问题,请参考以下文章

行内元素和块级元素水平及垂直居中

行内元素和块级元素的区别

前端面试题-行内元素和块级元素

Css的一些总结

行内元素和块级元素

行内元素,块级元素,各自特点及其相互转化