块级元素和行内元素以及转换
2,913 阅读
<!-- 标准文档流里面等级森严 标签分为块级元素和行内元素
块级元素：霸占一行，不能与其他任何元素并列，能接受宽高，如果不设置将默认为父亲的100%
行内元素：与其他行内元素并排，不能设置宽高，默认的宽度就是文本的宽度 -->
<!-- 在html中 将标签分为文本级和容器级
文本级：p span a b i u em
容器级：div h系列 ul li dt dd 等 -->
<!-- css里面分类和上面的差不多 基本上所有的文本级标签都是行内元素 除了p
所有的容器级标签都是块级元素
-->
<style type="text/css" media="screen">
/*块级元素和行内元素可以互相转换*/
/*块级元素转换成行内元素*/
div{
display: inline;
background-color: pink;
width: 500px;
height: 500px;
}
h1{
display: inline;
background-color: green;
font-size:20px;
} /*display 显示模式 用来改变元素的行内，块级性质 一旦给标签设置diplay：inline inline就是行内的意思
那么这个标签将变为行内元素和span无异 此时该不能设置宽高 可以和其他行内标签并排*/
/*行内元素转换成块级元素*/
span{
display: block;
width: 200px;
height:200px;
background-color: blue;
font-size: 40px;
}/*display:block; 让标签变为块级元素 此时标签和一个div无异 block 转头 表示块级元素
能够设置宽高 必须霸占一行 如果不设置宽度 将撑满父亲元素*/
/*标准流里面限制很多 css有三种方法脱离标准文档流
①浮动 ②绝对定位 ③固定定位*/
</style>
</head>
<body>
<div>我是一个div</div>
<div>我是一个div</div>
<h1>我</h1><h1>是</h1><h1>h</h1><h1>1</h1>
<span>我是一个span</span>
<span>我是一个span</span>
</body>
