css知识归纳（3）

一、h5新标签

<header><header>

语义：页面头部，用来体现整个页面的头部信息

<nav></nav>

语义：导航

<main></main>

语义：主区域，ie不支持

<footer></foote>

语义：页面的尾部，用来放版权信息，热线电话，版本号

<aside></aside>

语义：侧边栏，侧边栏附属信息

<hgroup></hgroup>

语义：标题的集合，用来放h1~h6的标签，用来做标题组合

<figure></figure>

语义：图片的区域，用来包含一个figcaption,多个img标签

<figcaption></figcaption>

语义：图片标题，用来表示一堆图片的标题

<section></section>

语义：分区，用来表示一个区域并且这个区域与其他区域相似可用来包含header，h1~h6等标签

<article></article>

语义：独立区域，用来表示一个独立的区域，可以是文章，可以是blog，可以是论坛的回复
二、子选择器：>
作用范围：第一层子级会享受样式，当孙子的不享受样式
相邻兄弟器：+
作用范围：和p标签相邻的span会享受样式，不相邻的span不享受样式
同级元素通用选择器：~
作用范围：和p标签同级，且是同一个父级的元素，在p标签之后，就享受样式
伪类选择器:

p:nth-child(1~n){...}

1~n 数字可以具体表示是哪个标签，若是n表示所有的标签，表示父级下的第几个标签，并且一定是p，才会享受样式，

p:first-child{...}表示父级第一个子级，且是p,会享受样式
p:last-child{...} 表示父级下的最后一个子级，且是p,会享受样式
p:nth-of-type(1~n){...}
p:first-of-type{...}
p:last-of-type{...}

三、媒体查询：
@media screen and( 最小宽度或最大宽度){
需要变化相应的标签时执行的代码
}

@media screen and (max-width:680px){
    div{
      width:400px;
      height:800px;
      border:10px solid #000;
      background:pink;
}
}

四、响应式布局：

   1.需响应式的meta声明
   2.需配合媒体查询
   3.需百分比的配合
       温馨提示：所有的横向内容的布局，尽量用百分比
   百分比=目标标签元素/目标标签元素的父级
   所有的纵向布局的内容，需配合媒体查询
   通过具体数值设置
      2.所有的文字需百分比 rem
      3.图片的特性
     当图片宽度百分比时，高度会等比缩放

五、径向渐变
1.标准之后

 background:radial-gradient(是否为正圆，at 圆心的位置，渐变的颜色值，...)
   a.是否是正圆，circle表示为正圆形，默认为椭圆
   b.是否为圆心
  可以有两个值，分别代表X轴的圆心位置，和Y轴的位置，可以是模糊的值，如at  left/right/center top/bottom/center
 也可以是具体的数值如：
 at 100px 100px
   c.渐变的颜色 可以添加多个值

2.标准之前

 background:-webkit-radial-gradient(圆心的位置，渐变的颜色，...)
 圆心位置，标准之前和标准之后没啥变化

径向渐变

 #box{
   background:radial-gradient(circle at center center,red,yellow,blue);
}

#box {
            background:radial-gradient(circle at center center,red 20%,yellow 30%,blue)
        }

**渐变**
#box{
 background:linear-gradient(to right,red,yellow,blue);
}

 #box{
            background:linear-gradient(to right,red 10%,yellow 70%,blue)
   }

六、蒙版：目前只有-webkit-内核的浏览器支持
-webkit-mask:url(‘img/1.jpg’) 似乎已废除！？
七、倒影：目前只有-webkit-内核的浏览器支持

-webkit-box-reflect:
   1.第一个值表示：倒影出现的位置；left/right/above/below
   2.第二个值表示：实体和倒影之间的距离，可以是具体的数值：如100px
   3.倒影的修饰：
         可以是透明度的渐变，如
-webkit-box-reflect:below 10px linear-gradient(to top ,rgba(255,255,255,0.1) 50px ,rgba(255,255,255,1) 250px)

八、阴影
1.盒阴影 box-shadow

 box-shadow:是否为内阴影 X轴的阴影面积 Y轴的阴影面积 模糊的面积 阴影的面积；
        1.inset 为内阴影 ，默认的外阴影
        2.X轴的阴影面积 ，正值为右边，负值为左边
        3.Y轴的阴影面积，正值为下边，负值为上边
        4.模糊的面积 ，具体的数值
        5.阴影的颜色值，4种形式的值

 box-shadow:inset 5px 5px 5px green,10px 15px 10px red;

文字阴影

 text-shadow:X的阴影面积 Y轴的阴影面积 模糊面积 阴影面积
        温馨提示：
           1.盒阴影和文字阴影可以设置多个值，中间用，隔开
           2.盒阴影有内外阴影之分，文字没有内阴影

text-shadow:3px 3px 3px green;

九、flex布局
点击此链接进入大佬的盒子戏法教程！
Flex 布局教程