两点补充——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: 1;                  /*调换次序*/
    flex-grow: 0;
}
.div3{
    order: 0;
    flex-grow: 2;
    flex-shrink: 1;
    align-self: flex-end;            /*使序号3向下对齐*/
}

效果图

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

点收藏哦~~~

时间: 08-17

两点补充——CSS3新属性以及弹性布局的相关文章

CSS3新属性:在网站中使用访客电脑里没有安装的字体

CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的!不过不是访客主动下载的,而是网站开发者帮访客下载安装的,具体怎么实现的,我们还要从字体文件的格式说起.字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG.  TrueType Windows和Mac系统最常用的字体格式,其最大

css3新属性的总结

今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐变 线性渐变 跳变 重复渐变蒙版倒影滤镜多背景文字方向文字缩略 过渡transition 变换transform动画animation: keyframes 一个一个来:1>圆角: border-radius:px %; border-radius: 一个值; 四个角 border-radius:

css3属性flex弹性布局设置三列(四列)分布样式

参考:阮一峰的网络日志 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> body{ padding: 0; margin: 0; } .warp{ position

基于CSS3新属性Animation及transform实现类似翻书效果

注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突

css3新属性

1.filter(过滤) 值1:blur(xpx);     模糊度     默认为0 eg:#img{filter:blur(5px)} 值2:grayscale();   灰度       默认为1(100%) 值3:sepia()        黄棕色      默认为1(100%) 值4:saturate()    饱和度    默认为1(100%) 值5:hue-rotate()   色相旋转    默认为0(0) 值6:invert()    反色     默认为1(100%) 值7

calc()-可以进行计算的css3新属性

用法: width:calc(100% - (20px + 2px) * 2); /*用100%减去左右两个20px的padding和2px的border*/ 对于calc(),总结以下要点: 1.兼容性:在IE9+.FF4.0+.Chrome19+.Safari6+支持较好,移动端支持不理想: 2.表达式支持加.减.乘.除运算,同时也支持单位的混合使用(%.px.em等); 2.表达式中有"+","-"运算符的,前后必须要有空格.

css的盒模型,及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c

CSS3 弹性布局弹性流(flex-flow)属性详解和实例

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局). 其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下: flex-flow: <flex-direction> || <flex-wrap> flex-direction: row(初始值) | row-reverse | column | column-reverse flex-wrap: nowr

CSS3弹性布局内容对齐(justify-content)属性使用详解

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自动边距被确定后. 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐. 注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是屏幕上的行向和列向(但是严格讲,这和写模式有关). 那么main-start和main-end就可以分别被看作是弹性容器的左右边. justify-co