今天完成的事情： 

完成任务6,。task6的深度思考，任务7主页布局完成，

如何去除inline-block 的间隙?

1，间隙一般是因为标签之间有空格，可以在html中直接把元素写在一行上，或把闭合标签和第二个开始标签写在一行，或两行间添加注释（使他们如同一行），或直接去掉闭合标签，但最后一个不能去掉（向下兼容ie浏览器）。

2，使用font-size:0;这个方法（父元素为0子元素自行设定）基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。

3，margin 的负值，margin负值的大小与上下文的字体和文字大小相关，由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

4，使用letter-spacing，是字符间距属性，父元素可以设置为负值，但是子元素需要设置为0，不然会继承父元素的属性。

5，word-spacing，词间距，同上设置，负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

css可继承属性：以下内容来自  https://www.jb51.net/css/572045.html

css可以和不可以继承的属性

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。 
 

继承的局限性

继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景等。
这样设定是有道理的，例如，为一个<div>设定了边框，如果此属性也继承的话，那么在这个<div>内所有的元素都会有边框，这无疑会产生一个让人眼花缭乱的结果。同样的，影响元素位置的属性，例如margin（边距）和padding（补白），也不会被继承。

能否取消

css属性一旦继承了不能被取消，只能重新定义样式

明天计划：完成任务7.

遇到的问题解决方法   以及收获：

顶部右边的按钮超出了一部分图标，设置图标按钮的时候应该考虑图标大小，设置按钮的大小与图标大小相同，因为button有一个最小的宽高。

下拉栏自适应的问题，设置的下拉栏菜单设定的宽度100%跟随父级，按理说是跟随屏幕虽小的，但是缩小屏幕达到一定程度的时候并没有再缩小了，再谷歌浏览器调试的时候看见一个min-width最小宽度=10rem，后面我给下拉菜单添加一个属性min-width=0，问题解决 。

屏幕缩小，下拉栏菜单遮掩了顶部和底部   固定于屏幕上下方的按钮栏，使用position属性调整的图标，堆叠在下拉栏菜单里，设置z-index：0给下拉栏，按钮栏使用z-index：1，设置负值给图标解决。

布局使用position的时候需要考虑到堆叠，z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

红字右边的箭头，使用的字符>然后放大font-size，导致字体过大，无法与红字对齐，使用CSS写一个空白盒子，然后添加border-top和border-right然后使用transform进行旋转，做成一个箭头。期间尝试使用<i>标签，因为没有单独一个div包裹，显示出来的效果是超出行内宽度100%，产生了左右滚动条。以及margin导致倾斜。

使用css写一个三横条的导航菜单：利用border和高度来绘制。padding来撑开间距，引入一个属性background-clip: content-box;规定背景的绘制区域，内容到盒子。这个内容是白色横条，border-top和bottom也是白色横条，这样就达成了三横条图标。

三横白条若间隔相同的话，height=（border-top）x5倍。因为上下border+上下padding+内容高度=5倍border。

弹性盒子若设定了flex-direction：column；则主轴（水平轴）相当于旋转90度，变成纵向，而设定justify-content:center反而变成了横向居中。设定盒子排列方向之后要注意关于主轴和交叉轴的设定。