含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto,则平分剩余空间 <style> .father { width: 300px; background-color: #f0f3f9; } .son { width: 200px; height: 120px; margin-right: 80px; margin-left: auto; back

在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块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

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

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

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

你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. 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; 的盒子,必

问题:有两个元素: 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元素

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

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

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

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

一.代码 <!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%;

width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加而增加,随着浏览器的宽度而换行 width:auto和width:100%的区别: 一.width:auto 1.块级元素默认的宽度值,意味着浏览器会自己选择一个合适的宽度值. 2.内容的宽度='margin-left' + 'border-left-width' + 'padding-left'

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-auto</title> <style> .main { width: 600px; margin: 0 auto; border: 1px solid red; } </style> </head> <

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

height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已height:663px是高度就不用讲了,每个浏览器都支持,按照这个写法,ie6会执行height:663px;其他浏览器都执行height:auto !important,包括ie7 ie8min-height:663px;!important;就是最小高度值,但目前用这个代码还没看到效果过,而且使用比

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

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