HTML5盒子模型。

本文轉載自查看原文 2017-06-19 20:08 1230 html5盒子模型/ 盒子模型

盒子模型。

盒子由 margin、border、padding、content 四部分組成。

margin ：外邊距

border：邊框

padding：內邊距 (內容與邊框的距離)

content：內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            div {
                /*設置背景顏色*/
                background-color: blue;
                /*設置寬高*/
                width: 250px;
                height: 250px;
                /*設置外邊距*/
                margin: 130px;
                /*設置邊框的:邊框的寬度 邊框的樣式 邊框的顏色*/
                border: 10px solid red;
                /*設置內邊距:上,右,下,左*/
                padding: 20px 40px 50px 100px;
            }
        </style>
    </head>
    <body>
        <div>ABCDEFG</div>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html 盒子模型 CSS盒子模型與怪異盒模型 CSS盒子模型與怪異盒模型 CSS3盒子模型(上) CSS盒子模型（標准盒、怪異盒模型） Html 盒子模型講解 HTML中盒子模型 padding標准盒模型和怪異盒子模型 css盒子模型 css3盒子相關樣式前端之盒子模型