zoukankan      html  css  js  c++  java
  • 负margin技术

    margin外边距的值也是可以取负值的,margin-top、margin-left取负值,则表示该元素朝这个方向拉近,margin-right、margin-bottom取负值,则表示后续元素朝该方向拉近,因此,margin-right、margin-bottom可以将后续元素拉近,进而覆盖“当前元素”。

    常用的负margin技巧有三个:

    (1)图片与文字对齐

    图片与文字排在一起的时候,他们的对齐方式默认是基线对齐(vertical-align:baseline),所以在底部水平方向上往往都是不对齐的,要想实现对齐,除了使用vertical-align:text-bottom,还有一个兼容性更好的方法:img{margin:0 3px -3px 0}

    (2)自适应两列布局

    所谓自适应两列布局,指的是在左右两列中,其中有一列的宽度为自适应,另外一列宽度是固定的。

    方法如下:

    1.定义两个元素为同方向浮动元素

    2.主体部分固定宽度元素右外边距为侧边栏部分自适应元素width的负值

    3.防止文本重叠,定义主体部分的文本右外边距为固定的width+间距(界定浏览器边界)

    eg:

    <!doctype html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #content,#sidebar{
    float:left;
    color:white;
    }
    #content{
    100%;
    margin-right:-200px;
    background-color:Red;
    }
    #sidebar{
    200px;
    background-color:Purple;
    }
    /*防止浏览器可视区域宽度不足时发生文本重叠*/
    #content p{margin-right:210px;}
    /*它是200px+10px,10px是他们的间距*/
    </style>
    </head>
    <body>
    <div id="content"><p>这是主体部分,自适应宽度</p></div>
    <div id="sidebar"><p>这是侧边栏部分,固定宽度</p></div>
    </body>
    </html>
    

      

    (3)元素垂直居中

    这个方法在css技巧元素垂直居中一篇中的随笔有记录,略

  • 相关阅读:
    android 面试题
    android 入门-android Studio git 克隆
    android 入门-android自定义控件
    android 入门-控件 测量状态栏高度
    android 入门-android Studio git配置
    WPF 介绍一种在MVVM模式下弹出子窗体的方式
    WPF DataGrid分组和排序
    C# 等待框
    WPF 简洁的主界面
    C# 在WPF中使用Exceptionless异常日志框架
  • 原文地址:https://www.cnblogs.com/runhua/p/6429010.html
Copyright © 2011-2022 走看看