display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div,span{background-color:#00aaee;
border:1px #666 solid;}
div{display: inline}/* 将块级元素转换为行内元素*/
span{display:block;}/* 将行内元素转换为块级元素*/)
</style>
</head>
<body>
display属性：
inline：元素将显示为内联元素，元素前后没有换行符
block：元素将显示为块级元素，元素前后会带有换行符
<!-- 块级元素 -->
<div>display属性</div>
<div>display属性</div>
<div>display属性</div>
<hr>
<!-- 内联元素 ：内联元素之间有缝隙-->
<span>display属性</span>
<span>display属性</span>
<span>display属性</span>
</body>
</html>
内联元素，以及使用display：inline设置成内联元素的元素，width和height属性无效
水平方向margin-left/margin-right/padding-left/padding-right有效
垂直方向margin-top/margin-bottom/padding-top/padding-bottom无效
块级元素，以及使用display：block设置成块级元素的元素，width/height/margin/padding属性都生效
display属性：
inline：元素将显示为内联元素，元素前后没有换行符
block：元素将显示为块级元素，元素前后会带有换行符
inline-block：行内块元素，元素呈现为inline，具有block相应特性
none 此元素不会被显示
网友评论