HTML第6章-CSS3新增属性课件.ppt

1、CSS3新增属性新增属性 HTML5课程目录Transition过渡过渡Border6Filter124Animation 动画动画Transform 2D/3D3Flex57textBorderv 向 div 元素添加圆角边框：border-radius border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius举例（border-radius）div border:2px solid;border-radius:25px;box-shadowv 为di

2、v 元素添加一个或多个阴影的边框：box-shadow 举例（box-shadow）div box-shadow:10px 10px 5px#888888;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。border-imagev 将图片规定为包围 div 元素的边框：border-image-outset border-image-repeat border-image-slice border-image-source border-image-width举例（border-image）border-imagev

3、 将图片规定为包围 div 元素的边框：border-image-source 用在边框的图片的路径 border-image-slice 图片边框向内偏移。border-image-width 图片边框的宽度。border-image-outset 边框图像区域超出边框的量。border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。border-image举例（border-image）div -webkit-border-image:url(border.png)30 30 round;/*Safari 5*/-o-

4、border-image:url(border.png)30 30 round;/*Opera*/border-image:url(border.png)30 30 round;Textv 文本溢出处理：white-space：规定段落中的文本不进行换行举例（white-space）p white-space:nowrap;值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行

5、符。Textv 文本溢出处理：text-overflow:当文本溢出包含元素时发生的事情举例（text-overflow）div.testtext-overflow:ellipsis;值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。text-shadowv 文本阴影：text-shadow举例（text-shadow）h1 text-shadow:5px 5px 5px#FF0000;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可

6、选。阴影的颜色。参阅 CSS 颜色值。filterv 定义了元素(通常是)的可视效果(例如：模糊与饱和度)filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();grayscalegrayscale灰度灰度opacityopacity透明度透明度sepiasepia褐色褐色brightnessbrightness亮度亮度saturatesaturate饱和度饱和度contrastcontrast对比度

7、对比度hue-rotatehue-rotate色相旋转色相旋转 blurblur模糊模糊invertinvert反色反色Drop-shadowDrop-shadow阴影阴影filter-grayscalev grayscalegrayscale灰度灰度#romance -webkit-filter:grayscale(100%);/*Chrome,Safari,Opera*/filter:grayscale(100%);举例（filter-grayscale）blurv blurblur模糊模糊v 图片使用高斯模糊效果#romance -webkit-filter:blur(5px);/*Ch

8、rome,Safari,Opera*/filter:blur(5px);举例（filter-blur）brightnessv brightnessbrightness图片变亮图片变亮#romance -webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);举例（filter-brightness）contrastv contrast contrast 对比度对比度#romance -webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filt

9、er:contrast(500%);举例（filter-contrast）drop-shadowv drop-shadowdrop-shadow阴影效果阴影效果#romance -webkit-filter:drop-shadow(15px 15px 18px#222);/*Chrome,Safari,Opera*/filter:drop-shadow(15px 15px 18px#222);举例（filter-drop-shadow）hue-rotate()v hue-rotatehue-rotate色相旋转色相旋转#romance90 -webkit-filter:hue-rotate(9

10、0deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);#romance180 -webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);#romance270 -webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);举例（filter-hue-rotate）invertv InvertInvert 反转输入图像#romance

11、 -webkit-filter:invert(100%);/*Chrome,Safari,Opera*/filter:invert(100%);举例（filter-invert）opacityv opacityopacity透明度效果透明度效果#romance -webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);举例（filter-opacity）saturatev saturatesaturate饱和度饱和度#romance -webkit-filter:saturate(300%);/*Chrome,

12、Safari,Opera*/filter:saturate(300%);举例（filter-saturate）sepiav sepia褐色#romance -webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);filterv filter复合函数v 使用多个滤镜，每个滤镜使用空格分隔。v 注意注意:顺序是非常重要的(例如使用 grayscale()后再使用 sepia()将产生一个完整的灰度图片)。#romance -webkit-filter:contrast(200%)brightness(150%);/*

13、Chrome,Safari,Opera*/filter:contrast(200%)brightness(150%);举例（filter）Transition过渡transitiontransition简写属性，用于在一个属简写属性，用于在一个属性中设置四个过渡属性。性中设置四个过渡属性。transition-propertytransition-property规定应用过渡的 CSS 属性的名称。transition-durationtransition-duration定义过渡效果花费的时间。transition-timing-functiontransition-timing-funct

