任务12总结：

禅道：http://task.ptteng.com/zentao/project-task-757-unclosed.html

完成时间：6.25，用时一天，比预计多花了一些时间

小结：今天整体花费的时间要比预期多，回顾以下主要花在了模拟下拉框和其他细节上~昨天做的下拉框发现有bug，于是重做了下。今天对于sass的传参更为熟练了些，但整体来说还有很多需要精简的地方。用了sass嵌套更为方便了，不知不觉总是嵌套了好多层，不太利于代码的可读性，这点要注意下了

深度思考：

1.如何使用bootstrap的栅格系统

栅格系统组要由三部分组成，容器container或container-fluid，行row，和列column组成。container包裹在最外面，赋予盒子固定宽度，-fluid宽度为100%。container中是row，row在其中是一行一行显示的，就好像笔记本中的“行”一样，为其赋予了合适的排列和padding。通过row，在水平方向创建了column。每一行最多由12个column，具体用法给元素添加类名col-xx-bb，col就是列的意思，xx指在什么样的设备下，有四种可供选择xs（小于768px），sm（大于768），md（大于992），lg（大于1200），bb指在某个设备下占多少列，值为1-12.可以添加多个类名以达到不同设备下变换宽度的效果。

2.媒体查询的使用

媒体查询是一组带条件的css规则，指在一定条件下才会生效的样式

@media 媒体类型 and 条件 {} 

媒体类型：all所有设备，screen电脑屏幕，平板电脑，智能手机等。speech屏幕阅读器等发生设备。print用于打印机和打印预览

条件：常用条件有max-width和min-width，具体参见http://www.runoob.com/cssref/css3-pr-mediaquery.html

3.响应式的优缺点

越来越多的网站在使用响应式布局，他可以灵活的跨设备布局，使其在任意设备都能有较好的展示页面，这是他的主要功能。在使用他的同时也要了解他的特性；媒体查询文件会包含很多设备下的css，会加大css文件，对于网络慢的用户会降低体验，复杂的内容多的布局比如电商页面媒体查询并不一定合适或者只需要微调

今天完成的事情：

又没有了解js。。。

处理了昨天遗留的问题

完成了css12，发现了一些不同浏览器的特性

今天的收获

select居中

可以使用text-align-last：center，测试过后发现IE下没用

解决IE10/11不支持条件性注释的方法

IE条件注释是指只有ie才认的代码，条件性注释可以针对不同浏览器来编写css

代码：@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}

虽然不懂什么意思，但还是有效的

明天的计划：

上午了解下js和深度思考

下午做任务

今天遇到的问题

1.使用calc平分宽度是发现会换行

原因：空白符。方法有三种：font-size：0  ；在html中把空格和换行符去掉；把元素间注释掉

2.神器的IE，文字在行当中是靠上的，这样我设为居中的分隔符因为文字靠上的原因反而显得偏下了，向我这样的强迫症是不能忍受的

解决途径：了解了下可能和字体有关系，看了ie下的百度，文字大致是居中的，于是把字体代码搬了过来

font-family: STHeiti,"Microsoft Yahei",Arial,SimSun;

然后ok了对比以下还是很明显的