今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

1、今天完成了12第一个页面的修改和第二个页面的编码完成。

     之前的页面是用绝对定位来写的，再写一遍的感觉没有刚写的时候那么难了，绝对定位在有些时候是比较好用的，但是也有些问题是使用绝对定位后文档会脱离文档流，写到后面的时候就会有些影响，所以师兄建议说常用的样式就不要用绝对定位，所以就重新又用flex写了一遍。

     （1）写任务五的头部那里我用flex来写的时候我就遇到了问题，定义：flex后，div就会在并列在一起，但是问题是头部只有两个元素，我怎么样才能让两个元素一个分别居左，一个居中呢，因为flex是给父级设置作用于子级的，所以这里我的思维就有点固化了，我首先想到的是justify-content这个属性里的值，分别用div单独嵌套他们，再用一个大的div再嵌套两个嵌套div的元素，后面想想发现盒子会套的很多，可能是思考方式不对。

            然后决定去找找资料，后面想到前面做任务8.9的时候一排三个div就可以用justify-content：space-between这个属性，让元素之间的距离相等，所以头部就可以分为三个div，分别让它居左居中居右，可以按照这个思维来后面我就尝试用了一个空的div，然后再用这个属性发现是可以的，因为是三个div，不管div里有没有内容，div就相当于一个盒子，flex的属性就会让这个盒子变成你想要的效果，所以flex可以写很多种形式，就要发挥自己的想象力熟练运用它。下面我这里有两个例子，是我在写12两个页面时遇到的问题。废话不多说，直接上代码：

这个就是上面说的头部，html的分布如下，不需要多次嵌套盒子，只需要多加一个空的div就能解决，感觉是不是很神奇，然后给header设置flex，这里header也可以看做一个div。

space-between让三个元素之间的距离相等，align-items：center让元素垂直居中，所以header头部就这样写出来了，很简单，只需要三个代码就能解决。效果如下：

如果还想移动到你想要的位置，就可以用margin或者padding值来达到你想要的位置。

（2）第二个遇到的问题其实和头部是类似的，只是头部是增加一个div，下面遇到的这个问题是减少一个div。如下图：

红框中这一列用flex怎么来写呢，如果是同一个属性space-between来写又可以怎么布局呢，如果还是像上面的方式是不行的，这样25元/小时就会在中间，但是ui图上25元/小时是靠右的，想了半天尝试了后发现还是不行，然后就试着把25元/小时的div和这个箭头的div一起放在一个div里，再用space-between这个属性发现是可以的，可以让两个元素分别居左居右，实现元素之间距离相等。然后方法还是一样用margin和padding来解决。

html：

我这里用div嵌套了p元素和span元素。

     得出的结论是同样的属性，在遇到不同的样式可以有不同的布局方式，想想的同时不妨动手试试，多尝试会找到方法的。感觉flex使用的还不是很熟，还有很多可能都没有遇到。

2、学习了less中的mixin（混入）的方法。

       在less文档中有的样式代码是重复的，所以你就要重复再写上，这样就会增加代码，所以就可以设一个公共样式的mixin，然后用类选择器或者id选择器来混入。其实这种方法可以理解为嵌入，把常用的样式设置公共的后，然后再嵌套。

       用类选择器来写，就像我们前面写css样式一样，先给它设个类名定义这个是什么内容，然后在通过类名的嵌套插入其中，通过less编译后的代码就有你设的那些公共样式。写法如下：

这里是用类选择器来写的公共样式，然后再嵌套进去，只有一个代码就行了。

       用id选择器的方法是一样的，只是要用到#来定义选择id。

3、完成了任务12的提交。

明天计划的事情：（一定要写非常细致的内容） 

1、开始任务13的三个页面制作。

遇到的问题：（遇到什么困难，怎么解决的）

 最近遇到的问题基本上都是宽和高造成的，不是定高的问题就是定宽的问题，导致后面写的时候就出现问题，然后又再去找问题。

收获：（通过今天的学习，学到了什么知识）

最近两个任务基本上是用的background的插入图片的方式来写的，学习了background中的position、还有size：contain和cover两个值。

contain和cover的区别：

相同点：都是同比例的缩放照片。

不同点：cover是铺满整个显示区域，如果显示的比例和显示区域的比例相差太大某些部分不会显示出来。

              contain是相反的，它是按照宽度来适应显示区域，如果按照等比例高度就会很矮。

任务总结：

任务名称：CSS-task12

成果链接：https://guilinxi.github.io/GUI/task12/task12.html

任务耗时：本次任务从19.1.4-19.1.7 共耗时3天，请假1天。

官方脑图：

个人脑图：

任务总结：

任务12和11差别不大，都是使用less或者sass重新编写以前的页面，重新写一遍写法不一样，因为这里要想着简化代码，然后是css代码的规范。

       1、css书写顺序：

        显示属性：display/list-style/position/float/clear

        自身属性（盒模型)：width/height/margin/padding/border

行高：line-height

文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

其他：cursor/z-index/zoom/overflow

CSS3属性：transform/transition/animation/box-shadow/border-radius

如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后

      2、class的命名：

     言简意赅的语义化命名，简单的英文单词进行组合，

     不允许通过1、2、3等序号进行命名；避免class与id重名，也尽量不要用汉译化。

     css的规范这个还是要养成习惯。

     这个任务的难点就是在手写bootstrap下拉菜单，因为不用组件就要通过其他的方法来写，这里我用的是hover效果来实现触发下拉框，所以这里选的是用ul和li标签来写。主要还是使用绝对定位的black和         none来实现。第一步还是写出三个下拉框的样式，用相对定位和宽度百分比分成三个单独框，然后再用li元素写上下拉后的文字内容，给它设置display：block，设置行高和百分比，再让文字居中就让整         个 样式写的差不多了，用display：none隐藏li元素的下拉框的选项，在通过给hover效果触发就行了。这里遇到一个问题，因为我给li设了float：left和相对定位，所以导致选项内容并列，父级ul元素设置         了width100%，但是并没有让li继承，所以给li设置好width：100%就能撑起内容。整个写下来就几行代码能解决，分成两个部分来写就行。

         做完这个任务对于less工具也有了新的了解。