块级元素和行内元素以及转换

标签：#块级元素和行内元素# 时间：2018/10/09 13:38:01 作者：Shino

```java
	
    
        
	<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>
```

块级元素和行内元素以及转换

欢迎大家关注DataLearner官方微信，接受最新的AI技术推送

相关博客

最热博客