您的位置：首页 > Web前端 > CSS

html css层叠样式基础（内联元素和块元素）（二）

2017-02-06 16:59 459 查看

1.块元素和内联元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<!--

块元素（block）
- 在页面中块元素会独占一行，不会与其他元素出现在一行
- 无论内容多少，块元素总会独占一行
- 学习过的块元素
p h1~h6 ul ol dl li div....
- div是一个块元素，没有语义，在页面中使用div对页面进行布局

内联元素或行内元素（inline）
- 内联元素不会独占一行，只占自身内容的大小
- 学习过的内联元素
a img span
- 可以使用一个内联元素来选中一段文字，来为文字设置样式

- 在页面中主要使用块元素进行布局，使用内联元素来选中文字，
在页面中一般会使用块元素去包含内联元素，而不适用内联元素去包含块元素
a元素可以包含任意元素，除了他本身
p元素中不能包含任何的块元素

-->
<div style="background-color: red; width: 200px;">我是一个div</div>

<div style="background-color: yellow; width: 200px;">我也是一个div</div>

<span style="background-color:green">我是一个span</span>
<span style="background-color:blue">我也是一个span</span>

<a href="#">超链接一</a>
<a href="#">超链接二</a>

<span id="s1">你好，我是一段文字</span>

<div>

<div></div>

<span>

</span>

</div>

<a href="#">
<div>我是一个div</div>
</a>

<!--错误的写法-->
<a href="#"><a href="#">奇怪的超链接</a></a>

<hr />

<!--错误的写法-->
<p>
我是一个p元素
<div>我是一个div</div>
</p>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html

相关文章推荐

新的分享

章节导航