负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改。
负数给人总是一种消极、否定、拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用。这里说的负值主要指的是负margin。
关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
本文不讲原理,主要展示几个应用。
一、左右列固定,中间列自适应布局
此例适用于左右栏宽度固定,中间栏宽度自适应的布局。由于网页的主体部分一般在中间,很多网页都需要中间列优先加载,而这种布局刚好满足此需求。
HTML:
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
CSS:
body{
margin:0;
padding:0;
min-width:600px;
}
.main{
float:left;
width:100%;
}
.main_body{
margin:0 210px;
background:#888;
height:200px;
}
.left,.right{
float:left;
width:200px;
height:200px;
background:#F60;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
效果:
二、去除列表右边框
项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:
HTML:
<div id="test">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
</ul>
</div>
CSS:
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
#test{
width:320px;
height:210px;
background:#CCC;
}
#test ul{
margin-right:-10px;
zoom:1;
}
#test ul li{
width:100px;
height:100px;
background:#F60;
margin-right:10px;
margin-bottom:10px;
float:left;
}
效果:
三、负边距+定位:水平垂直居中
使用绝对定位将div定位到body的中心,然后使用负margin(content宽高的一半),将div的中心拉回到body的中心,已到达水平垂直居中的效果。
HTML:
<div id="test"></div>
CSS:
body{margin:0;padding:0;}
#test{
width:200px;
height:200px;
background:#F60;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
效果:
四、去除列表最后一个li元素的border-bottom
列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。
HTML:
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
CSS:
body,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
#test{
margin:20px;
width:390px;
background:#F4F8FC;
border-radius:3px;
border:2px solid #D7E2EC;
}
#test li{
height:25px;
line-height:25px;
padding:5px;
border-bottom:1px dotted #D5D5D5;
margin-bottom:-1px;
}
效果:
五、多列等高
此例关键是给每个框设置大的底部内边距,然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素,如果把外包容器的overflow属性设为hidden,列就在最高点被裁切。
HTML:
<div id="wrap">
<div id="left">
<p style="height:50px">style="height:50px"</p>
</div>
<div id="center">
<p style="height:100px">style="height:100px"</p>
</div>
<div id="right">
<p style="height:200px">style="height:200px"</p>
</div>
</div>
CSS:
body,p{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:580px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-200px;
padding-bottom:200px;
}
#left {
float:left;
width:140px;
background:#777;
}
#center {
float:left;
width:300px;
background:#888;
}
#right {
float:right;
width:140px;
background:#999;
}
p {color:#FFF;text-align:center}
效果:
负值之美:负margin在页面布局中的应用的更多相关文章
- 负margin在页面布局中的应用
关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...
- (负)-margin在页面布局中的应用
有关margin的原理可以看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 有关margin负值的几 ...
- [转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
- 在HTML页面布局中,position的值有几种,默然的值是什么
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- margin负值在页面布局中的应用
http://www.w3school.com.cn/tiy/t.asp 预览工具 一.左右列固定,中间列自适应布局 此例适用于左右栏宽度固定,中间栏宽度自适应的布局.由于网页的主体部分一般在中间,很 ...
- 关于 静态页面布局 中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
- 【html+css】关于页面布局中遇到的问题记录
关于行内元素: 行内元素设置width无效, height无效(可以设置line-height), margin上下无效,padding上下无效,margin和padding可设置左右. text ...
- 关于页面布局中,如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?
首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...
随机推荐
- LaTeX 公式字体大小设置
字体大小: 七号 5.25pt 1.845mm \tiny六号 7.875pt 2.768mm \scriptsize小五号 9pt 3.163mm \footnotesize五号 10.5p ...
- 视频地址blog加密
/* JS部分 没处理兼容什么的 */ var id='<?php echo $_GET['id'];?>'; var video = document.getElementById(&q ...
- el 表达式的比较和包含
相等( equal ) :eq 不相等( not equal ): ne / neq 大于( greater than ): gt 小于( less than ): lt 大于等于( great th ...
- 4 python内置函数
1.内置函数的整体介绍 内置参数官方详解 https://docs.python.org/3/library/functions.html?highlight=built#ascii 2.各内置函数介 ...
- vue基础——模板语法
模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...
- NISP视频知识点总结
身份认证访问控制安全审计本章实验 ===密码学=====古典密码 算法本身的保密性近代密码 机械密码\机电 密码打字密码机轮转机现代密码 基于密钥公钥密码 公钥==================对称 ...
- cat 生成文件 运行脚本
nohup python -u day_std_cid_list_data_done.py >eee1.log 2>&1 & 后台运行python脚本 hadoop fs ...
- knn手写识别
import numpy as np import operator import os #KNN算法 def knn(k,testdata,traindata,labels):#(k,测试样本,训练 ...
- t检验,T Test (Student’s T-Test)
1.什么是T test? t-test:比较数据的均值,告诉你这两者之间是否相同,并给出这种不同的显著性(即是否是因为偶然导致的不同) The t test (also called Student’ ...
- SpringCloud之Eureka 服务注册和服务发现基础篇2
上篇文章讲解了SpringCloud组件和概念介绍,接下来讲解一下SpringCloud组件相关组件使用.原理和每个组件的作用的,它主要提供的模块包括:服务发现(Eureka),断路器(Hystrix ...