js和css

標籤：高度   blank   eth   css3   document   私人屬性   nbsp   解析度   chrome   

body{
height:100%;
background-image:url(./img/background.png);
}

body的寬度碎螢幕大小課設定成  height:100%;

 

 

#div1 {box-sizing:border-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding:20px;}
#div2 {box-sizing:content-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding:20px;}
</style>

<div id="div1">border-box</div>
<div id="div2">content-box</div>
<script>

 box-sizing:border-box; 是CSS3新增屬性，瞭解這個屬性，我們先從區塊層級元素的盒子大小說起，通常一個區塊層級元素實際所佔寬高度=外邊距（margin）+ 邊界寬度(border-width) + 內邊距（padding）+ 高度（height） /  寬度（width）
如果設定了border-box，實際所佔寬高度 = 設定的高度（height）/ 設定的寬度（width）+ 外邊距（margin）

border和padding全會在你設定的寬度內部

 

 

 

-moz代表firefox瀏覽器私人屬性
-ms代表IE瀏覽器私人屬性
-webkit代表chrome、safari私人屬性

 

function a(){
document.write(
"螢幕解析度為："+screen.width+"*"+screen.height
+"<br />"+
"螢幕可用大小："+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"網頁可見地區寬："+document.body.clientWidth
+"<br />"+
"網頁可見地區高："+document.body.clientHeight
+"<br />"+
"網頁可見地區寬(包括邊線的寬)："+document.body.offsetWidth
+"<br />"+
"網頁可見地區高(包括邊線的寬)："+document.body.offsetHeight
+"<br />"+
"網頁本文全文寬："+document.body.scrollWidth
+"<br />"+
"網頁本文全文高："+document.body.scrollHeight
+"<br />"+
"網頁被捲去的高："+document.body.scrollTop
+"<br />"+
"網頁被捲去的左："+document.body.scrollLeft
+"<br />"+
"網頁本文部分上："+window.screenTop
+"<br />"+
"網頁本文部分左："+window.screenLeft
+"<br />"+
"螢幕解析度的高："+window.screen.height
+"<br />"+
"螢幕解析度的寬："+window.screen.width
+"<br />"+
"螢幕可用工作區高度："+window.screen.availHeight
+"<br />"+
"螢幕可用工作區寬度："+window.screen.availWidth
);
};

讓body高度跟隨螢幕大小

 

js和css