margin-right:负值，在没有设置DOM元素宽度的前提下，DOM元素宽度变宽。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7         <style type="text/css">
 8             * { 9                 margin: 0;
10                 padding: 0;
11             }
12
13             .clearfix {14                 *zoom: 1;
15             }
16
17             .clearfix:after {18                 content: "";
19                 display: table;
20                 clear: both;
21             }
22             /*最外层宽度 340=100+20+100+20+100*/
23
24             .pp {25                 width: 340px;
26                 border: 1px solid green;
27             }
28             /*次外层宽度 360*/
29
30             .p {31                 margin-right: -20px;
32                 overflow: hidden;
33             }
34             /*每个宽度100+20*/
35
36             .c {37                 float: left;
38                 height: 100px;
39                 width: 100px;
40                 margin-right: 20px;
41                 background: #09F;
42             }
43         </style>
44     </head>
45
46     <body>
47         <div class="pp">
48             <div class="p clearfix">
49                 <div class="c">
50                     宽度100px，margin-right: 20px;
51                 </div>
52                 <div class="c">
53                     宽度100px，margin-right: 20px;
54                 </div>
55                 <div class="c">
56                     宽度100px，margin-right: 20px;
57                 </div>
58             </div>
59         </div>
60
61     </body>
62
63 </html>

效果：

具体原理请看代码注释。

注：padding不允许使用负值。

转载于:https://www.cnblogs.com/mengfangui/p/6607386.html

margin 负边距应用相关推荐

3.CSS布局奇淫巧计之-强大的负边距【转】
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
CSS布局奇淫巧计之-强大的负边距
负的边距好像能减小元素在文档流中的尺寸一样,但事实上,它的尺寸大小并没变,只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,因此位置也就发生变化了. 实例: 因为P为block元素且没有 ...
html中设置负边距的意义,css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
css 高度塌陷_web前端入门到实战：CSS 负边距的行为表现
CSS 中的负边距 margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果. 先介绍下我们的测试元素:一个简单的包含三个段落的容器元素.注意, ...
使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题.目前国内门户很多都进行了改版,采用目前的主流–960px左右的宽度. 我认为 ...
负边距在布局中的使用
负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档 ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
负边距在布局中的使用 BY:色拉油啊油
负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档 ...
html div块边距为负,CSS奇技淫巧之负边距的应用
最近在学习flex布局,在赞叹其便捷性的同时,回想起之前使用css2的时候实现等高或者等宽布局的麻烦.同时也看到[The Definitive Guide to Using Negative Marg ...

margin 负边距应用

margin-right:负值，在没有设置DOM元素宽度的前提下，DOM元素宽度变宽。

margin 负边距应用相关推荐

最新文章

热门文章