今天完成的事：
1.任务十二进行中，其中抬头部分重写，把hover效果换成label+input点击效果，学习了如何制作label下拉框
2.学习了nth-child选择器、 first-child选择器、last-child选择器、 ~选择器、 +选择器
3.辨析了content-box border-box
明天的计划：
1.完成任务十二
2.开始任务十三
3.基础知识查漏补缺
遇到的问题：
1.input前面为什么不能加伪元素？
伪元素特性：
- 1.它不存在于文档中，所以js无法操作它
- 2.它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如:first-letter代表第一个字母；因此当伪元素被点击的时候触发的是主元素的click事件
- 3.块级元素都有:before, :after，有些行内元素如img、input就不能设置，亦即某些元素是没有:before, :after的
2.有些属性sass转到CSS时，会加前缀 例如-moz- 是什么意思？
例如：
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
transform:rotate(7deg); //统一标识语句，符合w3c标准
so，这是什么意思？？
这种方式在业界上统称：识别码、前缀
//-ms代表【IE】内核识别码
//-moz代表火狐【Firefox】内核识别码
//-webkit代表谷歌【chrome】/苹果【Safari】内核识别码
//-o代表欧朋【Opera】内核识别码
为什么要加标识码？
因为CSS一直在发展，很多新的标准发布了草案，但是还未确定，部分浏览器就已经开始实现了新的功能，为了与之后确定的标准进行兼容，所以每个浏览器都有自己的前缀和标准，便于区分。当标准确定后，各大浏览器就会逐步支持不带前缀的CSS3新属性。例如，我经常使用的弹性布局flex，就需要加前缀
有时候为了兼容老版本的浏览器，还是需要沿用之前的前缀方法，大部分都不用写了
进一步思考：
各个浏览器的内核都是什么？前缀对应的是浏览器的内核
Webkit内核，css前缀为“-webkit-”，主要应用的浏览器—— 谷歌（2013年分道扬镳）,苹果Safari，国内各类大仙（360 猎豹 QQ）
Gecko内核，css前缀为“-moz-”， Firefox火狐浏览器
Presto内核，css前缀为"-o-"， 欧朋浏览器 /// 已经加入谷歌blink
Trident内核，css前缀为“-ms-”，IE浏览器，以及国内各路大仙（遨游、360、搜狗、阿猫阿狗...）
Blink内核，css前缀为"-webkit-" 嗯？？？怎么这么眼熟，又是你！对，没错，Blink就是谷歌和欧朋一起开发的浏览器排班引擎，升级版的webkit, 使用的浏览器是Chrome 28+、Opera 15+
——————去掉了几十万行的没用的复杂代码，让效率更高。然后针对未来的网页格式，做了进一步优化，和效率提升的处理。
收获：
1.content-box border-box有何区别？ 和IE盒模型&W3C盒模型有什么联系？
直接上图： 这两个盒子，属性都是一样的，为什么大小差这么多？
问题就出在这个中心区域，也就是内容区content，其余的padding border都是一样的
这就是IE盒模型和W3C计算盒模型的区别：
IE盒子的内容包含了padding 和 border，换句话说，我给了height width之后，我就不管你的padding和border有多少了！
W3C的内容，你给了我height width padding border，我乖乖累积上来，最后结果就是，蓝色的盒子比黄色小子，大了好几圈，这就是隔壁家的孩子！ IE小黄毛你不听爸爸的话，给你padding border不要，活该小一辈子！
来到另一个主题，border-box 和 content-box 有什么区别？
理解了IE盒子和W3C盒子之后，那么这个就很好理解
border-box代表的就是IE盒子模型下的计算， height width已经包含了padding border
反之亦然，content-box就是content独立于padding border，计算大小的时候，哥们一起算进来，贼爷们！
还有两张干货图，理解一下：
2.~选择器和+选择器的差别：
~选择器是选中某个标签后面的所有此类，同级的标签。
举栗：下面我在一个p下面选择了span p ~span{ color：red}，所有的span都变成了红色
+选择器是选中某个标签后面的一个此类标签元素
举栗：下面我在一个p下面选择了span p +span{ color：red}，后面第一个span变成了红色
返回列表
评论