今天完成的事：

1.重写了任务十三第一个页面的侧向导航栏，学习了JS的写法

2.探讨了几个文字属性， word-spacing white-space letter-spacing

明天的计划：

1.开始任务十四学习

2.学习模块化和组件化

3.了解一下bootstrap的源码

遇到的问题：

无

收获：

1.侧向导航栏的写法，本来想用label+input的点击事件爱能：checked，但是之前的任务都在用这个方法，所以就想怎么用js来控制display:none —— display:block的转化，实现导航栏的出现，后来经过学习，可以通过 onclick点击事件函数+if语句来实现。

2.今天做任务，有个页面需要调整字体之间的距离，但是突然不知道用哪个属性好，经过查询，分别有这几个会影响字体之间的距离，word-spacing white-space letter-spacing,顿时蒙逼，然后我就开始探究，现在非常清楚它们各自的作用了

• nowrap：不换行，除非遇到<br />，n个空格会被压缩为一个。
• 
  
• pre：保留所有空白。其行为方式类似 HTML 中的 <pre> 标签。
• pre-wrap：保留所有空白，但是正常地进行换行 （chrome，FF，IE8+，Opera），在IE6和IE7下等同于normal
• 
  
• normal： 默认。空白会被浏览器忽略。
• pre-line：合并空白符序列（合并成一个），但是保留换行符（chrome，FF，IE8+，Opera），在IE6和IE7下面等同于normal

任务十一任务总结：

官网脑图：

我的脑图：

任务十一开始学习sass的使用，写sass的核心思想： 不要做重复的工作

1.@mixin混合器
{ 如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。}
可以把跨浏览器的代码统一打包，这样引用起来就贼方便  注意： 是@mixin定义，然后@include引出
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
这样就已经包括了-webkit -moz，然后想在后面继续使用border-radius，就可以直接把浏览器的适配代码也引过来
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

但是由于这样用起来太方便了，所以又导致一个问题——容易被滥用
更精确的定制混合器：给css属性 赋值一个变量（类似javascript的function）
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
用@include，把css函数的参数（属性值）穿出来：
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
这样看来就可以发现，link-colors里面的值是一一对应的关系，很难区分，所以可以再升级
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}

这样把参数和属性排好队，写在a标签里

2.选择器的继承  @extend
简单来说，就是一个标签里属性，我可以直接搬到下面一个标签里
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
现在seriousError拥有了背景fdd浅红色，自己的3px 加上红色边框（1px被替换成自己原来的）
注意一点： .seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承。
例如：
//.seriousError从.error继承样式
.error a{ //应用到 .seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
可以看到只要有 .error都会”殃及“，所以使用的时候，不能太随意呀！

3.sass特性—— 变量

sass特性—— 嵌套

sass特性——父选择器（对伪元素很友好）

4.sass的注释和CSS的区别

5.sass输出的样式有四种

---------------------------------------

任务十二任务总结

任务名称：css12

成果链接：http://www.linlearning.top/task12/html/task12.html

任务耗时：2019.3.23-3.24（2天）

官网脑图：

我的脑图;

1、属性书写顺序：

同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

解释：

• • Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
  • Box Model 相关属性包括：border / margin / padding / width / height 等
  • Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
  • Visual 相关属性包括：background / color / transition / list-style 等

另外，如果包含 content 属性，应放在最前面。

2、属性缩写：

在可以使用缩写的情况下，尽量使用属性缩写。

使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。

3、清除浮动：

当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

BFC的F就是格式化的意思 formatting  ，b就是最熟悉的block块级元素，c就是文本content。 所以全称是 块级格式化上下文本

一个与外部隔离，相对独立的盒子，但是存在于文档流中（absolute float这种都是脱离的）

想要触发BFC有以下几个条件

1.float: left

2.overflow   又分为 overflow-hidden  和 overflow-scroll

3.display:table

4.position的值，不是static或者relative ，也就是absolute和fixed也满足条件