CSS中margin边界叠加问题及解决方案(转)

边界叠加简介边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: ◆元素的顶边界与前面元素的底边界发生叠加当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: ◆元素的顶边界与父元素的顶边界发生叠加尽管初看上去有点儿奇…

CSS中margin边界叠加问题及解决方案

你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析边界叠加简介边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: ◆元素的顶边界与前…

CSS中margin和padding的区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10…

CSS中margin属性

css中margin块级元素的垂直相邻外边距会合并,比如方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并…

css margin边界叠加问题详谈

问题:给子元素一个margin-top值,其父元素会跟着往下走margin-top的值一.代码展示 HTML <body> <div class="box"> <div class="content" id="content"></div> </div> </body> CSS div,body{ padding:; margin:; } body{ background-…

css中margin:0 auto没作用

很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思.下面我就列举集中居中没作用的情况: 1:没有设置宽度.margin:0 auto居中是要设置宽度滴. 2:没声明DOCTYPE:DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本.要建立符合标准的网页,…

使用CSS中margin和padding的基础和注意事项

在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备以后使用. 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin.padding和Border.. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会…

CSS中margin与padding的区别

CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象.补白(padding):补白位于元素框的边界与内容区之间.很自然,用于影响这个…

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

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

css中margin上下外边距重叠问题

css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin,一个有下外边距margin,这个问题变得有点复杂.我们来看看. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr…

css中margin为负数的深入研究

注:以下实验的元素均为块级元素,inline-block和inline本身对margin某些方向上都是无效的,所以这里不予讨论. margin-left或者margin-right为负数当块元素width:auto时,margin-left和margin-right会增加元素的宽度当有具体width时,margin-left向左移动, margin-right 减少css的读取宽度如下图 (也就是后面的元素会挤进来) margin-top或者margin-bottom为负数时高度一般都自…

WEB学习-CSS中Margin塌陷

margin的塌陷现象标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; margin的值可以为auto,表示自动.当left.right两个方向,都是auto的时候,盒子居中了: margin-left: auto; margin-right: auto; 简写为 margin: auto; 表示上下,auto表示左右注意: 1) 使用margin:0 auto; 的盒子,必…

CSS中margin：auto什么意思？margin：auto属性的用法详解

我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto如果它适用于垂直居中,那么又是一种什么情况,下面我们来看具体内容. 首先auto是做什么的? 定义auto元素,因元素类型和上下文而异.在边距中,auto可以表示两种情况:占用可用空间或0 px.这两个将为元素定义不同的布局. "自动"占用可用空间这是我们利用auto最常见的用法.通过分…

CSS中margin: 0 auto；样式没有生效

问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? 解决:margin:0 auto:生效,需要一定的前提条件. 1 两者是块元素,即 display: block; 2 父元素需要有宽度,即 width: x px: 3 在有前两者的前提下,设置 margin: 0 auto:即可实现居中. 小结:问题出现的原因是,没有给A元素设置宽度.给A元素…

css中margin的应用

1.margin用于设置外边距,没有继承性,父元素设置的margin属性子元素不会继承. 2.margin存在重叠的问题. 水平边距永远不会发生重叠. 垂直边距在特定情况下会重叠. 重叠问题都很容易解决.但最重要的是避免这个问题,尽量只在同一个方向上设置边距.当然,也可以利用边距重叠的特性来进行布局.…

CSS中margin和position:relative的定位问题

一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bb{ background: burlywood; height: 50px; margin-left: 100px; width: 100%;…

CSS中设置height:100%无效的解决方案

在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的效果.其实问题在于该元素的父级元素,当父级元素没有设置高度时,子元素的该属性并不会出现效果.所以,当要设置height:100%这个属性时,该元素的所有嵌套的父元素都必须设置高度,或者height:100%属性.…

网页CSS中*{margin:0; padding:0;}有什么用

* 这东西叫“通配符”用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或padding值的,加上这句就可以删除浏览器这些默认值,方面后面的设置.(注:不是没它不行,只是方便而已) 你加上面那句后页面乱,那是当然的,因为你没加时是基于有默认的margin或padding 进行设置的,去掉了默认值,就当然会乱了.咋办?一,就是不加*{margin:0; padding:0;}…

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> &…

CSS中的margin和padding的用法和区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10px; 四边统一内边距 (6)padding:10px 20px; 上下.左右内边距 (7)padding:10px 20px 30px; 上.左右.下内边距 (…

xaml与CSS中的Margin顺序不同

XAML中 Margin:左上右下 CSS中 Margin:上右下左…

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow…