两点补充——CSS3新属性以及弹性布局

CSS3 新属性

一、【 CSS3新增属性前缀 】

　　1、-webkit-:chrome/safari

　　2、-moz-:火狐

　　3、-mo-:IE

　　4、-o-: Opera 欧朋

二 、【CSS 长度单位】

　　1、px：像素。长度固定，表示分辨率占几个像素点；

　　2、%：表示相对于默认值的百分比；

　　3、em:长度与元素的字号挂钩。

　　rem:长度与根元素的字号挂钩。 即与html 的 font-size 挂钩，若不设置，默认16px 。

　　【 em与rem区别 】

　　em与当前元素自身的font-size挂钩，若当前元素没有设置，则向上查找最近的祖先元素字号，直至根字号；

　　rem与当前元素字号无关，直接与根节点字号有关。

代码

html{
    font-size: 48px;            /*  修改根元素字号大小 */
}

#div3{
    font-size: 200%;         /*32号字*/
    background-color: yellow;
    height: 3rem;                /* 3*32=94*/

}

效果图

三、【CSS3 背景属性】

　　1、background-clip: 设置背景图或者背景色的裁切显示区域

　　　　border-box：从边框外圆开始显示

　　　　padding-box：从边框内圆开始显示

　　　　content-box： 从文字内容区域开始显示

　　　　如果不在显示区域的背景图或者背景色，会被裁切掉不显示

　　2、background-origin：设置背景图左上角 从哪个位置 开始定位显示

　　　　border-box：背景图左上角从边框外缘开始显示

　　　　padding-box：背景图左上角从边框内圆开始显示

　　　　content-box： 背景图左上角从文字内容区域开始显示

【注】background-origin 不会改变背景图显示区域的大小，只是决定 背景图左上角 从哪个位置 开始定位。

　　　background-clip 只负责 裁切出显示区域，并不关心背景图定位在哪。

　　3、background-attachment：背景图的附着方式

　　　　scroll ：背景图随区域滚动

　　　　fixed：背景图充满整个区域。并且是固定的，不随滚动条滚动。

　　4、缩写形式：

　　　background： background-color background-image background-repeat background-attachment background-position；

代码

#div4{
    width: 100px;
    height: 1000px;
    background-color: yellow;
    padding: 20px;
    border: 20px dotted red;
    background-clip: border-box;
    background-image: url(img/005.png);
    /*background-repeat: no-repeat;*/
    background-origin:content-box;
    background-attachment: fixed;  /*下图验证该条语句*/
}    

效果图   fixed 背景不随滚动条滚动

四、【 transition 过渡属性】

　　transition: all .5s ease 3s; 过渡属性，接受四个属性

　　1、设置哪个CSS属性，参与过渡；可以直接指定all或none；

　　2、过渡多长时间完成。通常 .3s、.5s

　　3、过渡的样式效果。通常 ease

　　4、过渡延时几秒后再开始。可以省略不写

【注】 可以同时定义多个属性的过渡效果，用，隔开。

　　　　eg.  transition: width .3s ease,height .5s ease;

代码

#div5{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width .3s ease,height .5s ease;
}
#div5:hover{
    height: 50px;
    background-color: yellow;
    width: 50px;
    transition: all .5s ease;  /*对比transition置于不同位置，过渡特效作用完后恢复到原状态的时间不同*/
}    

效果图

过渡前

过渡后

五、【 transform变换属性 】

　　1、 常用的变换函数：

　　　　translate（10px,10px）第二个不写，默认为0

　　　　scale（1.1）缩放 overflow=hidden；

　　　　rotate（90deg）90度旋转，默认绕z轴转 可以使用rotateY(180deg)；等

　　　　skew（20deg，30deg）扭曲，水平、垂直方向扭曲多少度

　　2、可以实现多种变换，用空格分隔

　　　　eg. transform：skew(180deg) scale(1.5) translate(200px 200px) ；

　　3、 transform-origin 定义变换起点,常用于旋转变换

　　　　可选值:left center right top center bottom

　　　　也可以直接定义x、y坐标点，第一个数为X轴

　　　　eg .transform: rotate(90deg);

　　　　　  transform-origin:right bottom ; 绕右下角旋转90度

代码

#div6{
    width: 100px;
    height: 100px;
    background-color: red;
}

#div6-1:hover+#div6{
    /*transform:translate(200px 200px) ;*/
    transform: scale(1.5);                       /*放大*/
    transform: rotateY(180deg);       /*旋转180°*/
    transform-origin:right  bottom;   /*绕右下角*/
    transform: skew(180deg);  /*  扭曲180°*/
}

效果图

 

六、【 CSS3 动画的使用 】

　　1、声明一个关键帧（动画）

　　　　@keyframes name{

　　　　　　from{}

　　　　　　to{}

　　　　}

　　　 阶段的写法：① 直接使用from-to的写法；

　　　　　　　　　 ② 设置0%到100%的写法，开头结尾必须是0%、100%；

　　2、在CSS选择器中，使用 animation 调用声明好的动画 ；

　　　　animation的缩写

　　　　Animation-name:动画名称 （声明的关键帧name）

　　　　Animation-duration：动画持续时间 （5s ）

