很多css初学者在学习到css行内元素和css块级元素的时候,可能会容易搞混,那么,本篇文章就来给大家讲解一下css行内元素和块级元素有哪些?以及css块级元素和css行内元素的区别。
在上一篇文章css块级元素的定义是什么?css块级元素有哪些?中我们单独介绍css的块级(block)元素,所以在这里就不多说了~下面我们就来直接讲解一下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块级元素和行内元素的区别之一:
块级元素:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度。
行内元素:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
<html> <head> <title>区别</title> <style type="text/css"> .div1{background-color: #090;} .span1{background-color: yellow;} </style> </head> <body> <div class="div1">块级元素1</div> <div class="div1">块级元素2</div> <span class="span1">行级元素1</span> <span class="span1">行级元素2</span> </body> </html>
效果如下:
css块级元素和行内元素的区别之二:
块级元素:块级元素可以设置宽高。
行内元素:行内元素不可以设置宽高。
实例:
<html> <head> <meta charset="UTF-8"> <title>区别</title> <style type="text/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;} </style> </head> <body> <p>块级元素一</p> <div>块级元素二</div> <span>行内元素一</span> <strong>行内元素二</strong> </body> </html>
效果如下:
注意:块级元素即使设置宽度也还是独占一行。
css块级元素和行内元素的区别之三:
块级元素:块级元素可以设置margin,padding。
行内元素:行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。
实例:
<head> <meta charset="UTF-8"> <title>区别</title> <style type="text/css"> p{background-color: #098;height: 50px;width: 50%;padding: 20px;margin: 20px;} div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;} span{background-color: yellow;height: 70px;padding: 40px;margin: 20px;} strong{background-color: pink;height: 70px;padding: 40px;margin: 20px;} </style> </head> <body> <p>块级元素一</p> <div>块级元素二</div> <span>行内元素一</span> <strong>行内元素二</strong> </body>
效果如下:
注意:行内元素竖直方向的如padding-top和margin-bottom不会产生边距效果。
css块级元素和行内元素的区别之四:
块级元素:块级元素对应display:block。
行内元素:行内元素对应display:inline。
最后说一个属性:display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性。
说明:可以通过修改元素的display属性来切换行内元素和块级元素。
文章到这里也就结束了,若是想了解更多的css块级元素和行内元素的区别,可以去php中文网css视频教程栏目看看视频。
相关推荐:
html块级元素和行内元素_html/css_WEB-ITnose
以上是css行内元素有哪些?css块级元素和行内元素的区别的详细内容。更多信息请关注PHP中文网其他相关文章!

Goofonts是由开发人员和设计师丈夫签名的附带项目,它们都是版式的忠实拥护者。我们一直在标记Google

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API!碰巧的是,我得到了完美的

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时,它被称为Motion-Path,然后被更名。我


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3汉化版
中文版,非常好用

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能