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最基础的也是最基本最重要的就是盒模型的概念 盒模型示意图: border和border以内部分是我们可以看到的“...

Html+CSS__margin 负值之美:负margin在页面布局中的应用

本文转载自:http://www.topcss.org/?p=94,有修改。   负数给人总是一种消极、否定、拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中...

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。...

css负边距

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

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。...
  • cnh42
  • cnh42
  • 2015年02月14日 16:08
  • 85

CSS图像替换:文本缩进,负边距以及更多方法

原文链接: https://www.sitepoint.com/css-image-replacement-text-indent-negative-margins-and-more/ CS...
  • ttwhy
  • ttwhy
  • 2016年07月18日 11:44
  • 464

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。...

css的负边距(margin负值)的绝招

http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html 本文介绍了css负边距在普通文档流中的作用和效果、左和右的c...

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

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

CSS布局奇淫巧计之-强大的负边距

css
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css负边距
举报原因:
原因补充:

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