当前位置： 移动技术网 > IT编程>网页制作>CSS > 行内元素

行内元素

2019年07月04日  | 移动技术网IT编程  | 我要评论

[2019.07.04 学习笔记2]

1.行级元素（inline element），与其他元素位于同一行。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>行内元素</title>
 6 </head>
 7 <body>
 8     <span>内容</span>
 9     <span>内容</span>
10     <span>内容</span>
11 </body>
12 </html>

2.行内元素尽量不要包含块级元素，不符合规范。可容纳文本或其他行内元素。

3.行内元素的高度一般由元素内部的字体大小决定，宽度由内容长度决定。不可设置元素宽（width）和高（height），只能设置左右方向的内边距（padding）和外边距（margin），上下方向不可设置。<img>除外。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>行内元素</title>
</head>
<body>
<span>内容</span>
<br/>
<span>内容内容内容内容内容</span>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<span>内容</span>
<br/>
<span style="width:200px; height: 200px;">内容</span>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<img src="test.jpg"/>
<br/>
<img src="test.jpg" style="width:10px; height: 10px;"/>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<span>内容</span>
<br/>
<span style="padding: 10px; margin: 10px;">内容</span>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<img src="test.jpg" style="padding: 10px; margin: 10px;"/>
<img src="test.jpg" />
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<span>内容</span>
<br/>
<span style="padding-left: 10px; padding-right: 10px; margin-left: 10px; margin-right: 10px;">内容</span>
<br/>
<span style="padding-top: 10px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px;">内容</span>
</body>
</html>

4.css样式默认显示为dispaly:inline;，可将行内元素设置为块级元素。

5.块级元素有：u、span、a、b、big、small、strong、em、i、sub、sup、img（可设置宽和高）、input、textarea、label、select

6.不可设置位置属性align。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>块级元素</title>
 6 </head>
 7 <body>
 8     <span>内容</span>
 9     <span align="center">内容</span>
10 </body>
11 </html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网