今天完成的事情：

写了CSS总结，看了点JS知识
明天计划的事情：

继续看JS知识
遇到的问题：

目前没有
收获：

CSS总结 ：

一、CSS 盒子模型

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

盒子模型有两种，分别是标准盒模型和IE盒模型。标准盒模型给标签添加【box-sizing:content-box】，IE盒模型给标签添加【box-sizing:border-box】。

二、文档流

盒子该如何进行摆放呢？
有了盒子模型的概念，那么html就是最大的一个盒子，其他内容都是嵌套在它里面的。还是回到刚刚提到的电视墙概念，盒子的摆放顺序是从左到右、从上到下，这个顺序就称为文档流。

三、定位（position）

当然文档流的顺序无法满足很多实际场景需要，才补充了脱离文档流的方案，浮动、绝对定位、相对定位。

1. 浮动（float），类似水流一样，具有流动的方向，盒子在水流上，就会跟着水流方向流动，碰到同向上其他盒子才停止。

2. 绝对定位（absolute），直接根据坐标进行定位，根据父节点为坐标系；

3. 固定定位（fixed）根据浏览器窗口为坐标系。

4. 相对定位（relative），是相对于节点本身原有位置，进行坐标定位。

技术点：文档流顺序、浮动、绝对定位、高度坍塌、浮动副作用、层级遮挡。

最佳实践：

1. 浮动需要注意高度坍塌和清除浮动，两种方式，父节点的伪元素和末尾节点的clear；

2. 脱离文档流后就存在层级遮挡问题，需要设置z-index。

四、伪元素

html已经存在的元素之外，还可以通过css来定义伪元素。类似于servlet中的拦截器，在处理请求的前后添加额外的业务逻辑。

常用伪元素：

：first-letter、：first-line、：before、：after、：hover

超链接：

：hover、：link、：visited、：avtive

最佳实践：利用hover等伪元素，可以让CSS实现js的效果。

五、图文相关

css设计之初就是针对图文进行美化，所以图片和文字有很多特定属性。
常用的图片尺寸、字体大小、字体类型。
字体大小还涉及到硬件设备，绝对的px，相对的em、rem。
图片还涉及到性能优化，用数据来替换图片等技术。

六、选择器

CSS技术就是给盒子设置不同的属性值，来对盒子进行美化。

那么怎么选择指定的“盒子们”呢？

就需要CSS提供的多种盒子选择器了。

• 常用选择器：

html标签选择器、类选择器、id选择器、属性选择器、后代选择器、子元素选择器。

最佳实践：选择器的合理使用，可以减少class定义数量，并且进行批量处理。

七、CSS3

新增了动画、阴影、圆角等。

八、关键属性

display：none/block/inline/inline-block

width、height、min/max-width、min/max-height：auto/100%/10px

padding、border、margin

float：left、right

position：fixed、relative、absolute

clip、overflow、z-index、cursor、opacity：透明度

九、CSS Sprite

2、作用：使用CSS Sprite 可以减少网络请求（如每一张小icon图片都会产生加载时间），提高网页加载性能。

3、使用：利用background-position，对图标进行位置偏移

十、 颜色属性：

  color 

• HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
• RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
• RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
• HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
• HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）

transparent

• 全透明，使用方式：color: transparent

opacity

• 元素的透明度，语法：opacity: 0.5;
• 属性值在0.0到1.0范围内，0表示透明，1表示不透明;
• filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）;
• opacity属性的值，可以被其子元素继承，给父级div设置opacity属性，那么所有子元素都会继承这个属性；而RGBA设置的元素的后代不会继承该属性及属性值。

十一、 字体属性:

  font-style: 用于规定斜体文本

• normal  文本正常显示
• italic  文本斜体显示
• oblique  文本倾斜显示

 font-weight: 设置文本的粗细

• normal（默认）
• bold（加粗）
• bolder（相当于<strong>和<b>标签）
• lighter （常规）
• 100 ~ 900 整百（400=normal，700=bold）

 font-size: 设置字体的大小

• 默认值：medium
• <absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
• <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
• <percentage>百分比指定文字大小。
• <length>用长度值指定文字大小，不允许负值。

font-family：字体名称

• 使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

• 语法：font：字体大小/行高 字体;（字体要在最后）