body在默认情况下是具有margin外边距的:这里只是陈述一个事实，那就是body具有外边距在默认情况下。代码实例如下: 蚂蚁部落 body{ background:blue;}#box{ width:200px; height:100px; background:red; text-align:center; line-height:100px;}蚂蚁部落 从上面的代码可以看出，box元素与外围有一定的空隙，再来看一段代码实例: 蚂蚁部落 body{ background:blue; margin:0px;}#box{ width:...
绝对定位对margin外边距的影响:关于什么是绝对定位和外边距这里就不多介绍了，具体可以参阅以下两篇文章。（1）.绝对定位可以参阅CSS的绝对定位一章节。（2）.外边距可以参阅CSS的外边距一章节。下面就通过代码实例介绍一下绝对定位对于margin外边距的影响。代码实例如下: 蚂蚁部落 *{ margin:0px; padding:0px;}#box{ width:200px; height:100px; background:red; margin-left:50px;}#antzone{ width:100px; ...
css的负margin外边距功能简单介绍:关于margin外边距可能绝对多数朋友都不陌生，它的功能就是设置元素的外边距。代码如下: div{ width:100px; height:100px; margin:10px 5px 15px 20px;} 更多基础应用可以参阅CSS的margin属性一章节。但是与负外边距的很多功能许多人并不是太了解，下面就通过代码实例做一下简单介绍。一.对于普通文档流的影响:关于文档流的基本概念可以参阅什么是文档流一章节。也就是说处于...
在一个div中，margin-top:0px;margin-bottom:0px;不能同时满足，将出现什么情况？ div{margin-top:0px;margin-bottom:0px;} 如果满足 margin-top:0px;就不能满足 margin-bottom:0px; 如果满足 margin-bottom:0px;就不能满足 margin-top:0px; 如何处理？ 哪个写在后面，就以后面的为准吗？ 回复讨论(解决方案) 其实是满足了的 margin的意思是外边距 你可能把ma...
div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom 是百分比时是按照当前元素的父级元素的宽度来计算的 1. 当div的宽度是百分比时 html代码 无标题html,body{margin:0;padding:0;height:100%;}.row{width:100%;}.row:before , .row:after{display: block;content:'';height: 0;clear:both;}.col-md-4{float: left;width:33.33%;}.blue-bg{padding-top: 33.33%;back...
× 目录 [1]表现 [2]重叠 [3]浮动 [4]定位 [5]应用 前面的话 margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能，很多特殊的布局方法都依赖于它。它看似简单，实际上却蛮复杂，本文就margin负值作详细介绍和梳理 [注意]关于margin部分的基础知识移步至此 表现 虽然margin可以应...
一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！ 也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？ 1、高度自适应占位 假设有这么个场景： 如上图所示，有这么一种用来放图片的容器，图片都是正方形（为了...
关于什么元素的分类可以看我这篇文章 CSS:关于元素高度与宽度的讨论 系列文章（二） 行内级元素 Inline，非置换元素:如果margin值为auto，则 margin-left和 margin-right的计算值也就为0 Inline,置换元素:同上 Inline-block,置换元素在文档流中:同上 Inline-block,非置换元素在文档流中:同上 块级元素 块级非置换元素，在文档流中 margin-left + border-left-width + padding-l...
参考资料：Inline elements and padding 今天写一个导航栏时遇到了一个问题：行内元素的padding-top，padding-bottom和margin-top,margin-bottom是不是真的是无效的？ 接下来就这个问题将具体分析： 1.行内元素拥有盒子模型么 答案是是的。没错，行内元素跟块级元素一样，同样拥有盒子模型。 2.行内元素的padding-top，padding-bottom和margin-top,margin-bottom是否无效 答案同样是是的。盒子模型的width，...
继续上一次的学习,这次又发现了margin的第二个bug.既当同时对两个相邻的div盒子设置margin时,他们之间的间隙不能正常显示. 具体表述为:先建立两个div1和div2 div2设置成margin-top,div1设置margin-bottom,代码如下: .div1{ width: 200px;height: 200px; background: green; margin-bottom: 50px; } .div2{ width: 200px;height: 200px; background: blue; margin-top: 80px; }...
IE6右浮动 margin-right无效 浏览器兼容 css兼容性 网页内容 牢不可破的九宫格布局（http://www.cnblogs.com/binyong） *{margin:0;padding:0;font-size:12px;} body{text-align:center;color:#fff;}/*ie5.5不支持margin的居中对齐*/ /*总容器*/ .box{overflow:hidden;width:100%;margin:0 auto 0;background:#fff;} .box span{display:block;} /*顶部样式*/ .top{height:61px;padding:0 10px...
本帖最后由 Jasmine_xiaocao 于 2013-01-25 09:57:12 编辑 左右结构-float #header,#container,#footer{width:800px; } #header {background: #F00;} #container .left{height:500px;width:450px;background: #0F0;float:left;} #container .right {height:400px;background: #0FF;width:300px; float:right;} #footer {background:#00F;clear:both;} 头部 ...
本帖最后由 phf0313 于 2011-10-21 12:27:24 编辑 .qiandao { width:210px; height:267px; background:url(http://192.168.1.3/image/my_qd_bg.jpg) no-repeat;}.qd_circle { border:1px solid #d0ccc3; width:196px; height:35px; margin-top:6px; margin-left:5px; } qd_circle用了margin-top,但是qiandao也被撑下来了，求解？ 回复讨论(解决方案) 恩 如果 父标签有边框...
.div_sup{ display: inline-block; height: 40px; margin: 20px auto 10px; width: 100%; } 这个样式在火狐下能显示正常，在360浏览器上（IE6内核）却没有margin的效果。 如何处理？ 回复讨论(解决方案) 测试了，火狐跟ie6的效果一样！ 我这边是这样，在火狐上能正常起到间距的效果， 而在360浏览器下却是DIV和DIV之间紧贴着，也就是说没有起到间距margin的效果。 光看这段没问题，楼主把代码...
123 $number{$i}{$i}#$cat[name] {lang search_this_forum} {lang article} {lang thread} {lang blog} {lang album} $_G[setting][navs][3][navname] {lang users} .layout {margin:0 auto;width:960px;} 给layout设置了自动居中margin:0 auto;后 点击搜索选择框...