HTML+CSS总结(一)

**表格的细线边框**

  table{ border-collapse:collapse; }

     collapse 单词是合并的意思。.

  border-collapse:collapse;

    表示相邻边框合并在一起。

**外边距实现盒子居中**

   可以让一个盒子实现水平居中,需要满足一下两个条件:

     1. 必须是块级元素。    

     2. 盒子必须指定了宽度(width)。

     3. 然后就给左右的外边距都设置为auto,就可使块级元素水平居中。

**文字盒子居中图片和背景区别**

  1. 文字水平居中是  text-align: center.

  2. 盒子水平居中  左右margin 改为 auto

 **外边距合并**

   1.相邻块元素垂直外边距的合并

    当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷).

  解决方案: 

    避免就好了。

 2.嵌套块元素垂直外边距的合并

      对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合。

    解决方案:

  1. 可以为父元素定义1像素的上边框或上内边距。

  2. 可以为父元素添加overflow:hidden。

**浮动**

  浮动的目的

     就是为了让多个块级元素同一行上显示。

  清除浮动目的

    为了解决父级元素因为子级浮动引起内部高度为0 的问题。

  清除浮动的方法:

    1.额外标签法:

      这是W3C推荐的写法,在浮动元素的最后添加一个空的标签<div  style=”clear:both”></div>标签也可。

                优点:通俗易懂,书写方便

                     缺点:添加许多无意义的标签,结构化较差。

          2.父元素添加overflow属性方法:

                给父元素添加overflow(overflo:hidden),可以实现清除浮动效果。

      优点:代码简洁。

      缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

    3.使用after伪元素清除浮动:

            使用方法:

               .clearfix:after {

        content:";

        display: block;

        height: 0;

        clear: both;

        visibility: hidden; 

      };

               .clearfix {*zoom: 1;}   /* IE6、7 专有 */

               优点:

       符合闭 合浮动思想  结构语义化正确。

      缺点:

       由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

               注意:使用第三种方法时注意兼容性问题。

            4.使用before和after双伪元素清除浮动:

             .clearfix:before,

     .clearfix:after {

                  content:"";

                  display:table;  /*这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */

            }

              .clearfix:after {

                   clear:both;

            }

              .clearfix {

                 *zoom:1;

            }

           优点:

    代码更简洁。

   缺点:

    由于IE6-7不支持:after,故使用 zoom:1触发 hasLayout。

猜你喜欢

转载自www.cnblogs.com/jibeizhifeng/p/11938522.html