前端水平和垂直布局

比眉伴天荒 2022-08-31 15:23 145阅读 0赞

# 水平布局： #

*  元素在其父元素里的位置由以下几个属性决定：
    
    <table style="width:700px;"> 
     <tbody> 
      <tr> 
       <td>margin-left</td> 
       <td>border-right</td> 
       <td>padding-left</td> 
       <td>width</td> 
       <td>padding-right</td> 
       <td>border-right</td> 
       <td style="width:111px;">margin-right</td> 
      </tr> 
     </tbody> 
    </table>
 *  水平布局时必须满足上述7个值之和等于父元素的content，！必须满足。

### 如果出现不满足的情况，浏览器会自动调整： ###

*  七个值中没有auto时，调整margin-right的值
 *  如果width为auto，则调整width，无论其他值是不是auto（其他值调整为0）
 *  如果width不是auto，margin-left和margin-right为auto，则平分
 *      .box{
                    /* content */
                    width: 700px;
                    height: 100px;
                    border: red 10px solid;
                }
                .box1{
                    width: auto;
                    height: 100px;
                    margin-right: 300px;
                    margin-left: 300px;
                    background-color: purple;
        
                }
    
    --------------------
    
    # 垂直布局： #
 *  默认情况下由内容撑开，没有内容时height为0，不显示
 *  根据height的值，height是多少就是多少
 *  当子元素的height大于父元素的height时，出现溢出
 *  溢出处理，通过父元素的overflow属性：
    
    <table style="width:500px;"> 
     <tbody> 
      <tr> 
       <td>visible</td> 
       <td>默认，可见</td> 
      </tr> 
      <tr> 
       <td>hidden</td> 
       <td>隐藏</td> 
      </tr> 
      <tr> 
       <td>scroll</td> 
       <td>水平和垂直滚动条</td> 
      </tr> 
      <tr> 
       <td>auto</td> 
       <td>自动生成滚动条</td> 
      </tr> 
     </tbody> 
    </table>
 *  overflow-x单独处理水平方向溢出，overflow-y单独处理垂直方向

### 垂直外边距重叠： ###

*  兄弟元素之间相邻外边距即一下一上，和外边距为：
    
    <table style="width:500px;"> 
     <tbody> 
      <tr> 
       <td>两个正值</td> 
       <td>取较大一个</td> 
      </tr> 
      <tr> 
       <td>一正一负</td> 
       <td>相加</td> 
      </tr> 
      <tr> 
       <td>两个负值</td> 
       <td>取绝对值较大一个</td> 
      </tr> 
     </tbody> 
    </table>
 *  子元素和父元素之间如果上外边距重合，则修改子元素的外边距会让父元素整个下移动，解决办法：1.修改父元素的内边距 2.用父元素的border-top使得父子元素的上边距隔开。

前端水平和垂直布局

发表评论取消回复

还没有评论，来说两句吧...

相关阅读