今天完成的事情：复习和学习了一些知识点

明天计划的事情：把任务八上的技能树和深度思考中未学的知识点再学一下，准备做个思维导图，方便记忆复习，再一个是师兄麻烦看一下我那个任务上交的项目，好进行下一个任务点

收获：

1.元素有了浮动，它的display显示类型就会自动变为以display:inline-block（内联块状元素）的方式显示，就可以设置元素的width和height了，且默认宽度不占满父元素，同时也是个BFC。

2.

background-size cover和contain的区别:

相同点：图片都是等比例缩放

不同点：cover是铺满覆盖整个显示区域，如果图片显示比例和显示区域的比例相差很大图片的某些部分会被遮住，不显示。contain：保持图像的宽高比例，将图片（等比例）缩放到宽或者高（以宽或高哪个值最大为准）正好适应定义背景的区域，但背景仍在定义的区域之内，被包含，由于等比列缩放，所以图片并不会铺满背景区域。

3.

特指度（specificity）： 特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。（即，元素应用权值最大的样式规则）

这个计算叫做“I-C-E”计算公式：

I —— Id；-------------->100

C —— Class；---------->10

E —— Element；------->1

即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。

4.直接解决垂直水平居中的问题可以用父元素用display:flex，子元素添加margin:auto;会产生垂直居中效果，还有一点是margin:auto;没有反应的原因是宽和高都没有100%的与父元素贴合

5.

关于box-sizing属性布局：

        box-sizing:content-box是标准盒模型，CSS定义的宽高内只包含content的宽高

        box-sizing:border-box是IE盒模型，CSS定义的宽高内包括了content，padding和border

关于width:100%和width:auto的区别：

        width:100%代表content Width=父contentWidth*100%,

        width:auto的宽度就大了，包含了padding、border、content，这三个width=父content Width

当有需求时，这两者的宽度界定可以配合用box-sizing:content-box或border-box

6.

如果设置个a:hover，当鼠标移到其元素位置时，其a元素能变宽，这种情况下，当这一属性设置好后，其a元素的布局会出现位移抖动，原因是设置的hover上增加了宽度，导致a元素再原来的基础上又增加一些宽度，所以才会这样，解决方法是，在a元素本身设置与a:hover一样的宽度

7.:nth-child(1)选择第一个元素不起作用的，可以用:nth-of-type，这个属性相对于:first-child来说限制少

8.

图片与文字对齐问题：
    图片与文字默认是居底对齐了。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了，我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错，但是IE下，虽然是效果好了些，但还是不够。
    如果，图片是个20像素*20像素左右的小图片，文字也差不多12px大，则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽，兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签，支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话，img{margin:0 3px -3px 0;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。
注意：只有一个元素属于inline或是inline-block类型，其身上的vertical-align属性才会起作用。

9.

在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果，这时就可以用以下代码来对placeholder进行样式设置了。

10.

注意写单个属性的话，只有translateZ是在3D层面生效的，另外两个：translateX，translateY，还有个组合的translate(x,y)，这些只能是在2D层面生效的，如果要提升到3D层面的话只能这样写：translate3d(x,y,z)，才能有3D效果，其参数分别是移动元素的上下左右前后位置。
scale3d(x,y,z)分别是在3D层面上水平方向和垂直方向增加面积，z这个参数目前测试结果是没有效果。。。
rotateX在3D层面上基于X轴进行翻转，类似于轮胎在旋转时的样子，视点一般默认是面向它的胎面。
rotateY在3D层面上基于Y轴进行翻转，类似于转椅在左右旋转时，看到的旋转方式。
rotateZ在3D层面上基于Z轴进行旋转，类似于仰视看到天花板吊扇时的旋转方式。
transform-origin是移动元素变化时的中心点，也就是挪主轴的位置，地址讲解：https://blog.csdn.net/u011848617/article/details/79039365
skew(x-angle,y-angle)是在2D层面上进行倾斜，x、y分别是左右和上下倾斜，其倾斜样子类似于老旧的椅子坐上去时，原本方正的结构突然会发生倾斜。
perspective属性让3D效果更加明显，在此基础上再添上transform-style: preserve-3d则完全符合我们真实世界的思维认识。
backface-visibility:hidden和3D transform效果相关，就是隐藏元素但空间还在，如果在旋转元素不希望看到其背面时，该属性很有用。

11.HTML和HTML5的区别：
HTML5的语法相对于HTML4更加宽松了,不再基于SGML, 增加了很多语义化的HTML标签, 还有audio，video, 文档声明变的更加简单, 新增了字符串编码的meta， 删除了上世纪90年代的一些html标签(font, frameset)等....
广义的来说HTML5为我们带来了高版本的CSS,即CSS2.0升级到了CSS3.0， Javascript中也提供了更多的API支持（canvas，postMessage， notify， worker）， 让WEB更绚了；

12.

Bootstrap4 导航栏

可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类:

导航栏代码如下：

<!-- 小屏幕上水平导航栏会切换为垂直的 -->

<nav class="navbar navbar-expand-sm bg-light">

 <!-- Links -->

 <ul class="navbar-nav">

   <li class="nav-item">

     <a class="nav-link" href="#">Link 1</a>

   </li>    <li class="nav-item">

     <a class="nav-link" href="#">Link 2</a>

   </li>    <li class="nav-item">

     <a class="nav-link" href="#">Link 3</a>

   </li>

 </ul> </nav>

Bootstrap4 下拉菜单

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

下拉菜单代码如下：
<div class="dropdown">

 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

   Dropdown button  

</button>

 <div class="dropdown-menu">

   <a class="dropdown-item" href="#">Link 1</a>

   <a class="dropdown-item" href="#">Link 2</a>

   <a class="dropdown-item" href="#">Link 3</a>

 </div></div>