为什么css的margin在css中的作用不起作用

margin-top怎么在360浏览器中不起作用呀【css吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:54,490贴子:
margin-top怎么在360浏览器中不起作用呀收藏
比如自上而下,三个div,id分别为top1,top2,top3,它们的宽是960px,高是35px,top1与top2,在css中设置top2的样式,margin-top为1px,3px,5px,在360浏览器中都能得到良好的控制,我把top3作为导航,但在top3中插入ul标签,在ul中插入li标签,在li中插入a标签,问题出现了,margin-top怎么也不能控制top3与top2的距离。大神们呀,你们遇到这种情况,怎么办
最吭的就是360了。各种版本。不过兼容IE7跟谷歌就好了。
对,一般谷歌行ff也差不多了
尽量用padding,margin少用
费了九牛二虎之力,终于搞定,加上总代码*{
border-top-width:0
border-right-width:0
border-bottom-width:0
border-left-width:0
一直没有用过360,chrome的忠实使用者!
360,搜狗兼容模式,傲游兼容模式,都是低版本ie内核,容易出现兼容问题
这实在不算问题。
你所说的问题是这样的吧,给你看图片上面又没人给解决,这个问题其实不是浏览器兼容问题,基础问题。
看到没,火狐谷歌等等浏览器都有这个问题,这其实不算问题,基础的东西。上面的人都看不懂别人说的什么意思啊。只要一个就可以解决了,因为ul和li本身就带有margin,margin会有塌陷,两个margin在一起,只会显示大的margin,很明显,你的那个5像素比ul本身的margin小,兼并掉了,然后显示的是ul的margin,你的办法是*{margin:0px,paidding:0}这就把所有的元素的margin都设置为0了,所以肯定可以显示成功,至于边框根本不需要,其实只需要一句就好了,ul,li{margin:0},这就是重置,你百度一下CSS重置。看我代码,我按照你的意思做了一个大概,不知道你是不是就是这样的意思。&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&无标题文档&/title&&style type="text/css"&ul,li{ margin:0}div{ width:960 height:35 margin:0}#top1{background-color:#096; margin-top:1}#top2{background-color:#496; margin-top:3}#top3{background-color:#f96; margin-top:5}li{ float: list-style:}&/style&&/head&&body&&div id="top1"&&/div&&div id="top2"&&/div&&div id="top3"&&ul&&li&&a&百度&/a&&/li&&li&&a&谷歌&/a&&/li&&li&&a&搜狐&/a&&/li&&/ul&&/div&&/body&&/html&
显示效果:
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。===========================================================---------------------------------------------------------------------------------------------------------------------------------Was mich nicht umbringt,macht mich mehr beschäftigt.
登录百度帐号赞助商推荐():
想学到点真东西?
如果你有1~3年前端开发经验,不妨
想高薪入职阿里?
想通过真实互联网项目成长自己?2添加评论分享收藏感谢收起赞同 21 条评论分享收藏感谢收起css margin属性深入解析
& 发布时间: 14:50:45 & 作者:佚名 &
本文将详细介绍css margin属性,需要了解其妙用的朋友可以参考下
margin在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。
一、margin的基本特性
margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area。属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距。
margin属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。
或许有朋友对非置换元素(non-replaced element)有点疑惑,稍微帮助大家理解一下。非置换元素,W3C中没有给出明确的定义,但我们从字面可以理解到,非置换元素对应着置换元素(replaced element),也就是说我们搞懂了置换元素的含义,就懂了非置换元素。置换元素,W3C中给出了定义:
引用:&An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet&
从定义中我们可以理解到,置换元素(replaced element)主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围的元素。进而可知,非置换元素(non-replaced element)就是除了img,input,textarea,select,object等置换元素以外的元素。
margin始终是透明的。
二、margin的基本写法
外边距的margin-width的值类型有:auto | length | percentage
percentage:百分比是由被应用box的containing block(注:一个元素的containing block是该元素产生的box(es)在计算位置和大小时参考的一个矩形,详细阅读可看:《Containing Block》)的大小所决定。对于margin-top和margin-bottom也同样成立。
margin的默认值为0,并且margin支持负值。
上面我们曾提到属性margin可以用来同时指定box的四边外边距。如果属性margin有四个值,那么值将按照上-右-下-左的顺序作用于四边,即从元素的上边开始,按照顺时针的顺序围绕元素。表达式如下:
margin:top right bottom left;
四个数值中间以空格分隔。效果等同于:
margin-top:margin-right:margin-bottom:margin-left:
并且规范还提供了省略的数值写法,基本原则如下:
引用:1.如果没有left值,则使用right代替;2.如果没有bottom值,则使用top代替;3.如果没有right值,则使用top值代替。
根据这些基本原则,我们可以有三种省略方式,但不管怎样省略margin的数值都会大于等于一个,而margin的默认数值是从top开始至left结束,那么对于省略的具体情况,我们可以从left反推理回去。
1.如果margin只有三个值,按照值的顺序为margin: 缺少了left,根据原则,则left的值有right来代替。
margin:10px 20px 30就等于margin:10px 20px 30px 20
2.如果margin只有两个值,按照值的顺序为margin: 缺少了bottom和left,根据原则left的值由right来代替,bottm的值由top来代替。
margin:10px 20就等于margin:10px 20px 10px 20
3.如果margin只有一个值,按照值的顺序为margin: 缺少了bottom、left和right,根据原则left的值由right来代替,bottom的值由top来代替,right的值右top来代替,也就是说left的值也由top来代替。
margin:10就等于margin:10px 10px 10px 10
三、margin的解析逻辑
目前我们已经了解到了margin的基本特性和基本写法,但对元素margin的基本解析逻辑还是很模糊,到底margin的top、right、bottom、left都是以什么为基准来促使box model形成。为了形象,易懂的对margin的逻辑进行说明,下面讲解的过程中,将引入W3C上没有的参考线的说法。何谓参考线?参考线就是margin移动的基准点,此基准点相对于box是静止的。而margin的数值,就是box相对于参考线的位移量。
在margin中top、right、bottom、left的参考线并不一致为一类,而是分为了两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类。那他们到底各以什么为参考线呢?top以containing block的content上边或者垂直上方相连元素margin的下边为参考线垂直向下位移;left以containing block的content左边或者水平左方相连元素margin的右边为参考线水平向右位移。right以元素本身的border右边为参考线水平向右位移;bottom以元素本身的border下边为参考线垂直向下位移。从上我们可以看到top和left都是以外元素为参考,而right和bottom以本元素为参考。上面的位移方向是指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-Type" content="text/ charset=utf-8" /& &title&无标题文档&/title& &style type="text/css"& div {width:200 height:200 background:#} &/style& &/head& &body& &div&外边距的margin-width的值类型有:auto | length | percentage&/div& &/body& &/html& 如上代码,很简单,为了方便我们看到效果,我们给div设置了宽度和高度以及背景色。
现在我们给div的样式加上margin属性,比如:代码如下: margin:-10px 20px -30px 40
这时候margin的解析逻辑是怎样的呢?首先我们要搞清div的和周边元素的关系,div没有相连元素,而此时div的containing block是body产生的block box。则根据上面介绍的参考线原理,div的左外边距以containing block的content左边为参考线,及此时以body的content左边为参考线进行水平向右位移,位移的大小为40px,同理,上边距以body的content上边为参考线进行垂直向上位移10px(负值和正值的方向相反),下边距依照现在div的borer下边(此时的div已经经过上边距位移过了)垂直向上位移30px(此时,margin不会改变box的border内的物理大小,但会改变box的逻辑大小,即:以此box的margin的下边为参考的元素,不是从box的物理位置开始的,而是从逻辑位置开始),右边距依照现在div的borer右边(此时的div已经经过左边距位移过了)水平向右位移20px。或许有朋友问你分析的顺序怎么和margin表达式中出现的顺序不一样?如果按照margin表达式中出现的顺序来分析,结果是一样的,只是为了更好的方便大家的理解而没有按照表达式的顺序来分析。
用margin最后的显示大小到底是怎么样的,或许有朋友也比较疑惑,我暂时用逻辑大小和物理大小来区分(其实上面已用到此概念),到底什么是逻辑大小,什么是物理大小呢?!具体可以看图,物理大小指的是除去margin,也就是包含border以内的box大小,而逻辑大小,则是box通过margin解析规则解析后得到的大小(这或许可以解释为什么IE5会错误解析盒模型),当逻辑大小小于物理大小时,则不会影响实际box的显示,也就是说,此时显示的是box的物理大小,而当逻辑大小大于物理大小时,则此时显示逻辑大小。这仅对元素本身有效,对于其他相关元素,他们则只以margin的逻辑大小为准则,进行布局。
居中显示时,使用css:#main {margin:0width:400} 此css在firefox下是好的,但是在ie下不起作用。于是开始搜索整理了一下,晒出来和大
大家感兴趣的内容
12345678910
最近更新的内容CSS 参考手册
CSS margin 属性
设置一个p元素的所有四个边距:
margin:2cm 4cm 3cm 4
属性定义及使用说明
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
margin:10px 5px 15px 20
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px
margin:10px 5px 15
上边距是 10px
右边距和左边距是 5px
下边距是 15px
margin:10px 5
上边距和下边距是 10px
右边距和左边距是 5px
所有四个边距都是 10px
注意: 负值是允许的。
JavaScript 语法:
object.style.margin="10px 5px"
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
浏览器计算外边距。
规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
规定基于父元素的宽度的百分比的外边距。
规定应该从父元素继承外边距。
感谢您的支持,我会继续努力的!
扫码打赏,你说多少就多少
记住登录状态
重复输入密码

我要回帖

更多关于 css clear 的文章

 

随机推荐