css行内元素有什么特点及怎么用

这篇文章主要介绍“css行内元素有什么特点及怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css行内元素有什么特点及怎么用”文章能帮助大家解决问题。

网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了霍邱免费建站欢迎大家使用!

css行内元素(inlineelement)

css行内元素也叫内联元素,行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素“a”。比如SPAN元素,IFRAME元素和元素样式的display:inline的都是行内元素。例如文字这类元素,各个字母之间横向排列,到最右端自动折行。

css行内元素的特点:

1、可以和其他元素处于一行,不用必须另起一行。

2、元素的高度、宽度及顶部和底部边距不可设置。

3、元素的宽度就是它包含的文字、图片的宽度,不可改变。

在介绍完css行内元素后,我们来看一看css行内元素有哪些?

css行内元素有哪些?

常见的css行内元素:

a:锚点

abbr:缩写

acronym:首字

b:粗体(不推荐)

bdo:bidioverride

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:下划线

接着,我们来看一看css块级元素和css行内元素的区别有哪些?

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

css块级元素和行内元素的区别之一:

块级元素:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度。

行内元素:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别

.div1{background-color:#090;}

.span1{background-color:yellow;}

块级元素1

块级元素2

行级元素1

行级元素2

效果如下:

2345截图20180904155622.png

css块级元素和行内元素的区别之二:

块级元素:块级元素可以设置宽高。

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

实例:

区别

p{background-color:#098;height:50px;width:50%;}

div{background-color:green;height:50px;width:40%;}

span{background-color:yellow;height:70px;}

strong{background-color:pink;height:70px;}

块级元素一

块级元素二

行内元素一

行内元素二



css行内元素有什么特点及怎么用

关于“css行内元素有什么特点及怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


本文名称:css行内元素有什么特点及怎么用
标题路径:http://azwzsj.com/article/gosgee.html

其他资讯