-
妈蛋搞了两个小时，还以为出bug了！T T
nav左部分独占一行的原因 ：
上面logo_left的img将logo_left的高度多撑开了4px，使得下面nav_left不能正确float：left。
至于为什么img会多撑开几个像素的空白：
img作为内联元素，会和文字一样具有行高和字号属性，默认对齐baseline.通过截图可以看到，nav部分实际高是83px>80px，溢出了。
解决方案有： 以下四种（根据情况任选其一）：
1、.logo加上overflow:hidden;
2、.logo_left img 设置display:block;
3、.logo_left img 设置vertical-align:middle/bottom/top 都可以；*
4、.logo_left 设置 font-size:0; *
*vertical-align：top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。
作者：尤雨溪
链接：https://www.zhihu.com/question/21558138/answer/18615056
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。查看全部 -
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> /*在此定义相应的类选择器，并根据要求设置相关CSS属性*/ .mainBox{ width:960px; background:#cff; } .mainBox:after{ content:''; display:table; clear:both; height:0; overflow:hidden; } .leftBox{ height:300px; width:740px; background:#c9f; float:left; margin-right:10px; } .rightBox{ width:210px; height:300px; background:#fcf; float:left; } </style> </head> <body> <!--在此添加相应的div标签--> <div class='mainBox'> <div class='leftBox'></div> <div class='rightBox'></div> </div> </body> </html>查看全部 -
答辩
查看全部 -
onmyfocus:焦点图的‘轮子’
查看全部 -
盒子里面的文字垂直居中：把行高设置为和盒子一样
查看全部 -
a是内敛元素，li是块级元素
查看全部 -
块级元素都会在新行创建
查看全部 -
浮动脱离了普通的文档流，可能造成盒子的覆盖
查看全部 -
样式覆盖：后面的样式会覆盖前面的
查看全部 -
无序列表能嵌套的情况下，不选择并列
查看全部 -
图片浮动，文字会自动跟随其后
查看全部 -
padding效果对背景图片无效
查看全部 -
清浮动：
1 .mainbox{overflow:hidden;}
2 .mainbox{height:300px}
3 .mainbox .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
4 .clear{clear:both;height:0;}查看全部 -
清浮动：
1.在浮动元素后加个div设置clear: both; height:0,overflow:hidden
2.使用clearfix;
3.设置父元素浮动;
浮动会让元素塌陷，塌陷具有零高度的意思应该是：没有height值，子元素又是浮起来的，那么后面再来个div2的话就会占用div1的位置，div1浮动的子元素会飘在div2上面。
消除这种影响，有以上三种方法，
1.设置个height为0的div,这样等于阻止了div2去占用div1的位置。
2.为div设置一个class="clearfix"的类，然后统一对.clearfix进行样式设置，这样做的好处是，你需要时就为它添加一个class="clearfix"。
3.设置父元素浮动;
查看全部 -
总结：常用的清除浮动的方法。
1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外 为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的 是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合 适。
2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；
3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
此三种方法各有利弊，使用时应择优选择，个人习惯于第一种，比较稳定可靠。
参考链接：http://www.cnblogs.com/fengzheng126/archive/2012/05/19/2508778.html
查看全部
举报