CSS的逻辑属性对盒模型带来的变化

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在《理解CSS的逻辑属性和值》一文中,我们对CSS逻辑属性和值(CSS Logical Properties and Values Level 1)有所了解。事实上对于广大前端开发者而言,自从Web诞生以来,就习惯了使用用物理CSS属性。比如上、右、下和左,映射到CSS的盒模型就是marginpaddingbordertoprightbottomleft设置元素。但随着CSS的书写模式特性的出现,的概念在某种程度上已经失去了其意义。

为什么这么说呢?来举个例子。

假设你的网站上的内容是从右到左(dir:rtl)排列(比如说一个阿拉伯语种的网站),此时你的左边可能是物理上的右边。因此,如果你使用margin-left: 100px来设置在间距,就需要使用margin-right: 100px来替代,否则出现的效果刚好是你意想的相反。

但有的时候你的网站可能是既有从左到右(ltr)和从右到左(rtl)混合排版的内容,那么就需要根据不同的情况设置*-left*-right的值。如果你的排版中还混合有垂直排版的模式,那么问题就会变得更为复杂,因为内容是物理的顶部或底部。

CSS的逻辑属性规范的出现将从此改变这一现状,它定义了一组逻辑(而不是物理)属性和值,主要用来防止上述提到的相关问题。因此,当你想设置内容的方向和书写模式无关的话,可以采用margin-left:100px这样的方式,反之你就可以使用逻辑属性margin-inline-start: 100px,这样可以让整个排版变得更为智能。《理解CSS的逻辑属性和值》一文中就详细的介绍了这方面的特性和应用(你可以阅读@Rachel Andrew写的原文)。比如下图所示的一个效果:

文章开头也提到过,广大的前端开发者,大部分情况下只熟悉物理属性,而对逻辑属性相关的并不太清楚。这也引发了一个新问题。逻辑属性的出现,对于我们已经熟悉的CSS的盒模型又有何不同呢?或者说,CSS逻辑属性的出现,对CSS的盒模型又将带来什么样的变化呢?这也就是我们今天需要了解和深入探究的。如果你感兴趣的话,欢迎继续往下阅读。

回忆CSS的盒模型

既然我们要聊CSS的盒模型,那么我们就很有必要的先快速的回忆CSS中盒模型相关的概念和特性。

CSS规范中把盒模型单独的列为一个模块来进行维护,现在已经进入到了Level 3的时代(CSS Box Model Module Level 3)。

CSS合模型是一组规则的集合。主要用于确定Web页面中每个元素的尺寸。

CSS中的每个元素都可以比作是一个盒子(Box)。

既然元素是一个盒子,那么我们就可以通过CSS属性(物理属性)来决定盒子的大小。而决定盒子的尺寸大小主要由四个属性来决定:

  • Content:元素中的文本、图像或其他媒体内容
  • padding:盒子内容和边框之间的空间
  • border:盒子的边框
  • margin:盒子与其他盒子之间的距离

如果我们用一张图来描述的话,可以类似下面这样的:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/new-box-model-width-logical-properties.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部