【CSS】 布局之剖析负边距
我们都知道，一个元素框的大小是由元素内容+内边距+边框+外边距来决定的。
关于内边距padding，内边距呈现了元素的背景，其设置值是不可以为负的。
而对于外边距margin，默认为透明，设置值可以为负，其实这也就是所谓的负边距。
下面我们来分析一下margin负边距的原理。
首先我们看看下面的布局：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline、block、inline-block的区别</title>
<style>
* {
margin: 0;
padding: 0;
} #box {
width: 600px;
margin: 100px auto 0 auto;
border: 1px solid;
padding: 20px;
}
#box #font1 {
color: white;
background: red;
}
#box #font2 {
display: block;
width: 100px;
background: green;
color: white;
}
#box #font3 {
display: inline-block;
width: 100px;
background: blue;
color: white;
} </style>
</head>
<body>
<div id="box">
这是普通文本这是普通文本<span id="font1">这是inline这是inline这是inline</span>这是普通文本这是普通文本
这是普通文本<span id="font2">这是block这是block这是block这是block</span>这是普通文本这是普通文本这是普通文本这是普通文本
这是普通文本这是普通文本这是普通文本这是普通文本<span id="font3">这是inline-block这是inline-block这是inline-block</span>这是普通文本这是普通文本这是普通文本这是普通文本
</div>
</body>
</html>
效果：
这里面包括了内联元素(inline)、块级元素(block)和行内块元素(inline-block)三种框类型。
内联元素(inline):
在父元素框中的位置由文档流决定。
其内边距padding决定了红色区域部分的范围，而外边距margin决定了该内联元素框与其他文本流之间的距离，且只有margin-left和margin-right设置有效。
块级元素可由display: inline属性设置为内联元素。内联元素宽(width)高(height)设置无效。
块级元素(block):
在父元素框中的位置由文档流决定，不过总是重起一行，即前后都有一个换行符。
其内边距padding决定了绿色区域部分的范围，而外边距margin决定了该块级元素框与其他文本流之间的距离。
元素只有为块级元素，宽(width)高(height)的设置才有效。内联元素可由display: block属性设置为块级元素。
行内块元素(inline-block):
在父元素框中的位置由文档流决定，其与块元素的区别在于不重起一行，前后没有换行符。
其内边距padding决定了蓝色区域部分的范围，而外边距margin决定了该块级元素框与其他文本流之间的距离。
行内块元素可以设置宽(width)高(height)，其余元素可由display: inline-block属性设置为行内块元素。
弄清楚了三种元素框的表现形式。我们给他们分别设置-20px的外边距。
<style>
* {
margin: 0;
padding: 0;
} #box {
width: 600px;
margin: 100px auto 0 auto;
border: 1px solid;
padding: 20px;
}
#box #font1 {
color: white;
background: red;
margin: -20px;
}
#box #font2 {
display: block;
width: 100px;
background: green;
color: white;
margin: -20px;
}
#box #font3 {
display: inline-block;
width: 100px;
background: blue;
color: white;
margin: -20px;
}
</style>
效果：
我们发现，整个父元素框变小了，并且外部文本流向各元素框推进了20px的距离，从而元素框的一部分覆盖到了文本流上。
这就是负边距的实现形式，我们可以这样来比喻：一个人坐在一个桶里飘在海面上，四面都是水，而由于桶的作用，人是接触不到水的。而当桶的边缘发生了破损，水就侵入到了桶里，桶里的人自然后泡到水里了。这个桶就好比外边距，而里面的人时元素的内容，外面的水自然就是文本流了。比喻也许有点不恰当，不过大概意思就是这样了。
我们可以用负边距做很多事情，比如多列等高、元素的居中、宽度自适应、元素框外边的裁剪等等。
【CSS】 布局之剖析负边距的更多相关文章
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
- （转）CSS布局-负边距-margin
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- CSS布局奇淫巧计之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- CSS布局之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- css中的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS 负边距读后感
最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...
随机推荐
- 8、Semantic-UI之其他按钮样式
8.1 其他按钮样式定义 示例:定义其他按钮样式 定义圆形图标按钮样式 <div class="ui circular icon button"><i class ...
- Android-读取操作系统通话记录并/拨打电话/发送短信/复制号码到拨号盘
apps目录的contacts应用(有读取通话记录功能),是访问provider目录的provider.contacts应用(有暴露通话记录),所以要阅读Android操作系统源码-->pack ...
- Javascript 链式作用域 function fn(){}和var fn=function(){}区别
其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...
- python学习之路 二 ：基本数据类型
本节重点 理解什么是变量? 掌握各种数据类型 理解可变类型和不可变类型 一.变量和常量 变量: 作用:存贮程序的中间结果在内存里,以备后边的程序调用 定义规范: 变量名只能是 字母.数字活下划线的任意 ...
- RAID 介绍
介绍 磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有冗余能力的阵列”之意. 磁盘阵列是由很多价格较便宜的磁盘,组合成一个容量巨 ...
- OI题目类型总结整理
## 本蒟蒻的小整理qwq--持续更新(咕咕咕) 数据结构 数据结构 知识点梳理 数据结构--线段树 推荐yyb dalao的总结--戳我 以后维护线段树还是把l,r写到struct里面吧,也别写le ...
- 用Visual Studio 2015 编译张帆的第一个NT式驱动，并且成功安装到Windows XP里面！！！
开发工具:Visual Studio 2015 企业版 目 标 机:Windows XP X86 前提:我们已经成功安装了Visual Studio 2015以及WDK,而且更重要一点是一定要SDK版 ...
- 6.BOM
BOM的介绍 浏览器对象模型. 操作浏览器部分功能的API.比如让浏览器自动滚动. BOM的结构图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子 ...
- dataframe去重 drop_duplicates
data.drop_duplicates() #默认:data中一行元素全部相同时才去除 data.drop_duplicates(['a','b'])#data根据’a','b'组合列删除重复项,默 ...
- Vagrant更改默认的SSH端口
Vagrant默认转发宿主的2222端口到虚拟机的22端口(默认设置,无须配置).在有多个虚拟机并存的情况下,2222端口将不好使.具体表现在: 启动第二个虚拟机的时候,会报端口占用错误: $ vag ...