今天完成的事情

完成任务8-1页面

小课堂内容见下方

收获

对bootstrap使用熟练度提升了一些，发现真的不能钻牛角尖，多引用然后再调整样式也就懂得相关样式的写法了

完成任务8-2主体部分之一，忘记了栅格，用css写的，嵌套有些多，昨天看师兄日报所以今天引用了word-break属性，实现了文本不溢出强制换行；

学会了面包菜单栏的引用；

学会了媒体查询的用法，觉得挺好用的，将屏幕尺寸作为临界点，可以写多套样式自然地切换；

学习了优先级相关内容，

css中始终消除不了的边框，用！important得以消除；

遇到的问题

暂无

明天计划的事情

加速完成任务8

px、em、rem、%、vw、vh、vm这些单位有什么区别？

1.背景介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的自适应页面，随之覆盖多种不同分辨率的终端，包括移动设备等。

2.知识剖析

1．）px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点

2．）em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

3.）rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

4.）%

通常相对于父元素，以下两种特殊情况

对于position：absolute是相对于已定位的元素

对于position：fixed是相对于viewport（可视窗口）

5.）vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

6.）vh

同上，视窗高度

7.）vm

相对于视窗高度 宽度中较小的那个，兼容性较差，不建议使用

3.常见问题

1.）为什么一开始在css中设置body｛font-size：62.5%｝

2.）在chrome浏览器运行

body｛font-size：62.5%｝

p｛font-size：1em｝

<p>我的字体是多大</p>

显示为多大的字体？

4.解决方案

答案1：这样使1em=16px × 62.5%=10 px ，方便换算

答案2：chrome浏览器强制最小字体为12号，所以会显示为12px

5.编码实战

https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo1.html

https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo2.html

https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo3.html

https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo4.html

6.拓展思考

Css还有哪些长度单位？

1in = 63.5px = 25.4 mm = 96px = 6pc = 96px

由左至右：寸、厘米、毫米、point、pica

7.参考贡献

http://www.xidayun.com/index.php/2016/06/27/rem-vh-vw-vmin-vmax-ex-ch/

http://www.zhangxinxu.com/study/201103/css-length-value-test-demo.html

8.更多讨论

CSS3的calc（）