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

CSS系列之块状元素内联元素内联块状元素(四)

2017-06-12 19:48 253 查看

<!DOCTYPE html>
<html lang="en" xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>演示块状元素</title>
<style type="text/css">

</style>
</head>
<body>
<div style="background-color: cyan">我是div</div>
<div style="background-color: yellow"; width:300>
我是设置了宽高的div
</div>
<span style="background-color: rebeccapurple">我是span1</span>
<span style="background-color: aquamarine">我是span2</span>

<!--元素分为块状元素,内联元素,内联块状元素
块状元素:block表示:独自占据一行,不能与其他标签同处一行 可以设置宽高等属性-->
<!--内联元素:inline表示 可以与其他标签同处一行 不可以设置宽高等属性-->
<!--内联块状元素;inline-block表示:可以与其他标签同处一行,可以设置宽高等属性-->
<span style="background-color: yellow">我是内联元素</span>
<div style="display: inline-block; background-color: bisque; width: 600px">
我是设置了display属性的div标签,我已经被改成了内联块状元素
</div>

</body>
</html>

<!--元素分类-->
<!--块状元素,内联元素(行内元素),内联块状元素
块状元素(block):
1，每个块级元素都从新的一行开始，并且其后的元素也另起一行。就是nb，就是霸道，就是一个元素占一行。
并且在其后的元素也会另起一行。就是说我前面和我后面的元素，都离我远一点。
2，元素的高度、宽高、行高以及顶和底边距都可设置。
3，元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素(行内元素)(inline):
1，和其他元素都在一行上。
2，元素的高度、宽度及顶部和底部边距不可设置。
3，元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素(inline-block):
1，和其他元素都在一行上。
2，元素的高度、宽度、行高以及顶和底边距都可设置。

可以通过display属性将块状元素设置为内联块状元素

常用的:
块状元素:div p h1..h6 ol ul table address blockquote form
内联元素:a span br em strong label q
内联块状元素:img input    -->

a93d

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

标签：

相关文章推荐

新的分享

章节导航

CSS系列之块状元素 内联元素 内联块状元素(四)

CSS系列之块状元素内联元素内联块状元素(四)