css块级元素和行内元素的区别是什么
这篇文章主要介绍了css块级元素和行内元素的区别是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
阿鲁科尔沁网站建设公司创新互联建站,阿鲁科尔沁网站设计制作,有大型网站制作公司丰富经验。已为阿鲁科尔沁上千多家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的阿鲁科尔沁做网站的公司定做!
css行内元素(inline element)
css行内元素也叫内联元素,行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。
css行内元素的特点:
1、可以和其他元素处于一行,不用必须另起一行。
2、元素的高度、宽度及顶部和底部边距不可设置。
3、元素的宽度就是它包含的文字、图片的宽度,不可改变。
在介绍完css行内元素后,我们来看一看css行内元素有哪些?
css行内元素有哪些?
常见的css行内元素:
a:锚点 abbr:缩写 acronym:首字 b:粗体(不推荐) bdo: bidi override 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块级元素和行内元素的区别之一:
块级元素:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度。
行内元素:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别 块级元素1块级元素2行级元素1 行级元素2
效果如下:
css块级元素和行内元素的区别之二:
块级元素:块级元素可以设置宽高。
行内元素:行内元素不可以设置宽高。
实例:
区别 块级元素一
块级元素二行内元素一 行内元素二
效果如下:
注意:块级元素即使设置宽度也还是独占一行。
css块级元素和行内元素的区别之三:
块级元素:块级元素可以设置margin,padding。
行内元素:行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。
实例:
区别 块级元素一
块级元素二行内元素一 行内元素二
效果如下:
注意:行内元素竖直方向的如padding-top和margin-bottom不会产生边距效果。
css块级元素和行内元素的区别之四:
块级元素:块级元素对应display:block。
行内元素:行内元素对应display:inline。
最后说一个属性:display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性。
说明:可以通过修改元素的display属性来切换行内元素和块级元素。
感谢你能够认真阅读完这篇文章,希望小编分享css块级元素和行内元素的区别是什么内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
网页题目:css块级元素和行内元素的区别是什么
网页路径:http://cdiso.cn/article/ihoehh.html