今天完成：

1、          修改通过任务八

2、          了解sass

3、          开始做任务十一

明天计划：

1、修改提交任务九

2、完成任务十一

3、如果完成前两项有时间了解js基础知识

遇到的问题：

1、做bootstrap折叠（Collapse）demo时,无法顺利使用data-parent 属性。

注意点：如果希望data-parent属性生效，那么控制展开或折叠的组件，不能时展开或折叠内容的父元素。data-parent 属性可以保证展开一个组件的同时，其他组件会闭合，保持视觉上的简洁。

2、sass书写顺序问题。

url()写在size前会报错，如图：

调转下顺序，即可。

收获：

1、     Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

2、     background: {

           image：url("../img/bg.png");

}

            红色部分应有空格，不然无法生效

3、混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像:

@mixin link-colors($normal, $hover, $visited) {

  color: $normal;

  &:hover { color: $hover; }

  &:visited { color: $visited; }

}

4、使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现

5、Sass 插值

它使用＃{} 语法提供选择器和属性名称中的SassScript变量。您可以在花括号中指定变量或属性名称。

比如

p:after {

  content: "I have #{8 + 2} books on SASS!";

}

Css代码为

p:after {

  content: "I have 10 books on SASS!";

}

6 @each指令在@each中，定义了一个变量，其中包含列表中每个项目的值。

语句

@each $var in <list or map>

$var: 它表示变量的名称。 @each规则将$var设置到列表中的每个项目，并使用值$var输出样式。

<list or map>: 这些是SassScript表达式，将返回列表或映射。

例子如下：

@each $header, $color in (h1: red, h2: green, h3: blue) {

  #{$header} {

    color: $color;

  }

}

7、@while指令

与其他控制指令一样， @while 指令也采用SassScript表达式，直到语句计算结果为false，它迭代地输出嵌套样式。 要注意的关键是，计数器变量需要在每次迭代时递增/递减。

代码如下：

$i: 50;

@while $i > 0 {

  .paddding-#{$i} { padding-left: 1px * $i; }

  $i: $i - 10;

}

任务名称 ：css-task-08

成果链接：http://118.126.113.248/jnshu767/cssTask8/css8Index.html

任务耗时：2019.1.10-2019.11.15（6天）

官网脑图：

自己的脑图：

任务总结：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

• 内容
  • 决定什么是最重要的。
• 布局
  • 优先设计更小的宽度。
  • 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
• 渐进增强
  • 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 内容应该放置在列内，且唯有列可以是行的直接子元素。
• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  
  

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

超小设备（手机，小于 768px） Bootstrap 中默认情况下没有媒体查询 

小型设备（平板电脑，768px 起）  @media (min-width: @screen-sm-min) { ... } 

中型设备（台式电脑，992px 起） @media (min-width: @screen-md-min) { ... }  

大型设备（大台式电脑，1200px 起） @media (min-width: @screen-lg-min) { ... }

实现居中的几种方法

水平居中

text-align: center;

margin: 0 auto;

positon: absolute;

display: flex;

垂直居中

positon: absolute; 和 display: flex;

line-height 实现文字的垂直居中

margin: auto 0;

table-cell+vertical-align: middle;

Bootstrap 折叠（Collapse）插件

data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。

href 或 data-target 属性添加到父组件，它的值是子组件的 id。

data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接