1 宽度自适应 width

        – 在网页布局中 如果块级元素设置width:100%或者是不写的时候，会沾满浏览器的全屏(通栏效果)

        – 块级元素不设置宽度会与父级等宽(html,body块级元素)

        – 重点:当元素没有设置宽度的时候 元素脱离文档流 宽度由内容决定

            => 设置浮动和绝对/固定定位的时候 元素必定要加宽高大小!!!

2 高度自适应 height

        – 不设置高度或者高度设置为auto 当前盒子就没有高度不显示 高度由内容决定的

        – 常见的宽高自适应的情况   

            – 全屏案例、移动端 html,body{height:100%}

            – 图片 img{width:100%;height:100%}

        – 在工作中常用的方法: 高度设置为Auto的时候可以实现高度自适应

3 最小高度

                – 可以保持一个固定高度

                – 内容较多 会自动撑开高度 效果和height:auto效果一样

        例：评论区的需求

        – 内容没有的时候 保持一个固定的高度

        – 内容较多的时候 会根据内容撑开 => 最小高度属性 min-height

4 宽高自适应的bug

    高度塌陷/高度坍塌

        – 父级没有设置高度 => 做到自适应

        – 子级含有浮动属性 => 需求

    万能解决法/万能清除法(不要求理解,只要求会用)

        – 要给父级盒子添加一个类名 clear-fix(前端中不成文的规定)

        – clear-fix::after{

            content: ;

            width:100%;

            height:0;

            display:block;

            overflow:hidden;

            visibility:hidden;

            clear:both;

        }

    – 清除浮动 right、left、both 所有两边

5 伪对象选择器

    伪对象/伪元素

        – 选择器::after{content: } 在xx之后

        – 选择器::before{content: } 在xx之前

    – cp

    – 开端 司机+锅姨 = 司锅姨

    伪对象和伪类选择器

        – 伪类是一个冒号 伪对象在css2中也是一个冒号 在css3中为了区分两者之间的区别 提议写成两个冒号

6 BFC

        BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

        1.布局原则

        1、内部的Box会在垂直方向，一个接一个地放置。

        2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）

        3、每个元素的margin box的左边， 与包含块border box的左边相接触

        4、BFC的区域不会与float box重叠。

        5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

        6、计算BFC的高度时，浮动元素也参与计算

        2.哪些元素或属性能触发BFC

        1、根元素(html)

        2、float属性不为none

        3、position为absolute或fixed

        4、overflow不为visible

        3.BFC的应用

        1、自适应两栏布局（两栏布局:左侧固定不变 右侧跟随浏览器变化）

        2、清除内部浮动 – 高度塌陷

        3、防止margin上下重叠 – 常见的margin bug

7 图片整合

        把网站里面的小图标有规则的整合在一起，利用 background-position 改变背景图的位置，每个图标应用。

        1.优点

        （1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要缘由；

        （2）CSS Sprites能减少图片的字节；

        （3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

        （4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

        2.缺点

        （1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

        （2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

        （3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的准确位置。

        （4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

        3.图片整合原则

            （1）边切图边整合。

            （2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。

            （3）将小图标预留足够的空间，由于使用这些图标元素一般会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出目前本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。

            （4）单张整合好的sprite图片在100KB以内。

            （5）按分类整合图片。

            （6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。

            （7）整合好的图片必须是背景透明的图片png或者gif