一，今天完成的事情

复习了一下，css中的知识点，有一些没有完全掌握的地方

现在罗列出来部分知识点：

1.定位中的relative的使用场景

relative相对于自身进行定位，不脱离文档流也不脱离文本流

float脱离文档流但是不脱离文本流，所以会出现float将非定位盒子覆盖掉，

但是不会覆盖非定位盒子里面的文本，这样会出现文本环绕的效果。而对于

absolute元素会把非定位和自身位置和开面的文本都覆盖掉

relative一般使用设置给absolute的父层，这样absolute会依照absolute

父层的边界进行定位---也就是说给absolute元素提供定位基准

relative不会影响页面其他的布局，因为他相对自身移动时候仍然会保留自身

原始的位置，只是视觉上的偏移，原来的DOM仍然存在

relative会对overflow有限制作用

relative会对z-index有限制作用，，设置了定位元素的z-index值为数值可以

创建”层叠上下文”relative的top/bottom同时使用只有top生效，

left/right同时使用只有left生效

2.清除浮动的常见办法

      浮动导致的问题：父级标签高度塌陷---其实就是没有高度

1. 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
2. 在最后一个浮动标签之后添加标签并设置clear：both
3. 给父级添加overflow属性，触发BFC
4. 使用伪元素:after

.clearfix:after {   

 content: '.';/*加个点的作用防止低版本浏览器出现空隙*/   

 display: block;    

clear: both;   

 height: 0;   

 visibility: hidden; 

} 

.clearfix{ 

   *zoom:1;        /* *只有ie6-7执行 */

 }

3.使用双伪元素before和after

.clearfix:after,.clearfix:before {    

  content: '.';  

  display: table; 

} 

.clearfix:after { 

   clear:both; 

} 

.clearfix { 

   *zoom: 1; 

}

4.flex布局是基于什么的，原理是什么

flex布局是围绕父元素和轴来进行布局的。布局基于两条轴，水平的主轴和垂直的交叉轴

可以通过flex-direction改变主轴方向，通过flex-wrap改变交叉轴方向

能决定元素展示宽度的属性有: flex-shrink，flex-grow，flex-basis，width，min-width

5.select更改默认样式

清除select默认样式

appearance: none; 

-moz-appearance: none;

 -webkit-appearance: none;

 -ms-appearance: none;

通过设置背景图片的位置改变默认样式

6.input和label联合使用

通过为input设置属性id，在label标签中设置for=id使label文本与对应的inpu他结合起来。

label标签包裹input标签，点击label时，label两次响应，即label本身触发和input触发后

冒泡到label上。(由于事件冒泡机制的存在，父节点所绑定的点击事件会被触发两次。)

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在

label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会

自动将焦点转到和标签相关的表单控件上。

二，明天计划的事情：复习知识点