盒模型--宽度和高度

Posted 2020-07-19 Rinpe

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型--宽度和高度相关的知识，希望对你有一定的参考价值。

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如：

css代码：

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

html代码：

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

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

以上是关于盒模型--宽度和高度的主要内容，如果未能解决你的问题，请参考以下文章