margin bottom 没有把下方元素抵下去

margin-bottom无效问题以及div里内容动态居中样式!

最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图: , 刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料发现: margin-bottom是下方的外边距,并不能让元素向下方移动,margin-top作为上边距,把元素“推”了下去. 如果希望图标距离下方30px,那么可以试试在ul上设置position: absolute,bottom: 30px,另外父元素也必须设置成position:relativ

深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性. 重叠 margin重叠又叫margin合并,发生这种情况有两个前提 1.只发生在block元素上(不包括float.absolute.inline-block元素) 2.只发生在垂直方向上(不考虑writing-mode) [相邻的兄弟元素] margin重叠效果展示: item1 和

margin叠加相邻两个元素的上下margin是叠加在一起

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#box{width:200px;height:200px;background:Red;border:10px solid #000; margin:30px 100px 100px}#div{width:200px;height:200px;back

子元素设定margin值会影响父元素

有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例如: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g

position:absolute和margin：auto 连用实现元素水平垂直居中

有时候,要实现一些元素水平垂直都居中,这部分元素呢可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left:0px; right: 0px; top:0px; bottom: 0px; 但他的父元素要设成相对定位 position: relative; 这样设置完成后会发现子元素并没有居中.这是因为虽然脱离了文档流但是top的bottom的值是相等的.根据优先级会自动向上对齐.同理左右也是如此. 这时

小程序movable-area置于顶层遮盖下方元素无法操作的解决方案

小程序项目中有个需求,右下角按钮可以在页面中随意拖动,此时查看文档找到了一个自带的标签可以实现此功能,代码如下 <movable-area> <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view> </movable-area> 但是使用之后有个问题, movable-area充满整个页面,置于所有元素顶层导致下方的

关于margin、padding 对内联元素的影响

内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响. 测试代码(在谷歌浏览器运行版本 49.0.2623.87 m,火狐效果同谷歌) <style type="text/css"> * { margin: 0; padding: 0; } body{ font-size: 12px; font-family: "微软雅黑&

关于vue项目去除margin和padding后设置元素width和height为100%后，出现滚动条问题（移动端）

bug点,这个页面设置100%(100vw和100vh).页面出现抖动. 经过一番检察,原因出现在,vue项目自动添加的一个div上.就是body里的最后一个.如果选中这个元素,右键删除它.页面就不会抖动了. 说不定,这个元素还有什么用,所以不考虑有js删除.后来想到把他设置成position为fixed.让他脱离文本流. 一看最外层的div没有class和id不好选中.但是发现子元素有,所以我们把子元素都设置成fixed就行了. 只要在你的重置样式里,加上这段css就可以了. #trans-

理解css margin

前提是对display:block元素 1 margin对没有width属性的元素,能影响其宽度,对于有width的则不起作用: 高度方面不受影响此特性可用来排版 2 margin 与百分比普通的没有带absolute fixed 的元素 ,无论横竖百分比,都相对横向数值但是带有absolute,fixed 的,则相对第一个有相对定位的百分数值 3 margin 重叠问题 margin-top 重叠的条件元素条件:1)父元素与第一个子元素或者最后一个元素 2)相邻的兄弟元素 3) 空的

网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件,img文件这几个部分css文件,全名叫成叠样式表稍后会说说,js呢,这个文章暂时先不说现在说说网页静态网页htm,html 最早的静态网页文本,目前也常见非静态网页 asp 微软的动态网页文件php php的文档格式,参看www.php.net,常用,比asp流行jsp sun公司的动态网页文本,

行内元素的上下margin 和 img元素的上下margin

行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置其实这4个属性是可以设置的,但是不建议设置. 如以下代码所示,给行内元素a设置 margin-top:20px;margin-right:20px; 样式中简写为margin:20px 20px 0 0; padding-top:5p

css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性: 和相邻的内联元素在同一行; 宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是paddin

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度

CSS外边距margin上下元素重叠

CSS外边距margin上下元素重叠转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终的mar

margin和padding对行内元素的影响

这个是在面试的时候,面试官问我的一个小问题自己没有考虑过inline元素设置margin和padding的问题学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) 比如你对一个a标签设置它的高度是没有效果的 2)HTML元素分为替换元素和非替换元素替换元素指的是作为其他的元素占位符的一个元素例如img 非替换元素指内容包含在文档中的元素 <p>hahaha</p>这个p就是一个非替换元素区分替换与非替换的方法:替换元素浏览器会根据标

HTML中行内元素的竖直方向的padding和margin是否真的无效

参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的? 接下来就这个问题将具体分析: 1.行内元素拥有盒子模型么答案是是的.没错,行内元素跟块级元素一样,同样拥有盒子模型. 2.行内元素的padding-top,padding-bottom和margin-top,margin-bottom是否无效答案同样是是的.盒子

IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

标准参考根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margin-right' , 'margin-bottom' 及 'margin-left' )只设置它们代表的那一边的边距. 边距属性的取值可以是下面值之一: <length> 指定一个固定的宽度. <percentage> 百分比的计算基于生成的框的包含块的宽度. auto 其表现细节请参

RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

标准参考根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margin-right' , 'margin-bottom' 及 'margin-left' )只设置它们代表的那一边的边距. 边距属性的取值可以是下面值之一: <length> 指定一个固定的宽度. <percentage> 百分比的计算基于生成的框的包含块的宽度. auto 其表现细节请参

行内元素的padding和margin是否有效

行内元素的纵向padding和margin都是不考虑的,这是css规范定义的.inline元素确实可以设置垂直方向的padding和margin值,但是inline元素的margin和padding的垂直方向上不产生边距效果,即不影响布局. 1.首先行内元素是否具有盒子模型?答:行内元素同样具有盒子模型. 2.行内元素的padding.margin是否无效?答: 行内元素的padding-top.padding-bottom.margin-top.margin-bottom属性设置是无效的: 行

dojo/dom-geometry元素大小

在进入源码分析前,我们先来点基础知识.下面这张图画的是元素的盒式模型,这个没有兼容性问题,有问题的是元素的宽高怎么算.以宽度为例,ff中元素宽度=content宽度,而在ie中元素宽度=content宽度+border宽度+padding宽度.IE8中加入了box-sizzing,该css属性有两个值:border-box.content-box分别对应ie和ff中元素宽度的工作方式. 偏移量:offsetLeft.offsetTop.offsetWidth.offsetHeight off

margin bottom 没有把下方元素抵下去

热门专题