css百分比參照大總結
阿新 • • 發佈：2017-10-14
blog 項目 9.png set logs blue left html border
最近做PC端項目，由於要自適應到800*600，所以免不了要使用百分比的布局方式，但是一開始有點搞不清楚百分比的參照，於是頁面的布局怎麽調也調不好。
事後我進行了一下總結，希望能夠幫到大家：
參照父元素寬度的元素：padding margin width text-indent
參照父元素高度的元素：height
參照父元素屬性:font-size line-height
特殊：相對定位的時候，top(bottom) left(right)參照的是父元素的內容區域的高度與寬度，而絕對定位的時候參照的是最近的定位元素包含padding的高度與寬度
下面給一個demo：
先上代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ position: relative; margin-bottom: 10%; width: 100px; height: 100px; padding: 20px; border: 4px solid blue; background: red; } .box>.relative-ele{ z-index: 1; position: relative; top: 100%; left: 100%; width: 10%; height: 10%; padding: 10%; border: 4px solid yellow; background: blue; } .box>.absolute-ele{ z-index: 1; position: absolute; top: 100%; left: 100%; width: 10%; height: 10%; padding: 10%; border: 4px solid yellow; background: blue; } </style> </head> <body> <div class="box"> <div class="relative-ele"></div> </div> <div class="box"> <div class="absolute-ele"></div> </div> </body> </html>
父盒子盒模型與相對定位的子盒子的盒模型：
可以看出來相對定位的盒子的百分比定位的top和left值是參照父元素內容的寬度和高度，而不包括padding
父盒子盒模型與絕對定位的子盒子的盒模型：
可以看出來絕對定位後，盒子大小都發生了改變，也就是說子盒子絕對定位之後top和left值會參照最近的定位盒子的padding-box來進行計算，所有大小的計算都要包括父盒子的padding值
附帶一點：就是ie7相對定位的參照點不太一樣，它參照的是父元素內容的左上角，不包含padding
css百分比參照大總結