您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

为什么CSS的width和height属性不适合填充?

为什么CSS的width和height属性不适合填充?

CSS使用@R_978_2419@模型的原因是:

+---------------------
|       Margin
| +-------------------
| |     Border
| | +-----------------
| | |   Padding
| | | +---------------
| | | | Width x Height

是因为CSS是一种文档样式语言。(最初)设计时考虑了研究论文和其他正式文件,而不是用来制作漂亮的图形。因此,模型围绕内容而不是容器旋转。

CSS不是一种编程语言,而是一种样式语言。它没有明确告诉文档应如何显示,而是提出了浏览器应遵循的一些准则。所有这些都可以由实际的编程语言:JavaScript 覆盖和修改

回到内容模型的想法,考虑以下CSS:

p
{
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  margin: 10px;
  padding: 9px;
  width: 400px;
}

height未指定,因为内容定义了高度,它可能会很长,可能会很短,但这是未知且无关紧要的。该width设置,因为这是有多宽400像素的内容(文本)应该是。

该padding仅仅是延长的背景颜色,使的手段文字可以从边缘清晰漂亮了,就像你如何留出空间上的一张纸上写时/打印。

这border是一种围绕某些内容以使其与其他背景区分开的方法,或在各种元素之间提供边框(图形)。

该margin通知段落离开边缘之间一定的空间,并与容限塌陷,每组将保持均匀,而不必隔开指定不同的余量为所述第一或最后一个元素。

为了保持流畅性,width认为auto,这意味着宽度将尽可能宽:

不会不合理地压缩内容没有填充物超出其容器当然,在边缘情况下,填充内容将扩展到其容器之外,因为内容可能会被压缩。这都是关于内容的。

CSS 2022/1/1 18:19:34 有401人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