css负边距

原创 2016年08月28日 15:26:35

为什么绝对定位加负边距可以居中呢?!why?

让我们来一探究竟~~~~

<div style="width: 200px;height: 200px;position: relative;border: 1px solid red;">
    <div style="background-color: green;position: absolute;width: 100px;margin-left: -50px;left: 50%;height: 100px;margin-top: -50px;top: 50%;"></div>
</div>

这里写图片描述

因为
1,居中是相对于父节点。此处父节点定位为rel/abs。ok!
2,css设置负边距的作用。相对定位之后,原来的位置仍然被占据
但是负边距的元素是位置发生了变化,原来的位置也不存在。
3,绝对定位是相对于左上角。居中是图形的正中心在中间,而不是边框!!!!。
4,left:50%是如下效果
这里写图片描述

left:50%指的边框 距离左边框 50%

5,此时正心还在父节点中心的右边。中心必须向左移动50%。

所以是margin-left:-50px;

这种方法:兼容好。但是需要定好元素的宽高。

那如果不能定宽高怎么办?
1,padding-top:100px;padding-bottom:100px;高度不定时,内容可以垂直居中。
2,height:14em;line-height:14em;只能作用于文本
3,display:flex;justify-content:center;align-items:center;多栏多列布局,只兼容FF,Chrome等A等浏览器。
4,display:table-cell;vertical-align:middle;text-align:center;不兼容IE6
5,对于纯文本居中,直接vertical-align:middle;text-align:center;
6,margin:0 auto;兼容IE6,7.IE8不兼容。需要定宽.

版权声明:本文为博主原创文章,未经博主允许不得转载。

css负边距之详解

css负边距的奇技淫巧前言:再来看看 CSS Box Model 在static元素中使用负边距下面的图片已经说得很明白了,我们直接看代码。。。...
  • AidanDai
  • AidanDai
  • 2015年11月21日 13:46
  • 456

CSS布局之负边距

CSS中负边距是布局中常用到的技巧,很多的布局方法也会依赖负边距。再思考盒模型css最基础的也是最基本最重要的就是盒模型的概念 盒模型示意图: border和border以内部分是我们可以看到的“...
  • u013848401
  • u013848401
  • 2016年09月06日 19:59
  • 751

css 上下边距,外边距,负边剧

一.块级标签的上下边距 注意:上下排放的盒子,两盒子之间的间距取最大值 style> #div1{ background-color: #FF6500; ...
  • sun_smile1
  • sun_smile1
  • 2017年05月05日 20:30
  • 276

关于负外边距的作用效果

今天无意中看到了双飞燕,圣杯布局,发现里面主要是有用到一个负外边距,感觉挺神奇的这玩意 ( ⊙ o ⊙ )!看就了一些关于负外边距的资料,这里自己总简单结一下。 参考网址: http://www...
  • creasher
  • creasher
  • 2016年07月18日 14:00
  • 822

浮动情况下的负外边距的研究以及经典布局

引子最近看了一眼最新的面试题,准备秋招,发现了一个比较老的题,就是div+css经典布局的二列式布局和三列式布局,比如:两列布局,左边定宽,右边自适应。或者三列布局,两边定宽,中间自适应。这不很好写么...
  • Dove88888888
  • Dove88888888
  • 2016年07月26日 23:33
  • 396

css负边距可以实现的布局(上)左固定右自适应,多行多列,等高布局

css负边距原来有这么大的妙用。 今天看了一篇大大的博文: css的负边距(margin负值)的绝招负边距可以做的事有很多。 可以增大元素的宽度 可以实现多列多行布局 左侧固定右侧自适应布局 等高...
  • u014787301
  • u014787301
  • 2016年08月02日 13:18
  • 973

css负边距

本片博客学习segmentfault这篇文章后,实践理论后所写,偏向实践图文验证,部分好的概念性东西,直接引用。我们在写css的时候,可能往往忽略了如果css设置负边距的情景, 他们是完全有效的CSS...
  • xi_2130
  • xi_2130
  • 2015年11月27日 16:24
  • 313

盒模型:外边距叠加和外边距为负值

盒模型乍一看很简单,无非就是内容、内边距、边框和外边距。但是写起代码来你会发现并不简单,很多地方都很模糊,特别是外边距为负值的时候。 这篇文档主要说明两个问题: 1.外边距叠加 2.外边距为负值   ...
  • whoami021
  • whoami021
  • 2014年02月28日 01:32
  • 2149

初识负外边距在布局中的影响(1):基础理论

1.引言开篇前需声明一点:本人前端的菜鸟一枚,也是在自学的过程中碰到了负边距(Negative Margin)布局问题,所以花了近一天的时间去找资料写Demo测试,文章是我综合其他大牛的思路而成,目的...
  • wucdsg
  • wucdsg
  • 2017年11月03日 09:36
  • 100

css负边距margin

关于负margin的原理,参见文章: http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 应用: http:/...
  • xyr05288
  • xyr05288
  • 2017年11月03日 19:22
  • 76
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css负边距
举报原因:
原因补充:

(最多只允许输入30个字)