• 理解margin负值,实现经典布局


    margin负值

    block元素可设置四个方向的值,无论正负。

    inline元素上下margin值无效,左右无论正负均有效

    inline-block元素,当vertical-alignbaseline时,上下margin负值无效,其他情况正负均有效。

    元素重叠

    两个块级元素发生重叠,后面的元素能覆盖前面元素的背景,无法覆盖内容

    两个行内元素发生重叠(包括inline+ inline, inline-block + inline-block, inline-block + inline),后面元素能覆盖前面元素的背景和内容

    行内元素和块级元素重叠(包括inline + block, inline-block + block),行内元素覆盖块级元素的背景

    块级元素和浮动元素重叠,块级元素的背景在在浮动元素下,内容在浮动元素之上

    行内元素或行内块元素与浮动元素叠加,背景和内容都在浮动元素之上

    行内元素或块级元素与定位元素重叠(position非static),定位元素覆盖其他元素的背景和内容

    布局应用

    html,body {
        margin: 0;
    
      }
    
      .box {
        overflow: hidden;
         100%;
        min-height: 100%;
      }
    
      .left {
         100px;
        float: left;
        background-color: pink;
      }
    
      .right {
         100px;
        float: right;
        background-color: pink;
      }
    
      .main {
        margin: 0 110px;
        background-color: lightgreen;
      }
    
      .main,
      .left,
      .right {
       margin-bottom: -9999px;
       padding-bottom: 9999px;
      }
    
      <div class="box">
        <div class="left">左侧文字比较少</div>
        <div class="right">右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多</div>
        <div class="main">中间文字比较少</div>
      </div>
    

    等高布局实现原理,左边的盒子左浮动,右边的盒子右浮动,中间盒子设置左右margin,大小为左右盒子的宽度,这三步实现了左右固定中间自适应布局。为左中右三个盒子设置padding-bottom极大值,margin-bottom负的极大值,实现等高布局。以上又叫圣杯布局

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    float对内联元素和块元素的影响
    行内元素的困扰
    Nodejs同步和异步编程
    let、const、var的区别
    作用域
    SpringMVC
    MVC2新闻编译与发布
    JSP显示新闻
    servlet应用
    SWPU邮件登录界面的仿写(第二次作业)
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356408.html
Copyright © 2020-2023  润新知