7-8day_button 会继承父元素高度吗?-CSDN博客

本文链接：https://blog.csdn.net/weixin_44381527/article/details/97300673

1 div高度

任何一个div没有给它高度，他的高度由内部的子元素撑开。如下button本来应该在绿色区域最下边。
[外链图片转存失败(img-laqN6MnR-1564059762759)(./7-8.1.png)]

.banner-num  {
position:absolute;
right: 0;
bottom: 0;
}

因为没有给父元素高度。父元素没有高度，定位反而使得元素朝上跑。
！！！一定要记得给每个block（div）加上高度。height：100%。

.banner .container {
max-width:960px;
/* height: 100%; */
margin:0 auto;
position :relative;
}

span 这种行内元素margin上下无效，改成inline-block

2 CSS消除button标签的默认样式

[外链图片转存失败(img-PeufBu34-1564059762759)(./7-8.2.jpg)]

//消除button的默认样式
padding: 0;
border: 1px solid transparent;  //自定义边框
outline: none;    //消除默认点击蓝色边框效果

3 html消除内联元素(a img span )之间的空隙

在标签之间不添加任何的换行和空格
给父元素的字体大小设置为0px;然后再单独给子元素设置字体大小。

4 flex居中以及各项之间间距

flex 项的水平垂直居中是指整个项目块的位置，flex项内部元素的居中还是要用到其他知识点。

align-items 垂直
justify-content 水平
flex项各行以及各列之间的距离与上面两个属性大有关系。
margin在flex不会重叠。

给flex各项设置了高度后，align-items 默认值stretch就不起作用了。
对于下图的布局,每一行元素之间的距离是经过计算的，确定一个最小距离换行，实际应用中应该会给出每个项的准确尺寸。
```
  .content .content1,  
  .content .content2,  
  .content .content3 {
      flex:1 300px;
      margin: 0 10px 10px 0
  }
```

[外链图片转存失败(img-c2avgR6m-1564059762760)(./all.jpg)]

… 一些布局问题

如下要求

主导航区域，有一个100%宽的灰色线条，线条之上，在中间960px区域是导航菜单。

主要内容区域，宽度为960px。
因为相对居中和绝对定位存在重叠，因此要再分一个容器
container–minnav-menubar

  <div class="mainnav">
  <div class="container">
      <div class="minnav-menubar">
          <span class="list">HOME   
          </span><span class="list">PROFILE
          </span><span class="list">ABOUT</span> 
      </div>            
  </div>

  .mainnav {
  height:40px;
  border: 1px solid #eeeeee;
  }
  .mainnav .container {
      max-width:960px;
      margin:0 auto;
      height :100%; 
      position: relative;
  }
  .mainnav .container  .minnav-menubar {
      position: absolute;
      left:0;
      bottom: 0;   
  }