zoukankan      html  css  js  c++  java
  • (负)-margin在页面布局中的应用

    有关margin的原理可以看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

    有关margin负值的几个案例可以参考:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

    主要有以下几种情况:

    一、左右列固定,中间列自适应布局 ;

    此例适用于左右栏宽度固定,中间栏宽度自适应的布局。由于网页的主体部分一般在中间,很多网页都需要中间列优先加载,而这种布局刚好满足此需求。

    二、去除列表右边框 ;

    项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现这种效果;

    三、负边距+定位:水平垂直居中 ;

    使用绝对定位将div定位到body的中心,然后使用负margin(content宽高的一半),将div的中心拉回到body的中心,已到达水平垂直居中的效果。

    四、去除列表最后一个li元素的border-bottom;

    列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。

    五、多列等高 ;

    此例关键是给每个框设置大的底部内边距,然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素,如果把外包容器的overflow属性设为hidden,列就在最高点被裁切。

  • 相关阅读:
    当老板如何带团队?
    创业者第一法宝-了解自己
    交流才能交易,交易才能交心
    集合框架
    MySQL一些命令语法
    JS组成整理
    git中可以pull但是push提示Everything up-to-date的情况
    循环判断以及文件的使用--练习1
    Hello World !
    linux文件权限修改
  • 原文地址:https://www.cnblogs.com/caojiayan/p/6145577.html
Copyright © 2011-2022 走看看