在css中，一个盒子的尺寸是这样定义的

21fanqie · 发表于 2024-7-23 22:02:56

css内定义的宽（width）和高（height），指的是填充以里的内容范围。
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

css代码：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

解释：padding——内容与周边的距离，border——边框宽度，margin——盒子与周边其他盒子或其他内容的距离

html代码：

<body>
   <div>文本内容</div>
</body>

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：

登录/注册后可看大图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>宽度和高度</title>
    <style type="text/css">
    li {
        border-bottom: 1px dotted #ccc;
        width: 200px;
        height: 30px;
    }
    </style>
</head>
<body>
    <ul>
        <li>别让不会说话害了你</li>
        <li>二十七八岁就应该有的见识</li>
        <li>别让不好意思害了你</li>
    </ul>
</body>
</html>

dotted：表示边框为点状。

		自动登录	找回密码
密码			立即注册

[CSS] 在css中，一个盒子的尺寸是这样定义的

相关帖子