margin:负值也挺有用

Scliang 发布于2019-08-28 17:56 / 2940人阅读

摘要：中一些属性设置成负值可以得到不一样的效果。如负值成就了雪碧图。负值实现链接文字隐藏当然这个在未来不推荐使用了哈，有点影响读屏器首先定义一下。可以用负值来搞掂。那么中的属性就会给右侧多出一些空隙，这个时候弄一个负值会有神奇的效果。

css中一些属性设置成负值可以得到不一样的效果。

如：

background-position: 负值成就了 css sprite 雪碧图。

text-indent: 负值实现链接文字隐藏, 当然这个在未来不推荐使用了哈，有点影响读屏器

首先定义一下margin。
margin定义盒模型的外边距

margin的一些特性

first-child 的 margin-top 值会穿透给上一层

last-child 的 margin-bottom 会无效

同级间的 margin-top bottom 会合并.

当然一些IE低端浏览器可能会有不一样的表现 >///< 没仔细测过

使用负margin使icon同文字水平剧中

平常做一个icon 16x16需要跟文案的行文字水平剧中对齐，需要用到vertical-align: middle

当然这个时候要给icon配上display:inline-block，这样可以给icon设置宽高。
但是 vertical-align: middle 的时候icon下方会有4px的 baseline空隙，这个时候看起来会对不齐。具体可以看[vertical-align]的定义。

所以这个时候需要使用 margin 负值来调节上下偏移。

阻止浮动元素换行

这个我挺喜欢，有的时候因为浮动元素的宽度问题，导致不必要的换行。可以用margin 负值来搞掂。

flaoat:left; margin-right:-10px;

另外在ul>li 的结构中也可以用margin 负值来阻止换行，
比如你为了实现float的li间距，以及ul两侧的空隙相等，这个时候如果外围dom两侧本身有padding了。
那么li中的 margin-right 属性就会给右侧多出一些空隙，
这个时候 ul 弄一个 margin-right:负值会有神奇的效果。

混合云超融合服务器负值 margin: margins margin

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110906.html

布局中常见的居中问题

摘要：说到布局除了浮动以及定位外还有一个不得不提的点，那就是居中，居中问题我们在网页布局当中经常遇到，那么以下就是分为两部分来讲，一部分是传统的居中，另一种则是居中，每个部分又通过分为水平垂直居中来讲。参考参考学习布局视觉格式化模型居中详解说到布局除了浮动以及定位外还有一个不得不提的点，那就是居中，居中问题我们在网页布局当中经常遇到，那么以下就是分为两部分来讲，一部分是传统的居中，另一种则是fle...

1fe1se 2019-04-23 13:34 评论0 收藏0
不定元素宽高用css实现内容水平和垂直都居中

摘要：在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。表示这些元素将相对于本容器水平居中，也是同样的道理垂直居中。在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。而且我们希望不要涉及宽度和高度，也就是说，我们不...

Chao 2019-08-30 15:52 评论0 收藏0
实用的margin负值

摘要：下和右方的负值使该元素下方右方的元素被拉向该元素。这里引用怿飞博客由浅入深漫谈属性中参考线的概念。负值在实际当中的应用负值虽然不是常常被提起，但是在实际当中已经有相当广泛的应用。无论是在介绍前端知识的书籍还是谈论盒模型的文章，margin 都是最重要的属性之一，然而它的负值用法却极少被提到。其实 margin 负值是一个相当实用的属性，可以被应用于日常前端开发当中的不少场景。 mar...

yanwei 2019-08-28 18:02 评论0 收藏0
三栏布局的n种实现

摘要：本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。每一种布局都会有个，个人依然认为文章里帖代码并没有来的直接。其中讨论了这么多种种布局，有以下理由是每种布局也都有他的毛病，没有十全十美的，每种布局也都有人在用。本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。至于其他类型，基本上也就是半斤和八两。每一种布局都会有个Demo，个人依然认为文章里帖代码并没有Demo来的直接。...

aisuhua 2019-08-29 10:54 评论0 收藏0
css垂直水平居中解决方案

摘要：写在前面垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。我们把需要垂直水平居中的设置为。使用使块级元素垂直居中是很简单的。写在前面：垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。下面，我们来讲讲几个css中常用的垂直水平居中的解决方案方法1: 1、把外层的div的显示方式设置为table，即display: table...

taoszu 2019-08-29 14:18 评论0 收藏0