1.元素的margin-top、margin-bottom及padding-top、padding-bottom使用百分比作為單位時,其是相對父元素的寬度width,而不是我們想像的高度height;如圖
<style type="text/css"> .parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; } .child{ outline: 1px solid purple; width: 200px; height: 80px; padding-top: 10%; /*20px = 父容器的width值200px * 10% */ padding-bottom: 5%; /*10px = 200px * 5% */ margin-top: 20%; /*40px = 200px * 20%*/ margin-bottom: 15%; /*30px = 200px * 15%*/ }<body> <p class="parent"> <p class="child"></p> </p> </body>
##子盒子參數如下:
2.含有定位屬性的元素,其top、bottom單位為百分比時,此百分比是相對父元素的高度height。 left、right則是相對父元素的寬度width.
<span style="max-width:90%">.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 0px; margin: 0px; position: relative; } .child{ outline: 1px solid purple; width: 200px; height: 80px; position: absolute; top: 5%; /* 15px = 300px * 5% 上边框离父盒子上边框15px的距离*/ left: 20%; /* 40px = 200px * 20% 左边框离父盒子左边框40px的距离 <br/> 也就是子盒子左上角的坐标为x=15,y=40(父盒子左上角为原点) */ }</span>
##3.邊框寬度不能用百分比表示
4.width:100%
4.1當父容器裡有絕對定位的子元素時,子元素設定width:100%實際上指的是相對於父容器的padding+content的寬度。 r如圖:
<style type="text/css"> .parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; position: relative; } .child{ outline: 1px solid purple; width: 100%; /* width = 220px = 父容器的padding+content*/ height: 80px; position: absolute; top: 0; left: 0; } </style>
#4.2
當子元素是非絕對定位的元素時(可以是相對定位),或如果都沒有定位,width:100%才是指子元素的content ,其等於父元素的content寬度。
.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; } .child{ outline: 1px solid purple; width: 100%; /* width:200px = 父盒子的content*/ height: 80px; }
.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; position: relative; } .child{ outline: 1px solid purple; width: 100%; height: 80px; position: relative; }
以上是css中關於幾個小tip的範例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!