CSS块元素、行内元素、行内块元素的转换
2024-08-27 19:03:30
一、块元素转行内元素：display:inline
二、行内元素转块元素：display:block
div{
display: inline;
/*无效
width: 500px;
height: 500px;
*/
background-color: red;
}
p{
display: inline-block;
}
span{
display: block;
width: 400px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div>块内元素转行内元素</div>
<span>行内元素转块元素</span>
三、块和行内元素转行内块元素：display:inline-block
<style type="text/css">
div,a,span,strong{
display: inline-block;
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
vertical-align: top;
}
</style>
</head>
<body>
<div>块元素转行内块元素</div>
<a href="#">a行内元素转行内块元素</a>
<span>span行内元素转行内块元素</span>
<strong>strong行内元素转行内块元素</strong>
最新文章
- Tornado框架简析
- xl2tp部署
- 自定义一个可复用的BaseAdapter
- KeepAlived主备模型高可用LVS
- 浅析Java内存模型
- 第50讲：Scala中Variance变化点
- plsql查询数据显示为乱码解决方法
- 页面静态化1 --- 概念（Apache内置压力测试工具使用方法）
- C#自动化IO/XML作业
- *IntelliJ IDEA配置Hibernate
- PTA 07-图5 Saving James Bond - Hard Version (30分)
- COJ 0995 WZJ的数据结构（负五）区间操作
- NSNumber 和 NSValue 的部分使用
- poj2027简单题
- 浙江大学PAT考试1009~1012（1010上帝是冠军。。）
- immutable.js 更新数组（mergeDeepWith）
- JSF基础
- VUE 生成二维码(qrcodejs)
- # 2019-2020-3 《Java 程序设计》第四周总结
- python基于django编写api+前端后端分离