今天完成的事情：

任务8-2职业介绍的布局，任务8-3的布局只差内容。

其中需要使用到表格

学习表格table属性：

一个表格应该包含两行或以上，其中th为表头，td为标准表格，tr为新起一行。

其中width规定表格的宽度。常用的rowspan=n属性为竖向跨行属性，colspan=n是横向跨行属性，数值为合并几行，写在th或者td后面

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

其中可以使用各种样式来定义表格的展现方式。

后面弃置了表格写这个布局，表格局限性很大，无法单独设定单元大小宽度和排列，其中的元素很难按照想要的排列方式排布，还是直接写个大盒子来进行布局比较舒服。

学习sizing属性：

以下内容引用 https://www.cnblogs.com/huangzhilong/p/5007157.html 

关于ie盒模型和w3c盒模型的区别：

w3c盒模型的content内不包含其他部分，而ie盒模型的content包含了padding和border元素。

为什么要将标准盒模型转换为IE盒模型

为什么IE盒模型更容易开发？

标准的盒模型padding，border是不算在宽度之内的，所以当你要在一个容器里并排显示两个同样的盒子。

你用标准模型时肯定会这样设置每个盒子width:50%.但是当你查看时会发现两个盒子紧紧挨在一起实在是不美观，所以你又设置padding:0 5%；然而这时候两个盒子宽度又超过了大容器的总宽度，挤到下一行，所以你又得去调整盒子的width:40% 这样确实可以解决问题，可是这样你不觉得很不方便吗。这时候就可以看出IE盒模型的好处了。就将两个盒子的宽度设置为50%，这时候就算你再怎么去调整padding都会在两个盒子的内部去调整，不会再影响布局。

怎样将标准盒模型转化为IE盒模型

在css3中有这样一个属性：

官方给的解释是：box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

再来看看box-sizing属性给出的几个值

content-box:这是由css2.1规定的宽度高度行为。什么是按css2.1的行为？意思就是说设置这个值之后，就会按以前规定的标准来显示，也就是按照标准的盒模型显示。之所以有这个属性以及这个值，可以看出w3c也意识到了自己规定的标准盒模型简直就是个坑

border-box:通过从已设定的宽度和 高度分别减去边框和内边距才能得到内容的宽度和高度。所以w3c终于承认了人家IE盒模型的合理性。通过设置　 box-sizing的值为border-box来模拟这一规范。

在使用了box-sizing：border-box之后比较之前的标准很模型来说，比较方便调整当盒子在一行并且各占据50%宽度的情况。

hover的详细使用方法： 

要把隐藏的样式写进想要他显示的标签旁边或者内部，使用display：none进行隐藏，

然后设定.父级元素：hover   .隐藏元素{display：block或其他}进行显示，其中还应该使用position：absolute脱离文档流。

使用a控制a的子元素 b：使用空格

使用a控制a的兄弟元素 c(同级元素)：使用＋

使用a控制a的就近元素d：使用~

明天计划的事情：

遇到的问题和收获： 

表格来进行布局面临着一个问题，表格的宽高是固定死的，内部元素想单独调整宽高难以实现

左边是任务需求，右边是我写的表格

想实现左边的表格有大有小的话只能使用三个table进行拼装，但是薪资待遇那一栏的宽度并不与右边等大，表格的特性就是td元素等大且无法单独调整，试过使用style进行设置，改变为block元素的话又会脱离表格的整体布局，只能弃置表格，使用div写个盒子进行拼装了。

在使用div写格子的时候，因为每个div标签都换行，而换行会导致一点点小空隙的产生，这点小空隙一般都是由字体大小决定的宽度，从而影响盒子的排布，即使两个盒子你想排列在一行内设定的都是width：50%也会导致挤到下一行。

在布局完设置hover的时候，出现了这样的情况

原因是因为使用的是背景图片，不管设置position或者z-index都不奏效。

尝试改为文字，解决。