Css3基础

css3：

属性选择器（^ $ *）

伪类选择器（root、not、empty、target）

伪元素选择器（selection）

伪元素 after before first-letterfirst-line

层次选择器（> + ~）

盒模型 box-sizing

伸缩盒子display:flex

多列布局：column-（count width gap rulespan）

变形transform（translate、scale、rotate、skew、matrix）

过渡动画transtion（property、duration、timing-function、delay）过渡属性，过渡时间过渡函数 延迟时间

动画铺垫animation可以按指定的帧状态过渡执行（0-100%）

 

 

 

 

渐进增强，优雅降级

 

先考虑低端设备能否看到所有内容，在此基础上为高端用户带来更好的体验

对应不同级别的浏览器，有不同的页面，主要内容要表示出来

渐进增强，

            对于支持css3的浏览器，做出适当的css3属性

            不支持css3的浏览器，做出模拟css3的样式

            本质上让低级浏览器渲染页面好看一些，但是没有得到实质性的提高

 

 

CSS3 属性选择器

class中出现的字符 ^开头 $结尾 *任意位置出现

div[class*='jc']

 

伪类选择器

 

1.根标签选择器:root 相当于html

2.否定选择器div:not([class*= 'a'])

 

3.空标签选择器 选择标签里没有任何内容的

   <div class="1jcDy1"></div>

   <div class="1Dyjc1"></div>

   <div class="aaa"></div>

   <div></div>

 

4.目标元素选择器

 

         :target{

       display: block;

       background-color: yellow;

    }

       <a href="#anchor">12222</a>

   <div id="anchor">1111</div>

伪元素选择器

1. p::selection 该标签被选中的时候，背景可以改变颜色，火狐下要加-moz

 

 

层次选择器

 

         E>F直接子元素

         EF

         E+F后面紧跟着的兄弟节点

         E~F通用选择器

 

动态伪类选择器

          :link

         E:hover

         E:focus

         E:visted

         E:active

目标伪类选择器

 

         E:target

UI 元素伪类元素选择器

         E:check

         E:enabled

         E:disabled

 

E :first-child

 :last-child

 :nth-child(n);

 :nth-last-child(n);

 :nth-of-type()

 :last-of-type()

 

 

 

 

伪元素

::after

::before

::first-letter

::first-line

 

 

CSS3 盒模型

W3C标准和模型

     内盒width =content

IE 传统盒模型 IE6以下

                  width  = content + padding + border

 

CSS3 盒模型

 

box-sizing:

                          content-box标准盒模型

                          border-box      IE盒模型

                          inherit继承父级盒模型

 

outline

border

 

伸缩布局盒模型(float不能用，在移动端不能定宽,用伸缩盒子可以自适应)

 

display:flex;

 

flex                设置伸缩盒子

flex-grow              将盒子剩余部分按比例分配

flex-shrink            设置或检索弹性盒的收缩比率

flex-basis      设置或检索弹性盒伸缩基准值。

flex-flow      复合属性。设置或检索伸缩盒对象的子元素排列方式。

flex-direction  设置或检索伸缩盒对象的子元素在父容器中的位置。

flex-wrap              设置或检索伸缩盒对象的子元素超出父容器时是否换行。

align-content  设置或检索弹性盒堆叠伸缩行的对齐方式。

align-items           设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-self      设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。

justify-content        设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

order                     设置或检索伸缩盒对象的子元素出現的順序。

 

 

 

// /父级

justity-content center 水平居中

align-content:center      垂直居中//多行元素起作用

align-items:center

 

 

css3多列布局

 

column-conut：2 两列

 

column-width:400px;   每一列的宽度

这两个不能混着用

 

column-gap:200px   列与列之间的宽度

 

-webkit-column-rule:10px solid red;  列边框，不会影响宽度

 

column-span:all;  跨越列，当标题栏

 

如果给容器大小，超过容器大小，就会变成一列，默认沟壑宽度是font-size

    50px        400px         16px  conut

column - width = (width-(n-1)*font-size)/n

   div {

       width: 400px;

       border:2px solid black;

       -webkit-column-width:195px;

       -webkit-column-rule:10px solid red;

       -webkit-column-count:2;

       -webkit-column-gap:0;

    }

渐变

 

linear-gradient(top color color )

 

变形

 

transform

 

translate() 移动

scale()      缩放

rotate() 旋转

skew() 倾斜

matrix()

 

transform-origin 指定元素中心点的位置

transfrom-style :flat / preserve-3d

perspective 景深

 

translate3d(tx,ty,tz)3d 位移

translateZ()

 

scale3d(x,y,z) >0 缩小 <1>1 放大

scaleZ() -1表示对称点

 

rotate3d(x,y,z,deg)

rotateX

torateY

rotateZ

 

 

css过渡

 

transtion 过渡属性，过渡时间 过渡函数 延迟时间

 

触发过渡

 

伪元素触发

：hover

：focus

：check

 

媒体查询触发

 

@media

 

JavaScript触发

 

触发过渡

有起始点

有终止点

 

利用transtion 完成过渡

 

通过硬件加速使得过渡更流畅

transform translateZ(0);

带有硬件加速的过渡

 

CSS3 动画

 

animation 关键帧动画名字 播放时间 动画播放方式

                          延迟 循环次数 播放方向 播放状态

animation-fill-mode :forwards(播放完 保持在最后一针)

 

@key-frames name {

         from{}persent{}to{}

}

 

媒体查询

 

引入方式

<Link media="screen"></Link>

@import URL（） screen

@media

 

max-width

min-width

屏幕输出宽度device-width