• 理解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负的极大值,实现等高布局。以上又叫圣杯布局

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    ckeditor 3.0.1使用
    也谈QQ表情弹出框的制作
    百度的模态弹出窗口
    day03 set集合,文件操作,字符编码以及函数式编程
    写在开始之前
    day07 类的进阶,socket编程初识
    day06 面向对象编程
    day02 Python 的模块,运算,数据类型以及方法
    day04 装饰器 迭代器&生成器 Json & pickle 数据序列化 内置函数
    day08 多线程socket 编程,tcp粘包处理
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356408.html
Copyright © 2020-2023  润新知