蓝鸥 8.10

今天老师讲的内容有点杂，主要是一些css3的一些属性。在这之前通过之前的作业，我又收获到了一些知识，是关于响应式布局方面的，就是vw,vh和%的区别，所谓vw全称是viewport-width.。vh即viewport-height。在做响应式布局时，vh，vw是针对窗口大小进行参照的，而%是针对父级宽高进行参照。。

今天讲了7个很有意思的属性，但有些是不常用的。

1、倒影，属性名为box-reflect，属性值有两个第一个是方向，即left、right、above、below，在或者上或者下或者左或者右进行倒影，效果就像是照镜子一般。第二个属性值是间距，就好比你离镜子的距离。挺有趣，但应该不常用到。

2、轮廓，属性名为outline，和border一样具有3个属性值分别为width、style和color。width设置轮廓的宽度，style有三个值，分别为solid实体线，dashed虚线，dotted点状线，是设置轮廓的样式。color设置轮廓的颜色。他是不占空间的，也就是说在布局上他是不影响作用范围的。通常在一些表单元素如文本框，按钮等这个效果很常见。当然去除这个轮廓效果就只需要outline：none就可以了。

3、resize，在前面的表单元素的文本域有讲到，这个属性是针对块级标签的，效果为用户可以自行改变块级元素大小,当然还得另外添加一个overflow:auto。他有4个属性值。both：宽高都能改变大小。none：不能改变宽高。horizontal：只能改变块级元素的宽。vertical：只能改变块级元素的高。

4、自定义字体，比较有意思，即可以设置有特点的字体。利用@font-face｛ 字体名字；字体来源｝字体名字可以自己起，到时在设置文本样式时font-family：你起的名字，就行了。字体来源可以自行在网上下载。

5、怪异盒模型，属性名为box-sizing，有两个属性值，第一个是content-box这个属性值一给出盒模型也就正常了不再怪异。第二个值为border-box即为怪异，何谓怪异，也就是比普通盒模型简单一点，盒模型由margin、border、padding、content组成。在一般情况下我们做嵌套的一个个盒模型，为了不影响布局，还得减去border、padding的值，因为他的显示包括border、padding、width等。而怪异盒模型他的width就包括了border宽和padding值，所以不需要自行减去很方便。记得刚来蓝鸥的几天做了一个六环图，为了计算padding值border值，而花了很长时间才能做完，今天利用怪异盒模型我做完他只需要10分钟左右。

6、弹性盒模型，主要是布局，最不常用。只需把父级标签设置样式display：box；把父级自行分成10份，在子级中设置box-flex：1即为该子级占父级的一份。默认是横向分布的，要想纵向分布只需设置box-orient：vertial。那么他的另一个值horizontal即为横向分布。

7、分栏，那时候的报纸这样子的分布。属性有column-count分栏数，column-rule分栏样式和上面的轮廓中的style一样，column-gap间距栏与栏之间的距离。

毕竟学的有点杂感觉，没有掌握好，所以写的也不是特清楚。不过相当于我又复习了一遍。。