CSS基础例⼦display属性：block、inline和inline-block的区别  HTML中块级元素(block)和⾏级元素(inline)；⽐如div就是常见的块级元素，span就是常见的⾏级元素。
  可以通过css的display属性来设置⼀个元素到底是块级，还是⾏级元素；display:block将元素设置成块级的，display:inline将元素设置成⾏级的。
  span的实际显⽰宽度和⾼度由其内容决定。
  1、block元素会独占⼀⾏，多个block元素会各⾃新起⼀⾏。默认情况下，block元素宽度⾃动填满其⽗元素宽度。
  2、block元素可以设置width,height属性。块级元素即使设置了宽度，仍然是独占⼀⾏。
  3、block元素可以设置margin和padding属性。
  1、inline元素不会独占⼀⾏，多个相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排列不下，才会新换⼀⾏，其宽度随元素的内容⽽变化。
  2、inline元素设置width,height属性⽆效。
  3、inline元素的margin和padding属性，⽔平⽅向的padding-left, padding-right, margin-left, margin-right都产⽣边距效果；但竖直⽅向的padding-top, padding-bottom, margin-top,  　margin-bottom不会产⽣边距效果。
  1、让⾏内块可以设置宽度⾼度。
  span是⾏级元素，所以不能设置其宽度和⾼度；如果将span设置成block，那么⼜会⾃动换⾏。怎么让多个span在同⼀⾏显⽰，⽽且能够固定宽度呢？这就需要⽤到display:inline-block了。
margin属性怎么用例⼦：
<head>
<style>
span{
background-color:#43be60;
width:100px;
height:50px;
margin-top:20px;
margin-left:20px;
display:inline-block;
}
</style>
</head>
<body>
<div >
<span>1</span>
<span>10</span>
<span>100</span>
<span>1000</span>
</div>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。