CSS负边距margin的应用
原文
简书原文：https://www.jianshu.com/p/75a178e65207
相关文章
CSS负margin的影响：https://www.cnblogs.com/shcrk/p/9310834.html
大纲
1、实战：利用负边距在文档流中的作用——实现选项卡上边框消失
2、实战：利用负边距改变自身高度——实现下边框消失的效果
3、实战：利用负边距影响自身高度——实现多列等高布局
4、实战：利用负边距增加自身宽度——实现多列等宽布局
1、实战：利用负边距在文档流中的作用——实现选项卡上边框消失
<!--
第一个ul设置了margin-bottom为负值，将后一个ul往上方拉，覆盖之前的ul元素 给li设置背景色，利用背景色掩埋后一个ul的框，之所以可以这样，是因为li设置了
float，浮动在文档流上方，可以认为元素层级比后一个ul来的高，所以可以覆盖后一个ul，
并且后一个ul需得是block才可以
换句话说，后一个元素上拉，但是被前一个元素的子元素覆盖的情况，需要后一个元素
是div，前一个元素的子元素为浮动元素，这样的情况才可以实现
初始代码：
div{
width:100px;
height:100px;
vertical-align:bottom;
}
.box{
background:black;
}
.box1{
background:red;
}
.box3{
width:100%;
background:blue;
} <div class="box">
<div class="box1"> </div>
</div>
<div class="box3">
</div> 效果代码
.box{
margin-bottom:-20px;/*将后一个div往上拉*/
}
.box1{
float:left;/*让子元素浮动，这样其背景色才可以覆盖后一个div的边框*/
}
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>负margin的应用</title>
<style type="text/css">
* {padding:0;margin:0;}
li {list-style-type:none}
.demoTab{
width:400px;
margin:20px auto;
font:14px/1.5 Microsoft YaHei,verdana,Helvetica,Arial,sans-serif;
}
.demoTab .demoTabNav{
height:28px;
overflow:hidden;
*zoom:1;
margin-bottom:-1px;
border-left:1px solid red;
}
.demoTab .demoTabList{
float:left;
padding:0 22px;
line-height:28px;
border-right:1px solid red;
border-top:1px solid red;
font-weight:bold;
color:#005590;
text-align:center;
cursor:pointer;
}
.demoTab .demoTabList.current{
position:relative;
background:#EAF0FD;
}
.demoTabList:hover{
background:#EAF0FD;
}
.demoTab .demoTabBd{
border:1px solid red;
padding:15px;
}
.demoTab .demoTabContent{display:none;}
.demoTab .demoTabContent.current{display:block;} </style>
</head> <body> <div id="demoTab" class="demoTab">
<ul class="demoTabNav clearfix">
<li class="demoTabList current">前端</li>
<li class="demoTabList">实战</li>
<li class="demoTabList">交互</li>
<li class="demoTabList">优化</li>
</ul>
<ul class="demoTabBd">
<li class="demoTabContent current">这是第一个选项卡的内容。</li>
<li class="demoTabContent">这是第二个选项卡的内容。</li>
<li class="demoTabContent">这是第三个选项卡的内容。</li>
<li class="demoTabContent">这是第四个选项卡的内容。</li>
</ul>
</div> </body>
</html>
2、实战：利用负边距改变自身高度——实现下边框消失的效果
<!--
通过添加负边距从而将盒子模型的内容的高度减少，负边距掩盖了下边框
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>负margin</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
margin:100px auto;
width:300px;
}
ul.table{
border:1px #ccc solid;
}
ul.table li{
border-bottom: 1px #ccc solid;
list-style: none;
} </style>
<ul class="table">
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
</ul>
</body>
</html>
3、实战：利用负边距影响自身高度——实现多列等高布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>负margin</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.container{
margin:0 auto;
width: 100%;
overflow: hidden;
}
.left{
height: 50px;
width: 33.33%;
margin-bottom: -5000px;
padding-bottom: 5000px;
float: left;
background-color: rgba(33, 114, 214, 0.8);
}
.main{
height:100px;
margin-bottom: -5000px;
width: 33.33%;
float: left;
padding-bottom: 5000px;
background-color: rgba(255, 82, 0, 0.8);
}
.right{
height:30px;
width: 33.33%;
float: left;
margin-bottom: -5000px;
padding-bottom: 5000px;
background-color: rgba(90, 243, 151, 0.8)
} </style>
<div class="container">
<div class="left"> height:50px</div>
<div class="main">height:100px</div>
<div class="right">height:30px</div>
</div>
</body>
</html>
4、实战：利用负边距增加自身宽度——实现多列等宽布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>负margin</title>
<style type="text/css">
body,ul,li{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
.container{
height:210px;
width:460px;
border:5px solid #000;
}
ul{
height:210px;
overflow:hidden;
margin-right:-20px;
}/*一个负的margin-right,相当于把ul的宽度增加了20px*/
li{
height:100px;
width:100px;
background:#09F;
float:left;
margin-right:20px;
margin-bottom:10px;
}
</style>
<div class="container">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
<li>子元素7</li>
<li>子元素8</li>
</ul>
</div>
</body>
</html>
CSS负边距margin的应用的更多相关文章
- （转）CSS布局-负边距-margin
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
- CSS 负边距读后感
最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...
- IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常
标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...
- RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常
标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...
- css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- css 负边距 小记
水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度 但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值 (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...
- 浅析CSS负边距
本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
随机推荐
- 洛谷——P1209 [USACO1.3]修理牛棚 Barn Repair
https://www.luogu.org/problem/show?pid=1209 题目描述 在一个夜黑风高,下着暴风雨的夜晚,farmer John的牛棚的屋顶.门被吹飞了. 好在许多牛正在度假 ...
- CDN服务上线，DNSPOD布局云端生态圈
爱因斯坦曾说过,我从不去想未来,由于它来得已经够快的了.是的,随着互联网的高速发展,我们的生活节奏越来越快,可是人们的耐心却像鞋底一样越磨越薄. 遥控器按一下,鼠标点一下,仅仅要认为没意思或者等待时间 ...
- 怎样从Cortex-m向STM32移植使用SPI接口协议
/*************************************************************************************************** ...
- hdu4336Card Collector 概率dp+状态压缩
//给n个卡片每次出现的概率,求全部卡片都出现的须要抽的次数的期望 //dp[i]表示在状态的情况下到全部的卡片都出现的期望 //dp[i] = 1 + p1*dp[i] + ${p2[j]*dp[i ...
- cocos2d-x 一些3效果的类及创建參数
CCShaky3D::create(时间,晃动网格大小,晃动范围,Z轴是否晃动); //创建一个3D晃动的效果 CCShakyTiles3D::create(时间,晃动网格大小,晃动范围,Z轴是否晃动 ...
- 写了个去重复文件的 PHP 脚本，
写了个去重复文件的 PHP 脚本点击打开链接 把各个零散网盘.邮箱和服务器上的文件,三台电脑上的文件收集在新硬盘里,然后清空了网络和电脑上的文件.才发现这个文件不能这里放点,那里存点,到时候不知道在哪 ...
- android图像处理（3）底片效果
这篇将讲到图片特效处理的底片效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理:将当前像素点的RGB值分别与255之差后的值作为当前点的RGB值. 例: ABC 求B点的底片效果: B.r ...
- Linux在应用层读写寄存器的方法
可以通过操作/dev/mem设备文件,以及mmap函数,将寄存器的地址映射到用户空间,直接在应用层对寄存器进行操作,示例如下: #include <stdio.h> #include &l ...
- 14.inline与namespace使用
#include <iostream> using namespace std; namespace all { //inline作用为默认调用 inline namespace V201 ...
- 【习题 6-7 UVA - 804】Petri Net Simulation
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever test sever ...