display: block; /*元素分为三大类,设置元素的显示方式
} 行内 inline
li{ 块级 block
display:inline; 行内块 inline-block
} none 无* */
<style type="text/css">
#div01{
width: 100px;
height: 100px;
background-color: #ff0;
}
.d1{
width: 200px;
height: 200px;
background-color: #00f;
}
a,input,button{
width: 200px;
height: 200px;
background-color: #00f;
}
.grand{
width: 500px;
height: 500px;
background-color: #f00;
}
.grand .son{
width: 300px;
height: 300px;
background-color: #000;
}
*{
border: 10px solid #f00;
}
</style>
</head>
<body>
<div id="div01"></div>
<div class="d1"></div>
<p class="d1"></p>
<a href="">内容</a>
<input type="text" />
<button></button>
<div class="grand">
grand
<div class="father">
father
<div class="son">
son
</div>
</div>
</div>
</body>