<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>元素之间的转换</title>
<!--通过display:block可以将内联元素转化为块状元素
可以通过display：inline将块状元素转换成内联元素
可以通过display：inline-block：既有块状元素可以设置宽高的功能，又可以有内联元素
display：none隐藏元素且在文档里消失了，位置不在了
display：hidden隐藏元素但是位置还在
-->
<style type="text/css">
.box1{
background-color: skyblue;
display: block;
width: 200px;
height: 200px;
}
.box3{
background-color: skyblue;
display: inline-block;
width: 200px;
height: 200px;
}
.box4{
background-color: red;
display:inline-block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span class="box1">我是span，我有一个梦想，想变成大span</span>
<span class="box3"></span>
<span class="box4"></span>
</body>
</html>css中的元素转换
猜你喜欢
转载自blog.csdn.net/qq_43090158/article/details/82317748
今日推荐
周排行