今天完成的事情：

初步完成了任务七的三个页面

明天计划的事情：

优化三个页面，思考任务七的深度思考
遇到的问题：

1.不管怎么写，页面左右两侧总会有空隙，最后通过询问师兄原来是body本身是有外边距的，最后把外边距设置成零

2.关于投票页面中间小方格一直无法居中，明天继续研究
收获：

继续百度搜索了垂直居中方式，和margin三个值代表什么

一、css实现垂直居中的几种方式（布局常用）

（一）对单行元素进行垂直居中时

1、可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中

2、针对行内元素，可通过设置vertical-align: middle;以及line-height进行垂直居中

（二）、对文本进行垂直居中

1、针对文本，通过display:flex;配合align-items和justify-content实现文本居中

.content{

display: flex;

align-items: center;

justify-content: center;

}

（三）对已知高度块级元素进行垂直居中

1、绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中

.content{

position: absolute;

top: 50%;

left: 50%;

margin-top: -10em; /* 为元素height/2 */

margin-left: -10em;

width: 20em;

height: 20em;

background-color: aqua;

}

2、绝对定位，配合top:0;bottom:0;和margin:auto进行垂直居中

.content{

position: absolute;

margin：auto；

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 200px; /*要求指明元素高度*/

background-color: aqua;

}

3、设置position:absolute;和calc()函数实现垂直居中

.content{

position: absolute;

top:calc(50% - 10em); /*calc(50% - 元素本身高度一半)*/

left: calc(50% - 20em); /*注意使用时减号间有空格*/

width: 40em;

height: 20em;

background-color: aqua;

}

4、使用浮动float实现元素垂直居中

原理：通过在要进行垂直居中的元素a前面添加一个无内容的元素，并将该无内容元素的高设置为50%，在利用clear:botn清除浮动，则元素a相对于父元素来说是垂直居中。

html如下：

<div class="parent">

<div class="float"></div>

<div class="content">

<div><span>内容垂直居中内容垂直居中内容容垂居中</span></div>

</div>

</div>

css如下：

.parent{

height: 500px;

background-color: red;

}

.float{ /**添加的辅助元素/

height: 50%;

}

.content{

clear: both;

background-color: aqua;

}

（四）对未知高度块级元素进行垂直居中

1、设置position：absolute；和transform:traslate(x,y)实现水平垂直居中

.content{

position: absolute;

margin：auto；

top: 50%;

left: 50%;

transform:translate(-50%,-50%); /*针对元素本身向左以及向上移动50%*/

background-color: aqua;

}

2、居于视口单位的解决方案：

可通过使用margin-top: 50vh;配合transform:translateY(-50%);实现视口居中

.content{

width: 18em;

margin-top: 50vh; /*50vh表示视口高度的50%*/

transform: translateY(-50%); /*相对元素自身向上移动50%*/

background-color: aqua;

}

3、通过display:table-cell和vertical-align:middle;实现垂直居中

.parent{

display: table;

width: 50px; /*建议设置宽高，以便于查看效果*/

height: 500px;

}

.content{

display: table-cell;

vertical-align: middle;

background-color: aqua;

}

4、基于flex的解决方案：

.parent{

display: flex;

background-color: beige;

}

.content{

margin: auto; /*自动相对于父元素水平垂直居中*/

background-color: aqua;

}

二、Margin属性中的四个值以及先后顺序

1.如果margin只有三个值，按照值的顺序为margin：top right bottom; 缺少了left，根据原则，则left的值有right来代替。

margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;

2.如果margin只有两个值，按照值的顺序为margin：top right; 缺少了bottom和left，根据原则left的值由right来代替，bottm的值由top来代替。

margin:10px 20px;就等于margin:10px 20px 10px 20px;

3.如果margin只有一个值，按照值的顺序为margin:top; 缺少了bottom、left和right，根据原则left的值由right来代替，bottom的值由top来代替，right的值右top来代替，也就是说left的值也由top来代替。

margin:10px;就等于margin:10px 10px 10px 10px;