Div浅析

多个div重叠，塌陷问题

自我理解：模块之间可能会有重叠，以写了overflow:hidden语句的元素宽高为准，超出的部分都隐藏。

  <div class="div3" >3<div>
       <div class="div4" >4<div>

.div3{
  background-color:yellow;
  height:50px;
  width:50px;}
.div4{
  background-color:pink ;
  height:50px;
  width:50px;}

2个高、宽都为50px，有黑色边框部分为看清前后对比，默认是根据内容大小展示，及时设置了高宽。
图1

• 只在yellow模块中添加：overflow:hidden，*粉红色的黑色边框不见了！*因此得以验证。

• 只在pink模块中添加：overflow:hidden，和图1一样。
  

2行以上div显示出高宽

神奇的line-height： px 或者 %

• 只在yellow模块中添加如下代码，下面所有div内容都展示出来了（被别人顶出去了）

 line-height:50px;//行高等于形状高度

我想4和5有嵌套关系呢？

• 再在相应模块中更改line-height。
• 

div内文字完全居中（中心居中）

1.利用文字属性

   line-height:50px;//文字高度和容器高度一样，所以纵向居中
  text-align:center;//水平方向居中，所以结合就是完全居中

多个div，第一个div设置text-align:center;后，一列的都会居中

可以通过text-align:center | left | right,调整方向

尚未解决问题：

• div中嵌套了p类，text-align就不能再控制方向,及时是设置在p的CSS中
• 如何让文字在div的底部显示？

2.利用Flex布局

  display:flex;
  align-items: center;
  justify-content: center;