在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码将元素设置为内联元素
display:inline
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
下面我们来写一段代码,块状元素是可以设置宽高的 内联元素是设置不了宽高的
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ width:100px; height:50px; background-color:green; /*设置背景色*/ color:#fff; /*设置字体颜色*/ } </style> </head> <body> <a href="#">PHP中文网</a> </body> </html>
看上面这段代码,a 是内联元素,当我们设置宽高,是没有效果的,转换成块状元素就会有明显效果
下面我们来写一个实例 把块状元素转换成内联元素
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ display:inline; /*转换成内联元素*/ /*转换成内联元素之后,我们设置宽高,背景色,文字颜色*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <div>欢迎大家来到php中文网</div> </body> </html>
以上代码中,块状元素转换成内联元素之后 是不可以设置宽高的
下一节