Project遇到的问题和解决--进行中

产生的问题

1 一行2个span标签，每个设为 inline-block，想让它们显示一行内，但是不知什么原因出现了换行现象，

2 .classnamedd > p 子元素 设置css不起作用。但是在p元素内使用了classname, 就管用。

已经解决的问题

1. 父类设置flex后，两个子元素分配空间，有多余的空间。

A: 使用flex-grow 用来指定父容器多余空间的分配比率，默认值为0。flex-shrink 用来指定父容器空间不够时子元素的缩小比例，默认为1。

https://blog.csdn.net/A13330069275/article/details/78429684

2. body set width= 100%, 查看时，子类右边有空白。

有几种原因：

   - 内部元素定宽，外部自适应，当缩放到小于内部宽度时出现空白
   -  html, body本身有默认的margin和padding.
   -  子元素position设置成absolute了。

3. 设置半截下划线(Short Underline Relative to Text )

一开始我添加了一个div，用这个div来划线。然后发现可以使用::after.

网上有两种实现方式：一种设置position:absolute, 另一个用margin:0 auto.显然第二种更好。最后实现方式为：

.city-location::after{
    content:"";
    width:40%;
    height:2px;
    display: block;
    margin: 0 auto;
    background:white;
}

4 center text (horizontally and vertically) inside a div

设置 line-height, same height as div height.
这个是用在flexbox item里面了，发现设置flexbox Item的各种属性都不能居中。最后居然是需要设置高度给文本。