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

CSS样式（块级元素、行内元素、行内块级元素以及转换）

2017-12-01 16:36 274 查看

CSS样式（块级元素、行内元素、行内块级元素以及转换）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>元素描述</title>
<style>

</style>
</head>

<body>
<!--
块级元素
典型代表:Div,h1-h6,p,ul,li

特点：1.独占一行
2.可以设置宽高
3.嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
-->
<div>
<p>我是p1</p>
</div>

<!--
行内元素
典型代表 span,a,strong,em,del,ins

特点：1.在一行上显示
2.不能直接设置宽高
-->
<span>我是小白</span>
<a href="#">链接下</a>

<!--
行内块级元素
典型代表:input img

特点:
1.在一行上显示
2.可以设置宽高
-->
<img src="../../img/1.png" />

<!--
块级元素和行内元素的互换
块级转行内:display:inline;
行内转块级:display:block;
块、行内转行内块：display:inline-block;
-->
<div>
<span style="display: block;">我是行内转块级</span>
<div style="display: inline;">块级转行内</div>
<div style="display: inline-block;">块、行内转行内块</div>
</div>
</body>

</html>

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

标签： css

相关文章推荐

新的分享

章节导航