14、ion规定过渡效果的时间曲线。transition-delaytransition-delay规定过渡效果何时开始。Transition过渡v 举例：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px。举例（transition）div width:100px;transition:width 2s;-moz-transition:width 2s;/*Firefox 4*/-webkit-transition:width 2s;/*Safari 和 Chrome*/-o-transition:width 2s;/*Opera*/div:hover width:300

15、px;v transition-property 属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。当指定的CSS属性改变时，过渡效果才开始。其基本语法格式如下：1、transition-property属性属性transition-property:none|all|property;属性值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。transition-property.html2、transition-duration属性属性v transition-

16、duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。其基本语法格式如下：transition-duration:time;transition-duration.html3、transition-timing-function属性属性v transition-timing-function属性规定过渡效果的速度曲线，默认值为ease，其基本语法格式如下：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);属性值属性值描述描述

17、linearlinear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。easeease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-inease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-outease-out指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-outease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-

18、bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在01之间。transition-timing-function.html4、transition-delay属性属性v transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下：vtransit

19、ion-delay:time;5、transition属性属性v transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下：transition：property duration timing-function delay;v 在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。Animation动画 keyframeskeyframes规定动画。规定

20、动画。animationanimation所有动画属性的简写属性，除了 animation-play-state 属性。animation-nameanimation-name规定 keyframes 动画的名称。animation-durationanimation-duration规定动画完成一个周期所花费的秒或毫秒。animation-timing-animation-timing-functionfunction规定动画的速度曲线。animation-delayanimation-delay规定动画何时开始。animation-iteration-animation-iteration

21、-countcount规定动画被播放的次数。animation-directionanimation-direction规定动画是否在下一周期逆向地播放。animation-play-stateanimation-play-state规定动画是否正在运行或暂停。animation-fill-modeanimation-fill-mode规定对象动画时间之外的状态。keyframes规则v 实例：使 div 元素匀速向下移动：举例（animation-keyframes-fromto，animation-keyframes-%）divanimation:mymove 5s infinite;ke

22、yframes mymove from top:0px;to top:200px;-moz-keyframes mymove/*Firefox*/from top:0px;to top:200px;-webkit-keyframes mymove/*Safari 和 Chrome*/from top:0px;to top:200px;-o-keyframes mymove/*Opera*/from top:0px;to top:200px;animation-name属性v 为 keyframes 动画规定名称v 说明：必须明确规定 animation-duration 属性，否则时长为 0，

23、就不会播放动画。v 语法：animation-name:keyframename|none;值描述keyframename规定需要绑定到选择器的 keyframe 的名称。none规定无动画效果（可用于覆盖来自级联的动画）。ise_animation-duration属性v 定义动画完成一个周期所需要的时间，以秒或毫秒计。v 语法：举例（animation-duration）animation-duration:time;值描述time规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。animation-timing-function属性v animation-timing-func

24、tion 规定动画的速度曲线。v 速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。语法：举例（animation-timing-function.html）animation-timing-function:value;值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在 cubic-bezier（贝塞尔曲线）函数中自己的值。可能的值是从 0 到 1 的数值。a

25、nimation-delay属性v animation-delay 属性定义动画何时开始。语法：v 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。举例（animation-delay.html）animation-delay:time;animation-delay:-2s/*W3C 和 Opera*/-moz-animation-delay:-2s/*Firefox*/-webkit-animation-delay:-2s/*Safari 和 Chrome*/animation-iteration-count属性v animation-iteration-count 属性定义动画

26、的播放次数v 语法：animation-iteration-count:n|infinite;值描述n定义动画播放次数的数值。infinite规定动画应该无限次播放。animation-direction属性v animation-direction 属性定义是否应该轮流反向播放动画。v 如果 animation-direction 值是 alternate，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。v 注释：注释：如果把动画设置为只播放一次，则该属性没有效果。v 语法：举例（animation-direction.html）animation-

27、direction:normal|alternate;animation-play-state属性v animation-play-state 属性定义动画的状态。v 语法：举例（animation-play-state.html）animation-play-state:running|paused;v Running表示运动v Paused表示暂停animation-fill-mode属性v animation-fill-mode 属性定义动画结束后的状态，语法：animation-fill-mode:none|forward|backward|both;v none 无v forward

