“小白的我”第二天日报

今天完成的事情：

1.做完了任务七的第一张图，并能自适应；

2.学会了用css做三条杠和一个勾；

明天计划的事情：

1.做完任务七的第二张图，并能自适应；

2.学会用css做一个叉和一个圆里包含三角形。

遇到的问题：

1.对于css中div的内容居中不熟悉，不知道什么情况用什么方式居中；

2.过于依赖切图，不会用css制作简单图形。

解答方案：

1.自己总结了一些使元素居中的方法：

水平居中：

1.通过margin: 0 auto; text-align: center实现CSS水平居中；

2.通过display:flex实现CSS水平居中；

3.通过display:table-cell和margin-left实现CSS水平居中；

4.通过position:absolute实现CSS水平居中；

5.通过width:fit-content实现CSS水平居中；

6.通过display:inline-block和text-align:center实现CSS水平居中；

7.通过position:relative、float:left和margin-left实现CSS水平居中；

8.通过隐藏节点+float的方法实现CSS水平居中。

垂直居中：

1.通过verticle-align:middle实现CSS垂直居中，vertical生效的前提是元素的display：inline-block；

2.通过display:flex实现CSS垂直居中；

3.通过伪元素:before实现CSS垂直居中；

4.通过line-height实现CSS垂直居中。

2.师兄指出还是要学会用css做图，于是先学会了做√和 三条杠：

.box1{

    border-top:60px double red;

    width: 100px;

    padding-top: 20px;

    border-bottom: 20px solid red;

}

.box2{

    border-top:60px double red;

    width: 100px;

    height: 20px;

    padding-top: 20px;

    background-clip: content-box;

    background-color: red;

}

收获：

1.学会了css做一些新的图形，对css变得熟练起来了。