• 技术文章 >web前端 >前端问答

    html中span是块元素吗

    青灯夜游青灯夜游2021-11-17 17:36:56原创98

    在html中,span不是块元素,而是内联元素(行内元素)。span元素主要用于容纳文字,多个span元素可以在一行显示;且span元素的宽高是由内容决定的,无法用width和height属性设置。而块元素是独占一行的,且宽高是可以设置的。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    span不是块元素,而是内联元素(行内元素),主要用于容纳文字。span只是把内容定义成一个整体进行操作,不影响布局和显示。

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			span {
    				width: 100px;
    				height: 100px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<span>你好</span> <span>hello</span>
    	</body>
    </html>

    1.png

    可以看出:多个span元素可以在一行显示;且span元素的宽高是有所包含的内容决定的,无法width和height属性设置。而这些都是行内元素的特点。

    块级元素

    块级元素的display属性通常为block,为什么说通常呢,因为想li的display属性就是list-item,table 的 display 属性是 table, 但他们都是块级元素。

    块级元素的特点

    为什么块级元素要独占一行呢? 因为块级元素的宽度会占满整个父元素的宽度,所以也就没有多余空间来显示其它元素了,只能另起一行。

    常见块级元素有:

    <div>
    <p>
    <h1>~<h6>
    <ol>
    <ul>
    <dl>
    <table>
    <address>
    <blockquote>
    <form>

    行内元素

    行内元素的display属性为:inline

    行内元素的特点

    常见行内元素元素:

    <a>
    <span>
    <br>
    <i>
    <em>
    <strong>
    <label>
    <q>
    <var>
    <cite>
    <code>

    推荐教程:《html视频教程

    以上就是html中span是块元素吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:html不成对的标签有哪些 下一篇:html lang属性有什么用
    php中文网线上培训班

    相关文章推荐

    • html中一个表格由哪三部分组成• html全局属性是什么• HTML中主体标记是什么• html中的meta有什么作用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网