1. div標籤未定義父層大小時父層自適應子層大小
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
#main{
}
#content1{
width:170px;
height:190px;
background-color:red;
}
#content2{
background-color:green;
width:170px;
height:190px;
}
</style>
</head>
<body>
<div id="main">
這是父層
<div id="content1">這是子層1</div>
<div id="content2">這是子層2</div>
</div>
</body>
</html>
可以看到未設置main樣式的，父容器的大小會自動根據設置好大小的子容器來設定
2. div標籤定義父層大小且子層大小超出父層大小時
<style>
*{
padding: 0;
margin:0;
}
#main{
width:170px;
height:190px;
margin: 50px auto;
background-color: yellow;
}
#content1{
width:170px;
height:190px;
background: rgba(0,0,0,0.3);
}
#content2{
width:170px;
height:190px;
background: rgba(1,1,1,0.9);
color: white;
}
</style>
我們設置父層的顏色爲黃色，子層1爲0.3的透明度，子層2爲0.9的透明度，可以看出父層的大小還是定義的部分（黃色部分），子層1由佔據了一部分的父層，因此有陰影效果，父層之外的爲灰色部分，子層2則時黑色部分，我們將“這是父層”的文字去掉，
可見，子層1佔滿了父層，但是子層2仍熱顯示了出來，因此子層大小超出父層大小時，子層仍能夠按照自身定義的大小顯示出來