补个9.08的日报：

今日完成： 任务七

笔记：

HTML CSS常用布局（包括各种居中的优缺点分析）

https://segmentfault.com/a/1190000003931851

关于属性继承性：

https://www.cnblogs.com/thislbq/p/5882105.html

如何让input元素继承字体属性？

答：可以使用inherif属性来继承父级的样式。

如何让两个使用相同类名的元素具有不同的效果?

答：可以使用伪类选择器，比如nth-child(X),使父元素下具体第X个元素修改样式。

关于flex 取值的意义

https://blog.csdn.net/aliven1/article/details/78853725

flex：1等价于flex：1 1 0；而不是flex：1 1 auto；

flex-basic相当于width 但比width优先级高

引入媒体类型方法：（常用）

1、link方法引入

    <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

2.@media引入

样式文件中使用：   

 @media screen{

     选择器{

    属性：属性值；}}

media queries特性和css主要区别在：

1、Media query只接受单个的逻辑表达式作为其值，或者没有值；

2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的

表达式；

3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等

于某个值的情况

4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

Media Query常用引用语句：（各种移动端及pc端）

http://www.cnblogs.com/asqq/archive/2012/04/13/2445912.html

vertical-align 属性为百分比 相对于line-height

关于栅栏系统：

containner>row>col(<=12可用nesting扩展 左浮的类自带清除浮动的性质)

nesting扩展可以添加row

clearfix的作用

很多网站中都会有一个通用类，其作用是 —— 清除之前的浮动关系，修复在firefox、chrome等标准浏

览器中子元素全部浮动时，父元素不自动增高的问题。

课后思考：

DISPLAY 和VISIBILITY有什么区别?

主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击

设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

display的回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

描述z-index和叠加上下文是如何形成的。

z-index只能在position属性值为relative或absolute或fixed的元素上有效。 

使用相对性：z-index值只决定同一父元素中的同级子元素的堆叠顺序。

如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。

手机上没有HOVER效果时应该怎么办？

方法：

触摸事件：触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

1.touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

2.touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间， 调preventDefault()事件可以阻止滚动。

3.touchend事件：当手指从屏幕上离开的时候触发。

4.touchcancel事件：touchcancel，是在拖动中断时候触发。

（PS:主要的是前三个触摸事件）

document.addEventListener('touchstart', touch,false);

这行代码的意思是，添加一个一个触摸事件，

varevent = event || window.event;

声明event=event或window.event,因为window.event只在IE下是这样的。他并不是标准,其他浏览器并不支持.x写在这里是为了兼容ie浏览器。

.getElementById("inp");

返回id为“imp”的第一个元素。

touch事件的一个特点就是可以返回touch的位置信息，且touch可以在一个触摸事件发生的同时进行另一次或多次触摸（这一点是touch相对hover的优点）

明日计划： 任务八

遇到问题：

1.任务七页面一的四个小圆点：想实现的效果是：

（1）.页面刷新的时候默认第一个小圆点是蓝色，其余是灰色

（2）.鼠标滑过圆点时，被滑过的圆点是蓝色，其余是灰色（未实现）

（3）.鼠标不滑动时恢复第一个小圆点是蓝色，其余是灰色

第二条实现不完全，鼠标滑过第一个圆点时，第一个圆点未变成蓝色，其余实现

.child{

    width:10px;

    height: 10px;

    border-radius: 5px;

    background-color: #e1e5e7;

    margin:0.3rem;

}

.circle{

    display: flex;

    flex-flow: wrap row;

    justify-content: center;

    margin-bottom: 1rem;

}

.first{

    background-color: #69d1e9;

}

a:hover{

    background-color: #69d1e9;

}

.circle:hover .first{

    background-color: #e1e5e7;

}

.first:hover{

    background-color: #69d1e9;

}

2.利用float+margin(fix)实现 左列定宽，右列自适应

<div class="parent">

    <div class="left"></div>

    <div class="right-fix">

        <div class="right"></div>

    </div>

</div>

.left{width:100px;float:left;}

.right-fix{width:100%;margin-left:-100px;float:right;}

.right{margin-left:100px;}

和float+margin实现比

.left{float:left;width:100px;}

.right{margin-left:100px;}

有点不明白加right-fix 有什么用，是为了去掉IE下的3px间距么 原理是什么....

收获：很多东西不难，只是自己把它想的太难，所以才拖延.....