28、 动画结束（to里面的所有样式）时的状态v backward 动画开始（from里面的所有样式）时的状态v both 动画开始或者结束时的状态。animation属性v animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。其基本语法格式如下：v 在上述语法中，使用animation属性时必须指定animation-name和animat

29、ion-duration属性，否则持续的时间为0，并且永远不会播放动画。animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;认识transformv Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。语法：v Transform能够实现：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix等。举例（

30、transform.html）transform:none|transform-functions;2D转换平移v 使用translate()方法能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数值，分别用于定义X轴和Y轴坐标，其基本语法格式如下：v 其中x-value是水平方向上，向右移动的距离；y-value指元素在垂直方向上，向下移动的距离；如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。举例（transform-translate）transform:translate（x-value,y-value）;2D转换缩放v scale()方法用于缩放元素大小，

31、该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。其基本语法格式如下：v 在上述语法中，x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是翻转元素（如文字被反转），然后再缩放元素。举例（transform-scale）transform:scale(x-axis,y-axis);ise_2D转换倾斜v skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。skew()可以将一个对象围绕着X轴和Y轴按照一定的角度倾斜，其基本语法格式如下：v 在上述语法中，参数x-angle和y-

32、angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。举例（transform-skew）transform:skew(x-angle,y-angle);ise_2D转换旋转v rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。其基本语法格式如下：v 在上述语法中，参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。举例（transform-rotate）transform:rotate(angle);ise_

33、3D转换更改变换的中心点v 通过transform属性可以实现元素的平移、缩放、倾斜以及旋转效果，这些变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性，其基本语法格式如下：v 在上述语法中，transform-origin属性包含三个参数，其默认值分别为50%50%0，各参数的具体含义如下表所示。举例（transform-origin）transform-origin:x-axis y-axis z-axis;ise_3D转换更改变换的中心点值描述x-axis定义视图被置于 X 轴的何处。可能的值：leftcenterrightlen

34、gth%y-axis定义视图被置于 Y 轴的何处。可能的值：topcenterbottomlength%z-axis定义视图被置于 Z 轴的何处。可能的值：lengthise_3D转换rotateX()v rotateX()函数用于指定元素围绕X轴旋转，其基本语法格式如下：v 在上述语法格式中，参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。举例（transform-rotateX）transform:rotateX(a);ise_3D转换rotateY()v rotateY()函数指定一个元

35、素围绕Y轴旋转，其基本语法格式如下：v 在上述语法中，参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。举例（transform-rotateY）transform:rotateY(a);3D转换translate3d()v translate3d(x,y,z)只是规定3D转换的一种形式，此函数用来规定指定元素在三维空间中的位移。其基本语法格式如下：x:表示在x轴方向的位移。y:表示在y轴方向的位移。z:表示在z轴方向的位移。translate3d(x,y,z);举例（transform-transla

