CSS3的新增属性

选择器

属性选择器：

属性选择器：获取某个属性的元素用  标签[类名]
                    获取有某个属性等于某个属性的值的元素  标签[类名=‘名’]
                    获取有某个属性以某个值开头的元素  标签[值^='www']
                    获取有某个属性以某个值开头的元素  标签[值$='']
                    获取有某个属性包含某个值得开头元素用 标签[值*=‘’]
                    获取有某个属性以某个值开头并且加一个|  标签[类|=‘’]

伪元素选择器：

伪元素选择器：获取标签中第一个字  标签：：first-letter
                       获取标签中第一行内容  标签：：first-line
                       给标签第一行的上一行添加内容  标签：：before { content，display
                       给标签最后一行的下一行添加内容  标签：：after { content display

伪类选择器：

伪类选择器：找到标签父元素中的第三个子元素   标签：nth-child（3）
                    找到标签父元素中的倒数第二个子元素  标签：nth-last-child（2）
                    找到标签父元素中第二个类型是   标签：nth-last-of-type（2）
                    找到标签父元素中倒数第三个类型是  标签：nth-last-of-type（3）
                    找到标签父元素中最后一个子元素  标签：last-child
                    找到标签父元素中第一个子元素   标签：first-child

---

样式的属性设置

文字样式设置：

HSL颜色：（用hsl：色调，饱和度，明度）  色调是0-360之间，饱和度和明度用百分比1-100
          hsla是设置透明度，0-1之间
 
文本阴影：用text-shadow：水平阴影，垂直阴影，模糊距离，阴影颜色，前三个用px为单位设置，
         颜色是16进制
         
文本溢出：text-overflow：clip截断   text-overflow：ellipsis显示省略号
                  

盒子的样式设置：

圆角边框：border-radius引用，也可以单个设置，顺序是上右下左

盒子阴影：box-shadow：水平阴影，垂直阴影，模糊距离，阴影颜色，前三个用px为单位设置，
         颜色是16进制

三角形：盒子的宽高为0，边框线设置粗一些，不用的边框线用transparent透明色，透明没

盒子大小：box-sizing  值有：border-box使盒子保持设置的宽高，保证盒子不因内边距影响布局
                           content-box指定内容的宽高
                           inhert指定盒子继承父元素

调整尺寸：resize    值是：both可以拖拽，配合overflow：auto使用

背景的样式设置：

背景：background-image可以插入多张图片，中间用逗号隔开，设置背景图片样式的时候
                                         也用逗号隔开，也可以用background设置一步到位
          background-size设置背景图片大小，第一种是按百分比设置宽高，auto是自动，
                                     cover是铺满，contain按原图比例缩放
          backgroung-origin指定背景图片位置，border-box在边框区域显示，
                                         content-box内容区域显示，padding-box内边距区域显示
          background-clip在哪里截断，border-box边框区域截断，content-box内容区域截断
                                     padding-box内边距区域截断

---

动画

动画的设置以及2D转换：

过度持续时间：transiti-duration，单位是S

禁用按钮：disabled禁用，readonly只读属性，opacity透明度与cursor配合使用
         cursor属性设置为not-allowed光标就会变成禁止

渐变：linear gradients线性渐变，可以设置上下左右，对角方向
      radial-gradient径向渐变，可以设置渐变的中心，形状，大小
          线性渐变：默认是自上向下的，设置方向用to加方位单词设置，设置方位需要写在颜色前边
                   至少写两个颜色，所有属性需要用逗号隔开
          径向渐变：默认是居中，椭圆，设置颜色比例在颜色后面加百分比，设置形状用circle圆形
                    ellipse椭圆，所有属性用逗号隔开

过度：transition持续效果，必须指定属性，必须规定时间，所有属性中间用空格隔开
      tramsition-property  指定属性，直接写all
      tramsition-duration  持续时间
      tramsition-timing-function  速度变化
      tramsition-delay  延迟时间
          速度变化的属性值有：linear匀速，ease开始慢，中间快，结束慢
                                        ease-in  开始慢，结束快
                                        ease-out  开始快，结束慢
                                        ease-in-out  开始慢  中间匀速，结束慢
         过渡设置顺序：（指定属性，持续时间，速度变化，延迟时间，中间用空格隔开）


2D转换：transform属性引用，值有：translate平移，可以设置x，y轴，xy中间用逗号隔开
        单位是px，右下是正值，左上是负值
        rotate旋转，单位是deg，正值是顺时针旋转，负值是逆时针旋转
        scale缩放，可以设置x，y轴，没有单位，小于一是缩小大于一是放大，xy逗号隔开
        skew倾斜，可以设置x，y轴，单位是deg，xy逗号隔开
        origin设置旋转中心点，用方位单词设置，比如（left top）

动画：@keyframes创建动画，必须绑定到一个选择器，自己起名字，用animation在div里来规定时间
     以及用动画名字调用动画，可以用百分比来设置，也可以用form开始，to结束来设置
动画的值：animation-name规定名字
         animation-duration规定时间
         animation-timing-function-规定速度，linear匀速播放
         animation-fill-mode规定播放前和播放后的样式
         animation-delay延迟时间
         animation-intertion-cout播放次数，infinite重复播放
         animation-direction逆向播放，alternate
         animation-play-state播放状态 running播放，paused暂停

---

媒体查询

布局：

多列布局：column-count   设置分割列数
         column-fill设置填充
         column-gap设置列与列的间隔
         column-rule设置列边框的宽度，线条，颜色      

网格视图：把整个页面平均分成12分，按百分比来设置，box-sizing：border-box设置所有元素
         保持盒子比例不变

媒体查询：可以用@media和link两种方法
媒体类型：all所有设备，print打印设备，scree屏幕
媒体特性：width可见区域宽度，height看见区域高度，min最小，max最大
关键词：orientation屏幕方向，and同时满足两个条件，only指定媒体类型，not排除指    定类型
屏幕的方向：landscap横屏，portrait竖屏
背景图片：contain按原图比例缩放，cover完全覆盖，比例不变，但会显示不全   

---

弹性盒子

布局方法和属性：

弹性盒子：dispaly：flex引用，默认水平方向main axis为主轴，垂直方向是cross axis交叉轴
         容器元素给父元素，项目元素给子元素

容器属性（写在父元素里面）：flex-direction决定主轴的方向，默认是水平
                          flex-wrap如何换行
                          flex-flow复合属性，是flex-direction， flex-wrap的简写
                          justify-conten：设置子元素在横向轴的对齐方式
                          align-items设置子元素在交叉轴的对齐方式
                          align-content多行排列时设置子元素在交叉轴的对齐方式

容器属性值：flex-direction的排列方向：row默认左对齐，row-reverse右对齐但是排列顺序相返，column纵向排列，column-reverse反向纵向排列
           flex-wrap的值：nowrap默认不换行，wrap必要时换行，wrap-reverse必要时换行，但排列顺序相反
           justify-content：flex-start左对齐，flex-end右对齐，center居中对齐，space-between两端对齐
           space-around每个子元素两侧间隔相等
           align-items：stretch默认值，flex-start头部对齐，flex-end页脚对齐，center中间对齐，baseline基线对齐
           align-content：stretch每一行都被拉伸以填满容器，flex-start多行都集中在顶部，flex-end多行都集中在底部，center多行居中
           space-between行与行之间保持相等距离，space-around每行的周围保持相等距离，

项目属性（写在子元素里）：order：子元素的排列顺序
                        flex-grow：把剩余空间按照比例大小把子元素放大
                        flex-shrink：空间不足按照比例缩小
                        flex-basis：设置子元素的伸缩值
                        flex：复合属性是 flex-grow  flex-shrink  flex-basis的简写
                        align-self：设置子元素的对齐方式
                        
项目属性值：order用数字设置，越小越靠前，可以是负数，也可以是0
           flex-grow数字设置，默认是0，不能是负数
           flex-shrink数值设置，默认是1，0是不设置，不能是负值
           flex-basis默认是auto，单位是px，%，rem等
           flex默认是0  1  auto
           align-self：auto：继承父元素的align-items属性，默认值
           flex-start：在垂直轴的开头
           flex-end：在垂直轴的结尾
           center：在垂直轴的中间
           stretch：在垂直轴方向拉伸
           baseline：在垂直轴方向基线对齐