Day 44     task12-1

今天完成的事情

      1.完成task12（护工重构）的第一个页面

遇到的问题

      1.【solved】flex布局下img变形

设置img高度为100%

或设置align-items: center;

      2.【solved】将图片设置缩放transform: scale(0.55);然而所占空间大小不变，因此多出很多空隙

解决办法：取消img全局设置height：100%；设置zoom：0.55；而非transform

      3.【solved】如何把图中的圈中文字不换行？

如何把上图中的圈中文字不换行？

为什么会出现文字换行？

因为这一行我使用的是flex布局

flex布局里所有的项目都是初始的flex:auto即0 1 auto;

在这里的话里面有个flex-shrink的属性，意思当项目的主轴方向上的长度和大于主轴的长度，此时所有的项目会等比缩小。

这里flex-shrink：1。后面的文字也会折行，项目尺寸，缩小。

解决办法：

1、对自我介绍设置flex-basis的固定值。

这种方法有一个弊端：当我们的自我介绍四个字变成5/6/7个字的时候，这种方法就不合适。只适用于固定宽度的布局，而且flex-basis想在移动布局完美自适应也有些困难。

2、对自我介绍设置  white-space:nowrap;

3、对自我介绍设置：word-break：break-all。

上面第2/3种办法，不会因为字数增加而改变布局，因为他们的属性就是设置不换行。

收获

      1.对以前学习的知识有了更深的了解

      2.CSS实现实心三角形和空心三角形

实心的三角形：设置内容宽度为0的容器上下右边框

并把上下边颜色都设置为透明色，就是一个实心定位三角形

.jiao{

  position: relative;

  height: 0px;

  width: 0px;

  border-top: 90px solid transparent;

  border-right: 100px solid black;

  border-bottom: 100px solid transparent;

}

这样一个实心的三角形就出来了，

空心的三角形：同理，在当前的三角形后面添加一个小的实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割

.jiao:after{

  content: '';

  position: absolute;

  top: -89px;

  left: 2px;

  border-top: 89px solid transparent;

  border-right: 99px solid #FFFFFF;

  border-bottom: 99px solid transparent;

}

明天计划学习

      1.完成task12

      2.开始task13

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决