发表于: 2017-03-07 23:19:12

1 1045


今日完成:

1.今天改了Demo时提的几个小问题。

2.然后给PM确认后,把DEMO打tag然后在wiki上进行登记。接下来申请发布线上测试。

3.听李玺讲了垂直居中的几种方式。

明日计划:

1.完成线上测试的BUG。

2.完善上次写的轮播图。

3、在熟悉下官网的代码。

4.下午看高级程序书1小时。

遇到的问题:

虽然看了项目流程规范,但操作起来还是不太熟悉。弄了很久。

今日收获:

对项目流程更加熟悉了。

复习了:

1、单行文本垂直居中方法

说明:

该方式只适用于情况比较简单的单行文本,只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

2、多行文本垂直居中方法

说明:

2.1父级元素display:table-cell,vertical-align:middle;

2.2使用table来布局;

2.3多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top;

3、div垂直居中:table

说明:

在table标签中,单元格框中的单元格内容是水平垂直居中的。

display:table此元素会作为块级表格来显示 类似table标签

display:table-cell 此元素会作为一个表格单元格显示 类似td 和 th标签


4、div垂直居中:inline-block

说明:

给元素设置dispaly:inline-block配合vertical-align:middle来垂直居中

5、div垂直居中:绝对定位之margin:auto

说明:

父元素相对定位,子元素绝对定位。 子元素的上下左右均设置0定位且设置margin:auto6、div垂直居中:绝对定位之负值法

说明:

已知元素高度后,使用绝对定位将top设置为50%,mergin-top设置为内容高度的一半(height + padding) / 2的负值;内容超过元素高度时需要设置overflow决定滚动条的出现;top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;

7、div垂直居中:绝对定位之translate

说明:

CSS3的兴起,使得垂直居中有了更好的解决方法,就是使用transform代替上一种方法margin. transform中translate偏移的百分比值是相对于自身大小的;

8、div垂直居中:flex

说明:

给父元素设置display:flex后再设置align-items: center表示让子元素垂直居中;



返回列表 返回列表
评论

    分享到