今天做的事

今天把任务六做完调试完毕了

效果如图

也发现了很多问题

尤其是要补一下写代码的规范

一.命名规范BEM(Block Element Modifier)

1.Block name

2.Element name

3.Block modifier name

Example:

二.注释规范

1.单行注释

2.模块注释

3.文件信息注释

三.代码风格

1.代码格式化

2.代码大小写

3.选择器

• 尽量少用通用选择器 *
• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

4.属性书写顺序

• 布局定位属性：display / position / float / clear / visibility / overflow
• 自身属性：width / height / margin / padding / border / background
• 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
• 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

5.CSS3浏览器私有前缀写法

任务六深度思考;

首先先上个刚做完的脑图吧：

1.去除inline-block间距有哪几种方法？

isplay:inline; 内联元素，简单来说就是在同一行显示。

display:block; 块级元素，简单来说就是就是有换行，会换到第二行。

display:inline-block; 即内联块状元素，可以水平排版。

知识剖析

inline-block 内联块状元素，可以水平排版。但我们发现inline-block元素间在换行显示或空格分隔的情况下会出现空白间隙。 这种表现是符合规范的应该有的表现，而不是bug。但是有时候会对我们的布局造成影响，所以有时候我们需要想办法去除它。

方法一:改变书写方式

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了。

我们可以把inline-block元素写在同一行，这种方案是最直接的解决方案，但却也是最不靠谱的方案，存在很多不可控因素。 很多场景会让你崩溃：前后端协同；版本更迭；他人接手；自己忘了...，太多一不小心都可能让这个方案失效。

方法二：font-size

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。

方法三：使用margin负值

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

方法四：使用word-spacing或letter-spacing

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。 父元素letter-spacing负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，即使父元素letter-spacing负值很大，也不会发生重叠。但是子元素要设置letter-spacing为0，不然会继承父元素的值；使用word-spacing时，只需设置父元素word-spacing为合适值即可。

2.css有哪些属性可以继承？  

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

css六任务总结：

用到了新的知识比如说flex布局，其中的垂直居中和两边对齐都是非常的好用且常用的东西，能学习到这个是非常不错的，起码居中啥的方便多了。。。

最重要的还是了解了bootstrap中的栅格布局，这个也叫响应式布局，这个东西知识太多了，一时间难以理解，就是刚开始引入四行代码，一行css、

三行js，这个布局开始还是比较简单的，任务六也是用上了，第一次用到这个布局感觉还可以，这两个布局就是东西太多难以消化，不过越复杂的东西功能越强大，又一次的加强了我对代码的理解。

遇到的问题

代码不规范被师兄们指导

收获

对写代码的思路更加的清晰了

明天的计划

开始任务7