Hi,又见面了。今天总结的是任务八，使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。完成基本版本后，我又学习了下scss, 做了一个scss版本。

代码地址：https://github.com/IridescentMia/IFE-Mia/tree/master/task8-Responsive%20Grid%20System

1. CSS3新属性：calc

之前就遇到过这样的问题，用100%的宽度减去固定像素的宽度，今天在一瞥别人的代码，竟然遇到它，真是相见恨晚呢。

【功能】混合各种单位进行运算，如百分比、px、em、rem等

【示例】

1
.box{ border:1px solid #ddd; width:calc(100%-2px) }

容器宽度加上边框宽度正好100%。

【参考】css3 calc()功能小窥

2. CSS3新属性：box-sizing

属性值：

  • content-box（默认）：border和padding不计算入width之内
  • padding-box：padding计算入width内
  • border-box：border和padding计算入width之内

3. CSS3新增选择器

在如下的html文档中选中所有class中包含’col-‘的 标签

1
2
3
<div class="col-md-4 col-sm-6"></div>
<div class="col-md-4 col-sm-6"></div>
<div class="col-md-4 col-sm-12"></div>

是时候用CSS3强大的选择器了

1
[class*='col-']{}

整理几个实用的属性选择器如下：

  1. img[alt]：匹配含有alt的img标签
  2. img[alt=’p’]：匹配alt=’p’的img标签
  3. img[alt^=’p’]：匹配alt以’p’开头的img标签
  4. img[alt*=’p’]：匹配alt包含’p’的img标签
  5. img[alt$=’p’]：匹配alt以’p’结尾的img标签

伪类选择器：

  1. li:first-child
  2. li:last-child
  3. li:nth-child(2n+3)：从第三个元素开始每2个元素选择1个
  4. li:not(.a)：没有a类的列表项

【参考】《响应式Web设计 HTML5和CSS3实战》

4. SCSS

4.1. 混合宏 vs 继承 vs 占位符
  • 混合宏：可以传递参数，不会合并相同样式代码
  • 继承：不能传参，会合并相同样式代码
  • 占位符：不能传参，只有调用占位符的时候才会在css中生成代码
4.2. 默认变量

在默认变量前声明同名变量，则覆盖默认变量

1
2
3
4
5
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}

【参考】Sass入门篇