[散修弟子]CSS-2847|2017年02月01日的日报-技能树.IT修真院

发表于： 2017-02-01 00:27:07

0 506

今天完成的事：

1. 比较深入的学习了class和id的用法级区别
2. 学习了padding和margin的百分比
3. 实现了自适应
4. 了解了viewport，实现了手机调试
5. 九宫格没有达到验收标准
明天完成的事：
1. 继续深刻学习盒子的相关知识
2. 争取达到验收标准

3. 配置nginx，大概看看任务2

遇到的问题：

1. 由于参考了师兄的代码，这个高度问题没搞懂，在box1中设置高度没有影响，蓝色区域的为body高度，不知道从哪里来的。
2. “box中未设置width及height属性，而是用padding-left/bottom来获取父div的宽度的百分比”不知道我这么理解对不对？
3. clear：both 理解的不深刻。
4. 在开发者模式下变形了，不知道为什么。

收获：

1. Class和id的用法和区别

Class 称为“类”。在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如： .css5{属性：属性值;} 选择器在html调用为“<div class="css5">我是class例子</div> ”。

而且class(类)在同一个html网页页面可以无数次的调用相同的class类。这也说明class一般是用来调用css中的预配制属性的（类比java中的“类”，具有复用性，避免重复配置类属性）。值得注意的是：一个标签可以调用多个类，使用多个class，以空格分开，如：<span class="a2 a1">。但优先级采用后定义的优先（即后写的或者里调用近）。特别注意的是：css样式的优先级是在加载css文件的时候就确定下来的，而不是由后来html里class属性位置前后决定的。

ID是表示着标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。也就是说ID只是页面元素的标识，供其他元素脚本等引用。在CSS里的ID不一定为JS而设置的，但是同样ID在页面里也只能出现一次，并且是唯一性。

class和id的优先级：

id的优先级高，不论在前后。

2. 一个基础却又容易混淆的css知识点：
当padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！

3. margin:0 auto 表示什么意思？

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right。因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）

4. clear:both;

CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;