HTML + CSS的基础知识 （4）

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目前还没有标准化，所以需要添加浏览器前缀。

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

4. box-reflect

above   上
below   下
left    左
right   右
距离
遮罩 | 渐变 

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

5. blur模糊

    filter : blur()

6. calc计算

    四则运算

7. 分栏布局

  column-count : 分栏的个数
  column-width : 分栏的宽度 
  column-gap : 分栏的间距   
  column-rule : 分栏的边线
  column-span : 合并分栏

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

8. 伪元素与伪类：

    （1）伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
    :: selection
    :: first-line   /    first-letter
    :: before     /     after 
    …	

（2）伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多的信息。通常表示获取不存在与DOM树中的信息，或获取不能被规CSS选择器获取的信息。

   ：hover
   :focus
   :empty
   ...

9. CSS Hack分类

1. CSS属性前缀法
    .elem{ _background:red; }

2. 选择器前缀法

    *html .elem{ }

3. IE条件注释法

    IE10以上已经不支持注释法

10. IE低版本常见BUG

1. 透明度
2. 双边距
3. 最小高度
4. 图片边框

11. 布局扩展

1. 等高布局
    利用margin-bottom负值与padding-bottom配合实现。

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

    1. BFC方式 
    2. 定位
    3. 浮动 ( 双飞翼布局、圣杯布局 )
        margin负值

    4. flex弹性