这篇文章主要介绍“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;}
效果如下:
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行内元素有什么特点及怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。