CSS的盒模型

    xiaoxiao2021-03-25  108

    一个盒子中主要的属性5个:width、height、padding、border、margin。

    width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。

    height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度

    padding是“内边距”的意思

    border是“边框”

    margin是“外边距”

    下面就是盒模型的属性的值

    这里我们定义一个div

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    div{

    width: 200px;

    height: 200px;

    padding: 10px;

    border:6px solid red;

             

    }

    </style>

    </head>

    <body>

    <div></div>

    </body>

    </html>

    上述代码,我们设置width=200px,height: 200px;但是盒子占据的真实的宽度和高度是200+10*2+6*2=232.即232*232。

     

     

     

    转载请注明原文地址: https://ju.6miu.com/read-24398.html

    最新回复(0)