今天完成的事情：首先是学习了sass的maps

一般声明变量的时候，会使用各种单词的取名。

通常没有比较系统的写法。

$base-color: #ff6599;

$light-grey: #efefef;、

可以使用maps来将这些变量声明为maps类型。

$map: (

  key1: value1, 

  key2: value2, 

  key3: value3

);

maps类型内存储着一个个的键值对，(”key = value”)属性名为键、属性值为值。

这样就可以将上面的颜色写成。

$colors: (

  lt-grey: #efefef,

  grey: #424242,

  pink: #ff6599,

);

这里要注意声明maps类型的时候，要使用（）圆括号.因为maps类型也是一个变量，只是其中存储的是键值对。

和声明其他变量的写法类似。

$变量名：（键值对）；

正常使用maps类型内的单个键值对信息则需要

background: map-get($colors, lt-grey);、

这里可以使用@function 自定义函数来进行简化使用的步骤

@function和@return。前者创建函数，后者表明了函数将返回的值。

@function color($color-name) {

  @return map-get($colors, $color-name);

}

这样子只需要

color: color(pink);可以使用each语句来对maps进行遍历。而后通过for循环达到想要的效果

box sizing属性。

可以特定的方式定义匹配某个区域的特定元素。

它的值有三个、

content-box

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 从父元素继承boxsizing的值

明天计划的事情：写完任务十四十五。

遇到的问题：导航栏的写法，通过label标签绑定input的checked点击事件

首先利用media 媒体查询，在576px的时候隐藏导航栏文字。显示label标签的按钮样式。而后通过

input：checked~text{

display:block；

}

来让之前隐藏的文本显示。

这里首先要对整个导航栏外层盒子设置flex布局，然后设置flex-wrap：wrap；

来设法让显示的隐藏文本到下一行。不知道对不对。

收获：maps的使用