css禅意花园笔记-097

一。img下面会出现多余的空白 当图片与div相接时，相接地方会出现空白。【转】

     

1、将图片转换为块级对象

即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。

3、设置父对象的文字大小为0px

即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。

5、设置图片的浮动属性

即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

6、取消图片标签和其父对象的最后一个结束标签之间的空格

这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显示，这必然会让标签和其他标签换行显示，比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况，具体解决方案的还得各位见招拆招了。

 

要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念：

可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。

对比一下 vertical-align 的另外两个常见值，top 和 bottom:

可以看到，baseline 和 bottom 之间有一定的距离。实际上，inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字，只要是 inline 的图片这段空白都会存在。

到这里就比较明显了，要去掉这段空白，最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话，那应该是用 bottom 或是 middle 比较好。

另外，top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

 

二。清除浮动float的三种方法总结【转】https://my.oschina.net/leipeng/blog/221125

 

现象：

html：<div class="outer">

           <div class="div1">1</div>

           <div class="div2">2</div>

           <div class="div3">3</div> 

         </div>

css：.outer{border: 1px solid #ccc;

                  background: #fc9;

                  color: #fff; 

                  margin: 50px auto;

                  padding: 50px;

}

         .div1{width: 80px;

                 height: 80px;

                 background: red;

                 float: left;

}

 .div2{width: 80px;

         height: 80px;

         background: blue;

         float: left;

} 

.div3{width: 80px;

         height: 80px;

         background: sienna;

         float: left;

}

   这里我没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：

    （1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示（不明白）

     （我的理解） 就是没有高度，只有padding，border

 

清楚css浮动：

       方法一：添加新的元素 、应用 clear：both

html：<div class="outer">

           <div class="div1">1</div>

           <div class="div2">2</div>

           <div class="div3">3</div>

           <div class="clear"></div>

        </div>

css：.clear{clear:both;

                  height: 0;

                  line-height: 0;

                  font-size: 0

}

  内容会被浮动撑开

 

       方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的  div.outer）

      原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好

 

       方法三： 据说是最高大上的方法  :after 方法：（注意：作用于浮动元素的父亲）

     利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。

     .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

     其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动

 

 

 下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。