文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中简写属性要注意TRouBLe的顺序,避免踩坑

2024-12-11 17:06

关注
  1. font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif; 

还有如下属性:

简写属性可以让代码简洁明了,但是也隐藏了一些怪异行为。

[[336842]]

简写属性会默默覆盖其他样式

大多数简写属性可以省略一些值,只指定我们关注的值。但是要知道,这样做仍然会设置省略的值,即它们会被隐式地设置为初始值。这会默默覆盖在其他地方定义的样式。比如,如果给网页使用简写属性 font 时,省略 font-weight,那么字体粗细就会被设置为normal。

 


 

简写属性会设置省略值为其初始值

添加如下CSS:

  1. h1{ 
  2.   font-weight: bold; 
  3. .title{ 
  4.   font: 32px Helvetica, Arial, sans-serif; 

乍一看可能会觉得会将加粗,但结果不是。以上代码等价于下面的代码:

  1. h1 { 
  2.   font-weight: bold; 
  3.  
  4. .title { 
  5.   font-style: normal;      (以下5行)这些属性的初始值 
  6.   font-variant: normal; 
  7.   font-weight: normal; 
  8.   font-stretch: normal; 
  9.   line-height: normal; 
  10.   font-size: 32px; 
  11.   font-family: Helvetica, Arial, sans-serif; 

添加这些样式会显示成普通的字体,而不是加粗的字体。这些样式也会覆盖从祖先元素继承的字体样式。在所有的简写属性里,font的问题最严重,因为它设置的属性值太多了。因此,要避免在元素的通用样式以外使用font。当然,其他简写属性也可能会遇到一样的问题,因此要当心。

理解简写值的顺序

简写属性会尽量包容指定的属性值的顺序。可以设置border: 1px solid black或者border: black 1px solid,两者都会生效。这是因为浏览器知道宽度、颜色、边框样式分别对应什么类型的值。

但是有很多属性的值很模糊。在这种情况下,值的顺序很关键。理解这些简写属性的顺序很重要。

1. 上、右、下、左 

当遇到像margin、padding这样的属性,还有为元素的四条边分别指定值的边框属性时,开发者容易弄错这些简写属性的顺序。这些属性的值是按顺时针方向,从上边开始的。

记住顺序能少犯错误。它的记忆口诀是TRouBLe:top(上)、right(右)、bottom(下)、left(左)。

用这个口诀给元素设置四边的内边距。如下图所示的链接,上内边距为10px,右内边距为15px,下内边距为0,左内边距为5px。虽然这些内边距看起来不是很均匀,但是可以说明简写属性的顺序。

  1. .nav a { 
  2.   color: white; 
  3.   background-color: #13a4a4; 
  4.   padding: 10px 15px 0 5px;          
  5.   border-radius: 2px; 
  6.   text-decoration: none; 

这种模式下的属性值还可以缩写。如果声明结束时四个属性值还剩一个没指定,没有指定的一边会取其对边的值。指定三个值时,左边和右边都会使用第二个值。指定两个值时,上边和下边会使用第一个值。如果只指定一个值,那么四个方向都会使用这个值。因此下面的声明都是等价的。

  1. padding: 1em 2em; 
  2. padding: 1em 2em 1em; 
  3. padding: 1em 2em 1em 2em; 

下面的声明也是等价的。

  1. padding: 1em; 
  2. padding: 1em 1em; 
  3. padding: 1em 1em 1em; 
  4. padding: 1em 1em 1em 1em; 

对很多开发人员而言,比较难的是指定三个值时。记住,这种情况指定了上、右、下的值。因为没有指定左边的值,所以它会取与右边相等的值。第二个值就会作用到左边和右边。因此 padding: 10px 15px 0 是设置左右内边距为15px,上内边距为10px,下内边距为0。

不过,大多数情况只需要指定两个值。尤其对于较小的元素,左右的内边距最好大于上下内边距。这种样式很适合网页的按钮或者导航链接,如下图所示。

  1. .nav a { 
  2.   color: white; 
  3.   background-color: #13a4a4; 
  4.   padding: 5px 15px;             
  5.   border-radius: 2px; 
  6.   text-decoration: none; 

它使用简写属性先给垂直方向加上内边距,再给水平方向加上内边距。

因为很多属性遵循这个,所以最好记住它。

2. 水平、垂直

“TRouBLe”口诀只适用于分别给盒子设置四个方向的值的属性。还有一些属性只支持最多指定两个值,这些属性包括 background-position、box-shadow、text-shadow(虽然严格来讲它们并不是简写属性)。这些属性值的顺序跟padding这种四值属性的顺序刚好相反。比如,padding: 1em 2em 先指定了垂直方向的上/下属性值,然后才是水平方向的右/左属性值,而 background-position: 25% 75% 则先指定水平方向的右/左属性值,然后才是垂直方向的上/下属性值。

虽然看起来顺序相反的定义违背了直觉,原因却很简单:这两个值代表了一个笛卡儿网格。笛卡儿网格的测量值一般是按照x,y(水平,垂直)的顺序来的。比如,如图1-15所示,要给元素加上一个阴影,就要先指定x(水平)值。

  1. .nav .featured{ 
  2.   background-color: orange; 
  3.   box-shadow: 10px 2px #6f9090;  
  1. <div class="nav"> 
  2.   <a href="#">Homea> 
  3.   <a href="#">Coffeesa> 
  4.   <a href="#">Brewersa> 
  5.   <a href="#" class="featured">Specialsa> 
  6. div> 

第一个(较大的)值指定了水平方向的偏移量,第二个(较小的)值指定了垂直方向的偏移量。

如果属性需要指定从一个点出发的两个方向的值,就想想“笛卡儿网格”。如果属性需要指定一个元素四个方向的值,就想想“时钟”。

 

来源:前端全栈开发者内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