百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

css萌新上分之路

作者周润丰课程任务二:零基础HTML及CSS编码(一)4693次浏览342017-03-02 17:43

写完这个页面的一些收获,在这里给大家分享一下。

一、 关于css的层叠与特殊性

在写css的代码的时候,碰到这样一个问题,例如下面一段html代码:

<article id="article">
    <header>
      <h2>文章一级标题</h2>
      <h2>文章二级标题</h2>
      <p>文章作者&nbsp文章发表时间</p>
    </header>
    ......
</article>

我想修改h2的font-size为15px,并且把h2和p的颜色改为灰色,我当时写的规则是这样的:

#article header h2, #article header h2 + p {
    font-size: 15px;
    color: grey;
}

然后,我又把其中的p的font-size设为12px,于是又写了这样的一条规则:

#article header > p {
    font-size: 12px;
}

刷新浏览器,然而p的font-size并没有变化,当时我就懵逼了,上课的时候明明听老师说好像有一个就近原则的呀,怎么到这里没用了呢?
不信邪啊,好在我机智的翻了书,看到了关于css的特殊性以及层叠的特性,于是我顿悟了。根据《CSS权威指南》上说得,将特殊性表述为4个部分,如:0,0,0,0,我简单总结一下,判断css中一个选择器的特殊性:

  • id选择器,加0,1,0,0
  • 类选择器,属性选择以及伪类,加0,0,1,0
  • 元素以及伪元素,加0,0,0,1
  • 结合符和通配符*,特殊性为0,0,0,0
  • 内联样式声明的特殊性都是1,0,0,0
  • 高位非零的特殊性永远比同位为零的特殊性要高,例如特殊性值1,0,0,0大于0,x,x,x的特殊值,且无论x的值为多少

根据以上规则,可以计算一下我之前写的css选择器的特殊性,#article header h2 + p的特殊性值就是0,1,0,3, 而#article header > p的特殊性值为0,1,0,2,所以p的font-size不会发生变化。于是我把它改为#article header h2 + p
这时,两个选择器的特殊性相同,浏览器会根据css的层叠规则来匹配其中一个规则,下面简述一下css的层叠规则:

  1. 找出所有相关的规则,每个规则都包含一个给定元素匹配的选择器
  2. 按显式权重对应用到该元素的所有声明排序,声明权重由大到小依次为:读者的重要声明(即有!important标志)、创作人员的重要声明、创作人员的正常声明、读者的正常声明、用户代理(通常指浏览器)声明。
  3. 按特殊性对应用带给定元素的所有声明排序
  4. 按出现顺序对应用给定元素的所有声明排序,一个声明越靠后,权重越大。
    因此根据第四条的规则,第二条#article header h2 + p将胜出,刷新浏览器,p的font-size确实变为12px。

二、关于外边距的合并的问题

在写最后表单的标题的css时,图片上要求实现一个类似于markdown中区块引用的效果,如:

这里以后是一个侧栏,这是侧栏的标题

显示左边框,文字垂直居中显示。我很快想到可用border-left来显示左边框,然后在h2中通过设置margin值来使文字居中,代码如下:

#article4 header {
    border-left: 4px solid darkgray;
}
#article4 header > h2 {
    font-size: 18px;
    margin-left: 10px;
    margin-top: 10px;
}

too young too naive,结果标题一直紧贴在header上边,我又一次懵逼了,这又怎么了,不管我怎么修改margin值,标题就像牛皮癣一样死死地紧贴着,
后来百度了一下才知道是外边距合并导致的。那么什么是外边距合并呢?为什么要采用这种方法呢?带着这些疑问,我继续深入地探查了一番,逐渐有了一些头绪。
  W3School上说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
那么它的意义何在呢?按我的理解(不知道对否)是,缩小块与块之间的间隔,减少占用的空间,使布局更美观。可是在这个页面中,我不需要它合并呀,那又该如何解决呢,根据网络上提供的方案,目前我知道的有两种解决外边框合并的方法:

  1. 给父类添加一个边框,即给header加一个border-top即可,但这样就不符合题目的要求了,所以采用第二种。
  2. 在父类中添加padding
    于是乎,我们的代码就变成了这样:
     #article4 header {
          border-left: 4px solid darkgray;
          padding: 10px 10px;
      }
      #article4 header > h2 {
          font-size: 18px;
      }
    
    刷新浏览器,标题文字终于正常居中,TAT,感动的都快哭了!

以上是我的总结,如果有哪里不对的地方,请多多指点。前端路上,与君共勉。

2条评论