margin负值为什么可以居中

2024-08-28

利用负margin实现元素居中

原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父元素的中心. 负margin特性:负的margin-top,margin-left将当前元素往上/左拉,覆盖其他元素; 负的margin-bottom,margin-right将当前元素的后续元素往上/左拉,覆盖当前元素; 例如: <!DOCTYPE html> <htm> <h

深入理解CSS中的margin负值

前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单,实际上却蛮复杂,本文就margin负值作详细介绍和梳理 [注意]关于margin部分的基础知识移步至此表现虽然margin可以应用到所有元素,但display属性不同时,表现也不同 [1]block元素可以使用四个方向的margin值 [2]inline元素使用上下方向的margin值无效 [

几个常见的布局的多种实现方式及margin负值总结

第一部分:几个常见的布局实现方式一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div class="box"> <div class="center"></div> <div class="left"></div> <div class="right"&g

CSS margin负值学习及实际应用

前言 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它. 表现虽然margin可以应用到所有元素,但display属性不同时,表现也不同 [1]block元素可以使用四个方向的margin值 [2]inline元素使用上下方向的margin值无效 [3]inline-block使用上下方向的margin负值看上去无效 [注意]inline-block使用上下方向的m

绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位后margin: 0 auto;居中失效的解决方法</title> <style type=&q

margin负值的几种妙用

1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 100px; height: 100px; } 2: margin-top: -1px解决border多一像素的问题 3,圣杯布局(两边固定,中间自适应)

IE下div使用margin:0px auto不居中的原因

IE下div使用margin:0px auto不居中的原因一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:<div id="cnbruce">margin: 0 auto 看看内容居中否</div>如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明文本居中,即[ Copy ] [ Run ] [ Save

微吧里的各种margin负值

直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化.公用和皮肤元素处理外,还有很多可总结的东西,例如:1.字符图标:整站大部分纯色的功能性的图标都是用字符实现的,节省了图片字节,利于修改和换肤.2.feed的改造和扩展:基础feed.图片带打开收起功能.扩展了视频音乐富文本功能.又扩展成带时间轴和PK模式的feed,代码清晰可扩展性强.3.各种ma

margin负值 – 一个秘密武器

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道 margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作.所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1px隐藏掉第一个列表项的边框,父元素设置 overflow:hidden 来隐藏溢出部分,这样完美达到首尾无分割线

margin负值的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

理解margin负值

效果上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移下和右方的margin负值会缩小下和右方的空间,使处于该元素下,右方的元素被拉向该元素,使之后的元素发生向上,左移,以至于与之重叠原理由于margin在上下左右的解析逻辑不同,引入参考线概念 margin 上方负值以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线 margin 左方负值以

margin负值的相关应用

1.页面上实现css sprite背景定位效果其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的,而差别就在于background-position会自动让区域外的图片部分不显示,所以我们要做的很简单,就是给margin定位的父标签给它定个高宽,然后overflow:hidden让高度宽度之外的区域不显示就行了. 2.在流动性布局中的应用流动性布局又称自适应布局,也称为宽度不固定布局.比如Wo

初探Margin负值(转)

相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negative values for margin properties are allowed…”; margin负值并非hack,正因为不熟悉所以有时候会避而远之,甚至误解; margin负值遵循文档流:假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移. 良好兼容,甚至是ie6也能

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值升级双飞翼布局一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100px; padding: 10px; border: 5px solid red; margin: 20px; } .content-size{ box-sizing: content-box; } .border-size{ box-sizing: border-box; } context-siz

左侧固定，右侧自适应的布局方式理解margin负值理论

一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; background-color: red; } .content{ margin-left: 200px; background-color: blue; } <div class="aside"> Lorem ipsum dolor sit amet, consectetur adip

IE8 margin:0 auto 不能居中显示的问题

ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了,检查了好几遍,没问题,然后用火狐和谷歌浏览器测试,居中了... 看来是浏览器兼容性的问题,突然想起现在用了win7,ie已经升级到了ie8,看来问题就处在ie8的兼容性上.百度之.... 特将解决方法复制到下面: IE6,7,Firefox下实现居中一般用:margin: auto 来实现,但在I

通过margin负值去除padding

.pay-type { // 图片布局前通过margin负值去除padding margin: 0 -@page-padding-horizontal; display: inline-flex; } <style lang="less"> @import "../style/weui.wxss"; @wx-width: 750rpx; @wx-width-one_unit: @wx-width/750; @color-main_red: #F00;

[转] margin负值的探讨

原文: margin负值-权威指南 [http://www.csswang.com/exp/cssexp/3863.html] static元素是没有设定成浮动的元素,下图说明了负margin对static元素的作用. 1. 当static元素的margin-top/margin-left被赋予负值,元素将被拉进指定的方向. /* 元素向上移动10px */ #mydiv1 { margin-top: -10px; } 2. 但如果你设置margin-bottom/right为负数,元素并不会

margin负值5种应用

最近做的项目中经常会用到margin的负值,这里就总结一下关于margin负值的5种使用及相关bug的解决. 1. 在流动性布局中的应用如WordPress的两栏式不固定布局就是使用margin负值来实现的定位,属于左右margin负值在流动性布局中的应用. <div style="width:200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;"> 左侧宽度固定 </div>

CSS中margin负值巧布局

margin负值实现细边框我们先准备五个div盒子,并设置好浮动和2px的实线黑色边框,看看效果中间的边框线挨在了一起致使边框变粗成了4px,这时使用margin负值就可以解决这个问题 <style> * { margin: 0; padding: 0; } div { float: left; width: 150px; height: 300px; border: #000 solid 2px; } .fu { margin-left: -2px; } </style> &

margin:0 auto;不居中

margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题! 2.没声明DOCTYPE①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本.要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分! ②看看下面的代码

margin负值为什么可以居中

热门专题