一、外边距合并:

    上下两个外边距相遇时会合并在一起,取大值;

二、问题:

    外边距溢出:在父元素中,设置子元素的外边距时,有可能被识别为父元素的上外边距;

    解决:

    1、给父元素添加一个边框;

        缺点:对了边框像素;

    2、使用父元素的内边距实现同样效果

        缺点:多一条代码,且会影响父元素的大小(padding);

        也能使用box-sizing:border-box(边框盒子)能解决缺点;

      3、

             div:before{
                 content:"";
                 display:table;
             }

三、问题:

        浮动产生的父元素没有高度

    解决:

    1、手动设置父元素高度;

    2、通过overflow 撑起父元素的高度

            overflow:hidden;

       缺点:若父层元素包含需要溢出元素(overflow)时,不能使用;

    3、通过clear:both 解决

       在父元素内追加一个空的块级元素,并设置clear属性为both;

    4、

           div:after{
               content:"";
               display:block;
               clear:both;
           }

四、绝对定位的初始化位置:

    1、相对于最近的已定位的祖先元素来进行位置初始化;

        position属性为relative/absolute/fixed任意一种;

    2、如果元素没有已定位的祖先元素,那他的初始位置就相对于最初包含块body;

五、CSS Hack 

    1、CSS的内部Hack

        在样式属性名前加浏览器前缀或者在属性值后加浏览器后缀

             例:*background:blue;
             background-color:orange\9\0;

    2、选择器Hack

        在选择器前加浏览器识别前缀

             例:*+div{}  *div{} 等

    3、HTML头部引用Hack

        根据条件注释 判断浏览器类型,再决定做哪些操作

        条件注释:<!--[if 条件 IE版本]><![endif]-->

             例:<!-- 根据不同的浏览器, 引入不同的兼容性css代码文件 -->
                <!--[if IE 6]>
                    <link rel="stylesheet" href="http://www.mamicode.com/style_ie6.css" />
                <![endif]-->
                        
                <!--[if IE 8]>
                    <link rel="stylesheet" href="http://www.mamicode.com/style_ie8.css" />
                <![endif]-->

六、CSS优化 

    1、减少http请求次数

        css sprites:合并多个图像于一个;

        Images-maps;

    2、页面顶部引入CSS

        提高加载速度;逐步呈现;

    3、将CSS和JS放在外部文件中

        会由浏览器缓存,后续也会是用缓存;

    4、优化代码

        合并样式:提前定义统一样式;利用CSS继承

        缩小样式文件:使用简写;

        选择更优的样式属性值:如border:none;

        减少样式重写:使用Reset但并非全局Reset;

        代码压缩:使用工具压缩CSS代码

    5、不要在HTML中缩放图像

        图像在网络传输时仍然保持原来的图像的字节数;

     6、避免空的src和href;

css 笔记