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;后 点击搜索选择框...
A B C div { border: 1px solid red; } span { border: 1px solid red; } 上述结构中，span与span之间显示时候居然有5px的间隙，强制设置span的margin:0无效，请教下，span与span之间5px的间隙这个是什么情况？IE7/8/9和firefox中都有 回复讨论(解决方案) 你不考虑标记间的空格吗？ 他们不是也占位吗？ 那是空格 Insert title here ...
@charset "utf-8";/* CSS Document */*{ margin:0px;\ padding:0px;}body{ background-image: url(../images/bg.jpg); background-repeat:repeat-x; height:1000px; }body>div{ width:900px;}#wrap{ margin:0 auto;}#header{ height:80px; background:#fff;}#hl{ width:550px; height:80px; background:#fff; background-image: url(../images/logo.jpg); background-repeat: no-repeat; float:left; }#hr{ float:right; font-size...
预约 主页 账单 消息 评价 /*首页网格*/.nav-grid {margin:0px;padding:0px;width:100%;list-style: none;display: inline;font-size: 0px;}.nav-grid li {width:45%;padding-bottom:35%;font-size: 15px;position: relative;margin:4% 2% 4% 3%;background-color: #fff;}.nav-grid li a{position: absolute;display: inline-block;height: 100%;width: 100%;text-align: center;vertical-align: middle;}.nav-grid li.col2-top{m...
就是子导航标题上面那点 标题 标题 标题 标题 标题 标题 标题 标题 标题 标题 标题 ...