鍍金池/ 問答/HTML/ body自適應(yīng)border怎么寫？

body自適應(yīng)border怎么寫？

1 body自適應(yīng)border怎么寫？

如圖所示
圖片描述

2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            html,body{
                width:100%;
                height:100%;
            }
            html,body{
                margin:0;
                padding:0;
            }
            body{
                border:1px solid #ccc;
            }
        </style>
    </head>
    <body>
    </body>
</html>

3為什么我這個代碼會出現(xiàn)滾動條？求高手解答一下？謝謝

回答
編輯回答
撿肥皂

因為盒模型的border和padding是不計算在content內(nèi)容里的，你的width:100%;height:100%;也就是內(nèi)容已經(jīng)占滿了，再加上border就超過了可視窗口的width和height，所以出現(xiàn)滾動條，加上css box-sizing: border-box;讓內(nèi)容包含border和padding就行了

  body{
                border:1px solid #ccc;
                box-sizing: border-box;
            }
2018年1月25日 07:13