100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html中内联元素排列对齐原理 html标签中的内联元素(行内元素)详解

html中内联元素排列对齐原理 html标签中的内联元素(行内元素)详解

时间:2023-03-05 17:47:05

相关推荐

html中内联元素排列对齐原理 html标签中的内联元素(行内元素)详解

html内联元素,也叫行内元素,相邻的多个内联元素是水平横向排列显示在同一行,其宽度随内容的变化而变化,在同一行显示多个内容,就可以使用内联元素来实现,这样就不需要将块级元素设置为浮动或绝对定位也能在一行水平横向排列内容了。

内联元素的概念

内联元素,是一类前后没有换行符,且相邻前后的元素都在同一行中显示,他们是从左至右有序的排列在一行,所以,每个内联元素不会单独占据一行,

内联元素,还有行内元素,内嵌元素等不同的叫法;

内联元素可以设置标签的CSS样式属性display:inline将内联元素变成块状元素;

内联元素有哪些

html标签中的内联元素有:title、span、br、a、style、em、b、i、strong、pcdata、tt、big、small、dfn、code、samp、kbd、var、cite、abbr、acronym、object、script、map、q、sub、bdo;

内联元素的特点

内联元素不支持宽和高,但设置外边距margin和内边距padding时,只在水平方向有效,上下方向无效。

1、每个内联元素和其它内联元素都在一行上,直到同一行排不下,才会重新换一行,或使用br标签才能换行;

2、内联元素一般放文字、图片以及其他内联元素;

3、内联元素不能放块状元素,但块状元素内可以放内联元素;

4、内联元素设置宽(width)和高(height)是无效的,因内联元素的宽高是随其内容宽度的大小而变化的;当内联元素中存在文本时,其高度由文本的字体大小所决定;

5、内联元素只能设置水平方向的外边距margin,或直接设置左外边距margin-left和右外边距margin-right是有效的,而设置上下是无效的;

6、内联元素只能设置水平方向的内边距padding,或直接设置左内边距padding-left和右外边距padding-right是有效的,而设置上下是无效的;

7、内联元素不支持宽(width)和高(height),但我们可以通过line-height,font-size,vertical-align来设置内联元素的高度就会起作用。

8、虽说内联元素设置宽width和高height是无效的,我们可以通过以下两种方法给内联元素设置高度和宽度属性:

1)将inline元素转换为块级元素后就都可设置了,即添加CSS样式时,加上”display:block;“这句话。

2)将该inline元素的position设置为absolute或fixed,这样子它就具有块级元素的属性了。

内联元素的转换

我们可以通过设置标签的CSS样式属性display的属性值,让html元素在内联元素、块状元素、内联块状元素三者之间转换

块状元素转内联元素

不是内联元素的标签,可以通过设置标签的CSS样式属性display:inline将其他元素转换成内联元素;

例如:div标签是一个块状元素,当给它设置了display:inline属性之后,div就变成了一个内联元素!

刘代码博客

其他元素转块状元素或内联块状元素

我们可以通过设置标签的CSS样式属性display:block将其他元素变成块状元素;

但如果设置标签的CSS样式属性display:inlie-block可将其他元素变成内联块状元素;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。