第六章

1. text-shadow:

    文字的阴影

    x y blur(模糊值) color

 

    注：阴影的默认颜色是跟文字样色相同

    注：通过逗号的方式进行分割，可以设置多阴影

 

2. box-shadow：

       x

       y

       blur

       spread（阴影范围）

       color

       inset（内阴影）

 

       多阴影

 

    注：盒子阴影的默认样色是黑色。

    注：默认就是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影。

 

3. mask 遮罩

 

    url

       repeat

       x

       y

       w

       h

       多遮罩

 

    注：mask目前还没有标准化，所以需要添加浏览器前缀-webkit-mask:

 

    注：默认是x、y都平铺。

 

4. box-reflect 倒影？

       above   上

       below   下

       left    左

       right   右

       距离

       遮罩 | 渐变

 

    渐变：只是针对透明度的渐变，不能支持颜色的渐变。

 

    注：使用transform：scale（-1）负值也可实现反转效果，简单快捷兼容性好

5.   blur模糊值

           filter : blur()

 

6. calc计算

        四则运算

 

7. 分栏布局

 

      column-count : 分栏的个数

      column-width : 分栏的宽度

      column-gap : 分栏的间距  

      column-rule : 分栏的边线

      column-span : 合并分栏

 

    注：column-width和column-count不要一起去设置。

 

8. 伪元素：

        伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM标签元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

        :: selection

        :: first-line   /    first-letter

        :: before     /     after

        …   

 

    伪类：

    伪类本质上是为了弥补常规CSS选择器的不足，以便获取更多信息。

    通常表示获取不存在与DOM树中的信息，或获取不能被常规css选择器获取的信息

    ：hover

    :focus

    :empty

    ...

 

9. CSS  Hack分类

    css Hank用来解决浏览器的兼容问题，为不同版本的浏览器定制编写不同的css效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式

   

       1. CSS属性前缀法

        .elem{ _background:red; }

 

       2. 选择器前缀法

 

        *html .elem{ }

 

       3. IE条件注释法

 

        IE10以上已经不支持注释法

 

10. IE低版本常见BUG

    1. 透明度

       2. 双边距

       3. 最小高度

       4. 图片边框

 

11、渐进增强与优雅降级

 

    渐进增强：针对低版本浏览器进行构建页面，保证最基本不的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

 

    优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容

 

12. 布局扩展

 

    1. 等高布局

        利用margin-bottom负值与padding-bottom大值配合实现。

 

    2. 三列布局，左右固定，中间自适应

 

        1. BFC方式

        2. 定位

        3. 浮动 ( 双飞翼布局、圣杯布局 )

            margin负值

 

        4. flex弹性