　　　　Animation-timing-function：动画速度曲线（ease）

　　　　Animation-iteration-count：动画播放次数，默认为1.（infinite 无限次重复）

　　　　Animation-direction：动画在下一个是否逆向播放，默认为（不逆向播放）normal.（逆序播放alternate）

　　　　Animation-fill-mode：表示动画结束后停留在何种状态。要使用这个属性，动画执行次数必须有限次！（forwards 动画停留在结束状态；backwards表示动画停留在初始状态，默认效果）

　　　　【注】 name和duration必须设置，其他选填！可以同时设置多个动画，多个动画之间 用 ， 分隔。例如，animation：frame1 1s，frame2 1s......

 

 响应式布局

一、实现响应式的方式:

      JS  媒体查询 流体布局 弹性布局

二. flex 弹性布局

　　1、了解两个基本概念;

     　　 容器：需要添加弹性布局的父元素；

    　　  项目：弹性布局中的每一个子元素。

　　 2、弹性布局的使用

 　　　　① 给父容器添加display：flex/inline-flex；可以使容器内部采用弹性布局显示，不遵循常规文档流的显示方式；

 　　　　② 容器添加弹性布局后，仅仅是内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；（不打破文档流，友好） 

　　　　 ③ display: flex; 容器添加弹性布局后，显示为块级元素  

   　　　　  display:inline-flex; 容器添加弹性布局后，显示为行级元素

　　　　 ④ 设为flex布局之后，子元素的float、vertical-align、clear失效。但是position依然生效。

  示例图  

 display:inline-flex; 显示为行级元素

 display:flex; 显示为块级元素 自动换行

　　3、作用于容器的相关属性：

　　　　① flex-direction 属性决定 主轴的方向（即项目的排列方向）。

       　　　　 row（默认值）：主轴为水平方向，起点在左端

      　　　　  row-reverse：主轴为水平方向，起点在右端

       　　　　 column：主轴为垂直方向，起点在上沿。

       　　　　 column-reverse：主轴为垂直方向，起点在下沿。

  示例图  

 　　　   ② flex-wrap 属性定义，如果一条轴线排不下，如何换行。

 　　　　　　  nowrap（默认）：不换行。当容器宽度不够时，每个项目的宽度会被挤压

        　　　　   wrap：换行，并且第一行在容器最上方

   　　　　　　 wrap-reverse; 换行，第一行在下方。

  　　　     flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  代码  

  示例图  

　　③ justify-content 属性定义了项目在主轴上的对齐方式。

     　　【注】此属性与主轴 方向息息相关。主轴方向：row - 起点在左边；row-reverse - 起点在右边； column - 起点在上边；column-reverse - 起点在下边。

      　　　　 flex-start（默认值）：项目位于主轴起点

       　　　　flex-end：项目位于主轴终点

    　　　　   center： 居中

       　　　　space-between：两端对齐，项目之间的 间隔都相等。（开头和最后的项目，与父容器边缘没有间隔）【常用】

      　　　　 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（开头和最后的项目，与父容器边缘有一定间隔）

  示例图   justify-content: space-between;  两端对齐

 　　   ④ align-items 属性定义项目在交叉轴上的排列方式。

            　　  flex-start：交叉轴的起点对齐。

            　　  flex-end：交叉轴的终点对齐。

             　　 center：交叉轴的中点对齐。

    　　　　   baseline: 项目的第一行文字的基线对齐。（文字行高、字体大小会影响每行的基线）

    　　　　   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

可以参照下图加以理解：

　　　 ⑤ align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。            

         　　【注】当项目换为多行时，可以使用align-content 取代 align-items 。

      　　　　  flex-start：与交叉轴的起点对齐。

      　　　　  flex-end：与交叉轴的终点对齐。

       　　　　 center：与交叉轴的中点对齐。

        　　　　space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

     　　　　   space-around：每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。

     　　　　   stretch（默认值）：轴线占满整个交叉轴。

　　4、作用于项目上的属性

    　　 ① order: 0;属性定义项目的排列顺序。 数值越小越靠前，默认为0。

    　　 ② flex-grow 属性 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

    　　 ③ flex-shrink 属性 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

     　　④ flex-basis 定义项目占据的主轴空间（设置后，若果主轴为水平，相当于设置项目的宽度，原width失效。）

   　　  ⑤ flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  　　　　  这个属性有两个快捷设置：auto=（1 1 auto）空间不够会挤压、空间剩余会放大 和 none = (0 0 auto)空间不够不挤压、空间剩余也不放大

      　　⑥ align-self 定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性

     　　　　属性值：与 align-items 相同，默认auto，表示继承父容器align-items的属性值 

eg.

#div{
    width: 500px;
    height: 500px;
    background-color: yellow;
    display:flex;
        justify-content: space-between;
    align-items: flex-start;
}
#div div{
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: blue;
        color: white;
        font-size: 30px;
}
.div1{
    font-size: 100px;
    order:;                  /*调换次序*/
    flex-grow:;
}
.div3{
    order:;
    flex-grow:;
    flex-shrink:;
    align-self: flex-end;            /*使序号3向下对齐*/
}

效果图

CSS部分可以告一段落了~~~如果对你有帮助  →

点收藏哦~~~