任务11，今天粗略了配置了一下less和sass的安装与环境，配置。简单看了一个关于less的文档。

遇到的问题，关于less的环境配置，在网上找了一堆教程，走了不少弯路。

关于less的安装与配置。

首先，我们在https://nodejs.org/en/网站上下载。nodejs。

下载最左边的版本。这个版本大多数人用，而且稳定。

下载之后。

运行并安装程序，在d盘创建一个文件夹，放在里面。

点击Windows开始+r，运行命令。

输入命令提示符下运行以下命令 

node -v & npm -v 

看到版本号就成功了。

安装less，命令提示符然后npm install less -g 回车下载安装，安装会提示安装路径，记下该路径一会儿要用。

点击文件，settings，找到 tools，flie-watchers。点击加号，去配置我们的文件。

之前安装的时候，记下来的路径，我们直接在Program上设置，如果没有记住得话，这个文件叫做，lessc.cmd。

Arguments设置参数。

$FileName$ $FileNameWithoutExtension$.css --source-map

设置刷新路径

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map。然后大功告成。

网上的教程上要弄一大堆的命名行什么的，花里胡哨根本不需要。l配置less的过程中遇到了不少问题，所以就也下载了sass，进行配置。

sass的配置，在https://www.sass.hk/install/中文网上下载。

安装的时候一定要把这个选项点了，其他的一路next就行了。

下载完成，运行cmd看一下成功了没有。

ruby -v

//如安装成功会打印

ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。

使用淘宝的gem源。

.删除原gem源

gem sources --remove https://rubygems.org/

添加国内淘宝源

gem sources -a https://ruby.taobao.org/

查看是否替换成功

gem sources -l

更换成功后显示如下

*** CURRENT SOURCES ***

https://ruby.taobao.org/

Ruby自带一个叫做RubyGems的系统，安装基于Ruby的软件。

我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，我们需要输入cmd命令。

gem install sass

gem install compass

安装完成之后，输入cmd命令，sass -v查看是否安装成功，成功如下。

Sass 3.x.x (Selective Steve)

compass -v（成功如下）

Compass 1.x.x (Polaris)

Copyright (c) 2008-2015 Chris Eppstein

Released under the MIT License.

Compass is charityware.

Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

配置与配置less一样，sass要引入的路径，叫sass.btn。

收获，今天在任务11，配置less或者sass上面，走了不少弯路，原来下个应用都要放在c盘的我，去配置这种东西，确实有点困难。看了好多教程，但是感觉对自己的收益还是很大的。一个程序员不可能连一个less都不知道怎么装，怎么配置在webstrom上面去。师兄跟我提到了有关组件库的知识。以后写css部分的时候，就不用写那么多行了，页面加载效果也会很快。

任务9，任务总结

第一次接触到了bootstrap框架，刚看栅格系统，grid布局的时候，完全一脸懵逼的状态，导航栏组件也不知道从哪里下手去改。感觉完全颠覆了之前对css部分的理解。后面慢慢学会如何运用栅格系统，网格布局。导航栏的样式修改。媒体查询效果。

原来可以这样做，居然可以这样写。任务进度还是比较慢的。

如何实现轮播图?

bootstrap4框架里面，有成熟的组件，引进来，更改轮播图样式就好了。

主流的浏览器的内核有哪几种。

什么是浏览器的内核？

浏览器的内心部分，最重要的部分叫做“Rendering Engine"可以称为渲染引擎。我们一般习惯叫做浏览器内核，负责对网页的语法的解释，如标准通用标记语言下的应用HTML，javascritp，并渲染网页，渲染引擎决定了浏览器如何显示网页的内容，以及页面格式的信息。不同的浏览器对网页编写语法的解释也有不同，因此可能一个网页在不同内核的浏览器下面渲染，显示的效果可能有不同。

(1)Trident内核（ie浏览器的内核）

(2)Gecko内核（火狐浏览器内核）

(3)WebKit内核（苹果safari浏览器内核）

(4)Blink内核（ Google和Opera Software内核）

什么是外间距重叠?

外间距重叠是指的是，两个盒子模型同时设置了外边距，并且这种情况只会发生在垂直局部的情况下，如果是垂直布局得话。是不会出现这种现象的。

两个垂直的盒子模型同时设置了外间距，距离很近得话，就会沦为一个外边距。

解决方法很多，最简单的就是，用padding取代，或者加一条边框。边框1px，颜色和背景颜色保持一致。

div+css的布局较table布局有什么优点？ 

div+css布局的优点是

符合w3c的标准，代码结构简单，结构简单，样式行为分离。可维护性强。

布局精准，页面修改简单。

加快页面加载速度，（ie需要把整个table部分加载完才会现实内容）

节约站点所占的空间和站点流量。

用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

table

容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

综合上面对两种不同网页布局的分析，大家也很显然看得出HTML+CSS的布局是很占据优势的，这也是现在HTML+CSS成为主流的原因吧。

bootstrap有哪些常用组件？

bootstrap常用组件有轮播图，导航栏，下拉菜单。

css  有哪些方式可以实现垂直居中，第一种flex布局。第二种，文字liheight，第三种，上下边距设置一样。第四种，定位。