之前在使用经常遇到下面的问题：html：1<div class="top">2<div class="one">I‘m the first!</div>3<div class="two">I‘m the second!</div>4</div>css： .one{width: 100px;height: 100px;background: red;margin-top:20px;}.two{width:100px;height:100px;background:blue;}.top{width:200px;height:300px;background:gray;} 显示结果：.one与.top之间并没有实现margin-top的效果，这个问题发生的原因是根据规范，一...
当最外面的层想要设置一个 overflow: hidden，但子元素又想他们能滚动，像今日头条的滚动导航一样：html：<div id="wrapper"><ul id="scroll"><li>cell 1</li><li>cell 2</li><li>cell 3</li><li>cell 4</li><li>cell 5</li><li>cell 6</li><li>cell 7</li><li>cell 8</li><li>cell 9</li><li>cell 10</li><li>cell 11</li><li>cell 12</li><li>cell 13</li><li>cell 14</li> </ul></div>css：#wrapper{width: 100%;height: 60px;...
<html> <body> <head><style>#menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */#menu ul{list-style-type:none;}#menu ul li{float:left;margin-right:10px;} /* float:left; 浮动横布局，让父元素高度变0px */</style> </head> <div id="menu"> <ul> <li><a href="#">C语言</a></li> <li><a href="#">Java语言</a></li> <li><a href="#">Javascript语言</a></l...
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 <!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/html; charset=utf-8"/><title>无标...
上一张 下一张 以上HTML定义一个父类相对定位，子元素绝对定位。 在ie下，元素zoomimglayer2 被 元素zoomimglayer 覆盖了。而在子元素zoomimglayer2上设置background样式才管用。求前端高手指点一下啊！ 上一张 ...
例子： ABC divA (黑色)设置了style.overflow = "hidden"，在 IE9及以下浏览器中导致了其中的 divB (灰色，style.position = "absolute")按照divA而非body定位。请看截图。 IE9下的截图： Chrome下的截图： 我想要的结果是Chrome下的，即divB按照body定位。可现在的情况是，实际项目中如果去掉divA的overflow属性，...
详细内容请点击 这个问题困惑了很久，虽然没有大碍早就摸出来怎么搞定它，但始终不明白原因出在哪里，如果只是IE有问题我也不会太在意，可问题是所有上等浏览器都表现如此，这样叫我怎能安心？今天总算下狠心查出来怎么回事，居然是CSS2.1盒模型规范……虽然很别扭，非常别扭的规定。 问题如下图，两层Div结构，Outer Div属性为“margin:0 auto”，本该紧贴外框顶部的，如果没有Inner Div，或者没有Inner Div的“margin-to...
为什么margin-top不是作用于父元素:至于margin-top属性的基本用法再简单不过，那就是设置一个对象的上外边距，看下面的代码实例: 蚂蚁部落 * { margin:0px; padding:0px; } div { width:100px; height:100px; background-color:green; margin-top:50px; } 以上代码可以将div的上边距设置为50px，一切运行良好，没有任何问题，再来看下一段代码: 蚂蚁部落 #parent { width:200px; height:...
声明：来自http://www.imooc.com/learn/9 学习 父元素高度确定的单行文本的竖直居中 是通过设置父元素的 height 和 line-height 高度一致来实现的。 .container{ height:100px; line-height:100px; background:#999;} 父元素高度确定的多行文本 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 ...
你可能碰到过这样的需求，一个高度不固定的区域（内容由用户创造），当鼠标经过该区域或者其神马操作时，需要出现一个与该区域一样大的模版； 我们用一个span来处理这个mask。由于 .sample-1 和 .sample-2 的高度是不确定的，也就是说我们没有对它们定义 height。如果父元素没有定义高度，子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度。 除了IE6，几乎所有的主流浏览器都支持子元素获取父元素（未定义高度）的...
super胡 .news { background-color: gray; border: solid 1px black;overflow:hidden;zoom:1;/*父元素设置overflow:hidden 通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1； Zoom的使用方法： zoom : normal | number normal : 默认值。使用对象的实际尺寸 number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值 用白话讲...
子元素设置margin-top，父元素也受影响 * { margin: 0px; padding: 0px; } .father { width: 500px; height: 800px; background: #ccc; cursor: pointer; /*第一种padding-top: 1px;常用*/ /*第二种border: 1px solid red(transparent);可用*/ /*第三种父元素设置overflow: hidden;*/ } .son { width: 450px; height: 600px; margin-top: 200px; }
CSS的经典问题二：如何解决所有子元素浮动以后，父元素高度为0的问题？ 1. 为父元素设置固高，副作用：如果子元素是动态数据，没法确定子元素高；2. 为父元素指定overflow:hidden；有副作用3. 为父元素添加后置内容生成选择器，无副作用。 .parent:after{ content: ; display:table; clear:both; } Bootstrap栅格布局系统 .container的宽度问题： 超大屏，屏宽>1200px（）：容器...
子元素的margin-top作用于外层父元素解决方法:有时候在设置子元素的margin-top属性的时候，本来是要作用于父元素，但是表现的结果却是父元素具有了margin-top效果，下面就通过代码实例介绍一下如何解决此问题。代码实例如下: 蚂蚁部落#box{ width:200px; height:200px; background:red; overflow:hidden;}#main{ width:50px; height:50px; background:blue; margin-top:50px;} 上面代码实...
假设我们有如下代码 会发现效果如下所示 子元素的margin-top并没有使子元素与父元素分开，反倒效果等同于给父元素加了一个margin-top； 解决的方法也有，具体为： 1.修改父元素的高度，增加padding-top样式模拟（padding-top:1px;） 2.为父元素添加overflow:hidden; 3.为父元素或者子元素生命元素浮动(float:left;可用但是不推荐) 4.为父元素添加border(border:1px solid transpar...