900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > css中标签显示模式 块元素 行内元素 行内块元素 显示模式转换

css中标签显示模式 块元素 行内元素 行内块元素 显示模式转换

时间:2020-01-08 04:28:16

相关推荐

css中标签显示模式 块元素 行内元素 行内块元素 显示模式转换

标签显示模式display:

HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-group:设置元素为表格行组显示,display值总结如下表:

块元素block-level:

独占一行,可以设置宽度、高度、对齐等属性,常见的块标签:h1~h6、p、div、ul、ol、li等。

行内元素(内联元素)inline-level:

一行可排列多个行内元素,一般不能设置宽度、高度、对齐等属性,但是水平方向的margin和padding可以设置,宽度和高度由内容决定,常用于控制页面文本的样式,常见的行内标签:a、strong、b、em、i、del、s、ins、u、span等。行内块元素:在行内标签中有几个可以设置宽度和高度的元素如:img、input、td等,通常被称为行内块元素,其特点:在同一行上面,但是可以设置宽度高度,相邻元素之间有空白间隙。

显示模式转换:

行内元素可以转换成块元素,块元素也可以转换为行内元素,也可以把元素直接转换成行内快元素,行内块元素可以看成文本,转换后各自的属性特点变成对应的转换后的属性特点。

span{display:block;/* 把行内元素转换为块元素 */}div{display:inline;/* 把块元素转换为行内元素 */}div,span{display:inline-block;/* 把元素转换为行内快元素 */}

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@联系笔者删除。

笔者:苦海

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