今天完成的事情：

1.写完了任务十。

明天计划的事情：

1.学习SASS。

遇到的问题：

1.bootstrap使用的是ie盒子模型。而一般情况下我们使用的是W3C盒子模型。

因为没有使用bootstrap所以这次试用了一下w3c盒子模型。感觉确实是ie盒子模型好用一些。

ie盒子模型的width包括content宽度和左右border、左右padding。height包括content高度和上下border和

上下padding。在布局过程中，很多情况是骨架给定宽，然后内容大小响应式。ie盒子模型使用上更为方便。

收获：

1.流程图由两部分组成，有可能会被这一横杠挡住。给两部分都设置position：relative；然后z-index将数字提上来。

2.select样式部分不可以调节。我的做法是给select套一个父元素，设置他和父元素的大小一致。然后用父元素的样式挡住select原本的样式。如图。但是点击右边的三角形和蓝色背景无法下拉菜单。

设置pointer-events：none；可以让鼠标事件穿过该元素。让图像“虚有其表”。      这种做法的缺点在于下拉列表的选项无法绑定label。

如果通过div+css模拟的下拉菜单可以绑定。缺点是要手写样式。鉴于之前用过这种做法所以尝试了第一种写法。

3. cursor:pointer可以设置鼠标悬停时的指针为小手。

帮助用户提醒点击进入文本超链接或者按钮提交。

4.布局时灵活使用空格元素&emsp（一个文字大小）和&ensp（半个汉字大小）。

右下角放置了4个&emsp。然后设置align-items：space-between。

就不会让第一行第三个元素在块内居中了。不需要的时候在用媒体查询取消掉。

这种地方的小空格可以使用&ensp方便快捷。

任务十总结：

任务名称：CSS-task10-任务总结

成果链接：https://xjdxc.github.io/task/task10/task10.html

任务耗时：2019.3.20–3.22 三天

官网脑图：

我的脑图：

任务总结：

1.input标签不仅仅是个多选框或单选框。可以通过input标签的多选框控制一些类的属性（配合label）

2.通过label绑定input可以实现焦点的跳转。

3.first-child和last-child伪类的应用。

4.flex弹性布局对于响应式很方便。

5.灵活使用媒体查询。