36、te3d）3D转换其他方法v 需要说明的是，在CSS3中包含很多转换的属性，通过这些属性可以设置不同的转换效果，具体属性如下表所示。属性名称描述transform向元素应用 2D 或 3D 转换transform-style规定被嵌套元素如何在 3D 空间中显示perspective规定 3D 元素的透视效果perspective-origin规定 3D 元素的底部位置backface-visibility定义元素在不面对屏幕时是否可见ise_3D转换其他方法v 另外，CSS3中还包含很多转换的方法，运用这些方法可以实现不同的转换效果，具体方法下表所示。方法名称描述matrix3d(n,n,n

37、,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换，使用16个值的 4x4 矩阵translate3d(x,y,z)定义3D转换translateX(x)定义3D转换，仅使用用于 X 轴的值translateY(y)定义3D转换，仅使用用于 Y 轴的值translateZ(z)定义3D转换，仅使用用于Z 轴的值scale3d(x,y,z)定义 3D 缩放转换scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值rotate3d(x,y,z,a

38、ngle)定义 3D 旋转rotateX(angle)定义沿 X 轴的 3D 旋转rotateY(angle)定义沿 Y 轴的 3D 旋转rotateZ(angle)定义沿 Z 轴的 3D 旋转perspective(n)定义 3D 转换元素的透视视图flexv 布局的传统解决方案，基于盒状模型，依赖 display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex布局是什么v Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。

39、Webkit内核的浏览器，必须加上-webkit前缀。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。举例（flex1）.box display:flex;.box display:inline-flex;.box display:-webkit-flex;/*Safari*/display:flex;Flex容器v 采用Flex布局的元素，称为Flex容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称项目。容器的属性flex-directionflex-directi

40、on决定主轴的方向决定主轴的方向flex-wrapflex-wrap默认情况下，项目都排在一条线。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-flowflex-flow是flex-direction属性和flex-wrap属性的简写形式。justify-contentjustify-content定义了项目在主轴上的对齐方式align-itemsalign-items定义项目在交叉轴上如何对齐align-contentalign-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-direction属性举例（flex-directio

41、n）v 决定主轴的方向（即项目的排列方向）。.box flex-direction:row/水平方向，起点左端|row-reverse/水平方向，起点右端|column /垂直方向，起点上沿|column-reverse;/垂直方向，起点下沿 flex-wrap属性v 默认情况下，项目都排在一条线（又称轴线）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。举例（flex-wrap）.box flex-wrap:nowrap/默认，不换行|wrap/换行，第一行在上方|wrap-reverse;/换行，第一行在下方ise_justify-contentv justify-conte

42、nt属性定义了项目在主轴上的对齐方式。.box justify-content:flex-start /左对齐|flex-end/右对齐|center/居中|space-between/两端对齐，项目之间的间隔都相等|space-around;/每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。举例（justify-content）ise_align-items属性v align-items属性定义项目在交叉轴上如何对齐。举例（align-items）.boxalign-items:flex-start/交叉轴的起点对齐|flex-end/交叉轴的终点对齐|center/交

43、叉轴的中点对齐|stretch;（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。|baseline/项目的第一行文字的基线对齐Align-selfv 定义定义flexflex子项单独在侧轴（纵轴）方向上的对齐方式子项单独在侧轴（纵轴）方向上的对齐方式。align-self：auto/如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果其没有父元素，则计算值为stretch。|flex-start/起始位置的边界紧靠住该行的侧轴起始边界|flex-end/起始位置的边界紧靠住该行的侧轴结束边界|center/弹性盒子元素在该行的侧轴

44、（纵轴）上居中放置|baseline/如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐|stretch/如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。举例（align-self）Align-self.box li:nth-child(1)-webkit-align-self:flex-end;align-self:flex-end;举例（align-self）项目的属性属性属性描述描述orderorder定义项目的排列顺序。数值越小，排

45、列越靠前，默认为0flex-growflex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-flex-shrinkshrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。justify-justify-basisbasis定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flexflexflex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。orderv 设置或检索弹性盒模型对象的子

46、元素出現的順序。v order定义将会影响 值为static元素的层叠级别，数值小的会被数值大的盖住。.test display:flex;.item1 order:1;margin:-10px;.test display:flex;.item2 order:1;margin:-10px;举例（order1）flex-growv 设置或检索弹性盒的扩展比率。v 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。v。.flex2display:flex;width:600px;margin:0;padding:0;list-style:none;.flex2 li:nth-child(1)

47、width:200px;.flex2 li:nth-child(2)flex-grow:1;width:50px;.flex2 li:nth-child(3)flex-grow:3;width:50px;举例（flex-grow）Flex-shrinkv 设置或检索弹性盒的收缩比率设置或检索弹性盒的收缩比率。v 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。.flexdisplay:flex;width:400px;margin:0;padding:0;list-style:none;.flex liwidth:200px;.flex li:nth-child(3)flex-shrink

48、:3;举例（flex-shrink）Flexv 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。是由flex-grow、flex-shrink、和flex-basis三个属性组成的简写形式。举例（flex2）flexflexflex-growflex-growflex-shrinkflex-shrinkFlex-basisFlex-basis剩余空间分配比例默认1，空间不足时等比例缩小；非1时，空间不足不缩小项目占据的主轴空间默认默认01autononenone00autoautoauto11auton n（非负数）（非负数）n10

49、%长度或百分比长度或百分比11长度或百分比n,m(n,m(非负数非负数)nm0%n,n,长度或百分比长度或百分比n1长度或百分比Flex 举例（flex2）.main .main display:flex;display:flex;width:600px;width:600px;.main div height:100px;.main div height:100px;.item1 .item1 width:140px;width:140px;flex:2 1 0%;flex:2 1 0%;background:#7d7dff;background:#7d7dff;.item2.item2 width:100px;width:100px;flex:2 1 auto;flex:2 1 auto;background:#ff79bc;background:#ff79bc;.item3 .item3 flex:1 1 200px;flex:1 1 200px;background:#aaa;background:#aaa;圣杯布局ise_