- display:为了达到行级元素和块级元素互相转换运营而生的CSS样式。
常用的display属性值是有:
- none:隐藏元素
- block:转换为块级元素
- inline、转换为行级元素
- inline-block:转换为行块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{//将div内元素变为行级的
display: inline;
}
span{//将span内元素变为块级的
display: block;
}
a{//将a标签变为行块级的,可以设置高度、宽度、背景色等等。
display: inline-block;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<div>中国</div>
<span>河南</span>
<a>郑州</a>
</body>
</html>
实验结果如下:
- margin:设置外边距,即设置标签周围的空隙,比如物品堆放,灭个物品的间隔就是用margin设置。
- padding:设置内边距,即设置标签内部框架的空隙,比如箱子内装鱼缸,那么箱子内部距玻璃缸的距离就是用padding设置。