width值為auto和100%的不同
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .outer{ width:200px; height:100px; border:1px solid black; margin:20px; } #inner-100percent{ width: 100%; height:100px; background: darkcyan; } #inner-auto{ width:auto; padding:0px 10px; height:100px; background:salmon; } </style> </head> <body> <div class="outer"> <div id="inner-100percent">inner-100percent</div> </div> <div class="outer"> <div id="inner-auto">inner-auto</div> </div> <span>你可以通過點選下方按鈕觀察inner-100percent盒子的整體寬度變化</span> <button>click here</button> <script> var inner=document.getElementById('inner-100percent'); var flag=false; var btn=document.getElementsByTagName('button'); function add() { if(flag){ inner.style.padding='0px 10px'; flag=false; console.log(1); }else{ inner.style.padding=''; console.log(2); flag=true; } } btn[0].addEventListener("click",add); </script> </body> </html> <!-- 此demo演示width值分別為auto和100%時對width本身的影響 --> <!-- #1 width值預設為auto,設定百分比時相對父元素寬度 --> <!-- #2 width值為100%時，寬度其實是一個定值 --> <!-- #3 不論width值為auto還是100%，盒子整體寬度=margin-left + padding-left + content(width值) + padding-right + margin-right--> <!-- #4 但由於為100%時是定值，所以子div會無視父div寬度的限制，仍然以父元素100%寬度存在，加上margin和padding的寬度，子元素內容溢位--> <!-- #5 而當width為auto時，子元素content寬度會根據父元素寬度以及margin和padding寬度調節自身寬度 --> <!-- 偶然習得getElementsByClassName和getElementByID 獲取的東西是不一樣的 --> <!-- 前者獲得的是元素陣列，後者獲取的單個元素物件 -->
demo在這裡