CSS Layout – display | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <h1>display 属性</h1>
  <div class="border block">1. 块级Div</div><a>Text</a>
  
  <br/><br/>
  <div class="border inline">2. 行内Div</div><a>Text</a>
  
  <br/><br/>
  <div class="border none">3. display:none 用来在不删除元素的情况下隐藏或显示元素。 </div>
  <p>3. 占据隐藏div（display:none）位置的段落</p>
  
  <br/><br/>
  <div class="border">
    <div class="inline-block">4. 行内块Div</div>
    <div class="inline-block">行内块Div</div>
    <div class="inline-block">行内块Div</div>
    <div class="inline-block">行内块Div</div>
    <div class="inline-block">行内块Div</div>
    <div class="inline-block">行内块Div</div><a>Text</a>
    <div class="inline-block">行内块Div</div><a>Text</a>
  </div>text
  
  <br/><br/><br/>
  <div class="border">
    <div class="float-left">5. float: left;</div>
    <div class="float-left">float: left;</div>
    <div class="float-left">float: left;</div>
    <div class="float-left">float: left;</div>
    <div class="float-left">float: left;</div>
    <div class="float-left">float: left;</div><a>Text</a>
    <div class="float-left">float: left;</div><a>Text</a>
    <!--<div class="clear-left">clear: left;</div><a>Text</a>-->
  </div>
  
</body>
</html>

HTML

xxxxxxxxxx
 
.border{
  border: solid red;
}
​
.border2{
  border: double green;
}
​
.block{
  display: block;
}
​
.inline{
  display: inline;
}
​
.none{
  display: none;
}
​
.inline-block{
  display: inline-block;
  width: 200px;
  height: 50px;
  margin: 2px;
  border: solid 1px green;
}
​
.float-left{
  float: left;
  width: 200px;
  height: 50px;
  margin: 2px;
  border: solid 1px green;
}
​
.clear-left{
  clear: left;
}

CSS