css3
来源：互联网 发布：lua和php 编辑：程序博客网 时间：2024/06/09 22:10
（E，指的是元素名element；attr，指的是属性名attribute）
结构伪类选择器
<div> <h1></h1> <p></p> <span></span> <span></span></div>1）:first-child
h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。
p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。
span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；
2）:first-of-type
h1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素；
p: first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素；
span: first-of-type:选择的是id=”first”的span元素，因为在div元素中有2个span元素，我们选择的是两个之中的第1个。
总结：
“:first-child”是选择父元素下的第1个子元素（不区分元素类型），而“:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）。
“:last-child”和“:last-of-type”、“nth-child（n）”和“:nth-of-type（n）”同样也可以这样去理解.
ul li:not(.first) { color:red; } <ul> <li class="first">绿叶学习网</li> <li>绿叶学习网</li> <li>绿叶学习网</li> <li>绿叶学习网</li> </ul>:empty选择器用于选择一个不包含任何子元素或内容的元素。也就是选择一个内容为空白的元素。
:target选择器用于选取页面中的某个target元素。那什么是target元素呢？target元素，说白了就是该元素的id被当做页面的超链接来使用。
UI元素状态伪类选择器
input:focus { outline:1px solid red; }在Web表单中，有些表单元素（如输入框、密码框、复选框等）有“可用”和“不可用”这2种状态。默认情况下，这些表单元素都处在可用状态。在CSS3中，我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式。 <style type="text/css"> input[type="text"]:enabled { outline:1px solid #63E3FF; } input[type="text"]:disabled { background-color:#FFD572; } </style></head><body> <form> <p><label for="enabled">可用:</label><input type="text" name="enabled"/></p> <p><label for="disabled">禁用:</label><input type="text" name="disabled" disabled="disabled"/></p> </form></body>在Web表单中，有些表单元素（如输入框、文本域等）有“可读写”和“只读”这2种状态。默认情况下，这些表单元素都处在“可读写”状态。在CSS3中，我们可以使用:read-write选择器和:read-only选择器来分别设置表单元素的“可读写”与“只读”这两种状态的CSS样式。input[type="text"]:read-write { outline:1px solid #63E3FF; } input[type="text"]:read-only { background-color:#EEEEEE; } </style></head><body> <form> <p><label for="text1">读写:</label><input type="text" name="text1"/></p> <p><label for="text2">只读:</label><input type="text" name="text2" readonly="readonly"/></p> </form></body>在CSS3中，我们可以使用::before和::after这两个选择器在元素前面或后面添加内容。这两个选择器常和"content属性"配合使用，使用的场景最多的就是清除浮动和创建小图标。<style type="text/css"> div::before { content:"绿叶学习网"; } </style></head><body> <div>CSS3教程</div></body>CSS3文本属性
text-shadow:x-offset y-offset blur color;x-offset：（水平阴影）表示阴影的水平偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；y-offset：（垂直阴影）表示阴影的垂直偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；blur：（模糊距离）表示阴影的模糊程度，单位可以是px、em或者百分比等。blur值不能为负。如果值越大，则阴影越模糊；如果值越小，则阴影越清晰。当然，如果不需要阴影模糊效果，可以吧blur值设置为0；color：（阴影的颜色）表示阴影的颜色，可以使用绿叶学习网的“在线调色板”获取。text-stroke:宽度值 颜色值;说明：text-stroke是一个复合属性，由text-stroke-width和text-stroke-color两个子属性组成。（1）text-stroke-width属性：设置描边的宽度，可以为一般的长度值。（2）text-stroke-color属性：设置描边的颜色。text-overflow:取值;说明：text-overflow属性取值只有2个：text-overflow属性取值属性值 说明ellipsis 当对象内文本溢出时显示省略标记（…）clip 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉单独使用text-overflow属性是无法得到上面图1效果的。因为text-overflow属性只是说明文字溢出时用什么方式显示，要实现溢出时产生省略号效果，还须定义2个内容：（1）white-space:nowrap;（强制文本在一行内显示）；（2）overflow:hidden;（溢出内容为隐藏）；下面是完整语法：text-overflow:ellipsis; overflow:hidden; white-space:nowrap;这3个属性是必须一起使用才会有效果在CSS3中，我们可以使用word-wrap属性来设置“长单词”或“URL地址”是否换行到下一行。语法：word-wrap:取值;说明：word-wrap属性只有2个取值：normal和break-word。normal 默认值，文本自动换行break-word “长单词”或“URL地址”强制换行@font-face{ font-family : 字体名称; src :url("字体文件路径");}使用@font-face方法定义字体名称；使用font-family属性引用该字体；@font-face { font-family: myfont; /*定义字体名称为myfont*/ src: url("../font/Horst-Blackletter.ttf"); } div { font-family:myfont; /*使用自定义的myfont字体作为p元素的字体类型*/ font-size:60px; }opacity属性
在CSS3中，我们可以使用opacity属性来控制元素的透明度。
语法：
opacity:数值;
说明：
opacity属性取值范围为0.0~1.0，0.0表示完全透明，1.0表示完全不透明（默认值）。
opacity属性取值不可以为负数。
1、线性渐变
线性渐变，指的就是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。
2、径向渐变
径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。
线性渐变简介:linear-gradient
在CSS3中，线性渐变指的是一条直线上进行的渐变。在网页中，大多数渐变效果都是线性渐变。
语法：
background:linear-gradient(方向，开始颜色，结束颜色);
说明：
线性渐变的方向取值有2种，一种是使用角度（deg），另外一种是使用关键字：
background:linear-gradient(to right,blue,yellow);径向渐变简介:radial-gradient
CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。
语法：
background:radial-gradient(position ,shape size,start-color,stop-color)
说明：
position：定义圆心位置；
shape size：由2个参数组成，shape定义形状（圆形或椭圆），size定义大小；
start-color：定义开始颜色值；
stop-color：定义结束颜色值；
position、shape size都是可选参数，如果省略，则表示该项参数采用默认值。
start-color和stop-color为必选参数，并且径向渐变可以有多个颜色值。
定义圆心位置position
position用于定义径向渐变的圆心位置，属性值跟background-position属性值相似，也有2种情况：（1）长度值，如px、em或百分比等；（2）关键字。
background:-webkit-radial-gradient(top,orange,blue);定义形状shape
background:-webkit-radial-gradient(circle,orange,blue);定义大小size
size主要用于定义径向渐变的结束形状大小。
background:-webkit-radial-gradient(circle farthest-corner,orange,blueCSS3边框属性简介
在CSS3中，针对边框，增加了丰富的修饰效果，使得网页更加美观舒服。下面列出了常用的CSS3边框属性：
在CSS3中，我们可以使用border-radius属性为元素添加圆角效果。
语法：
border-radius:长度值;
border:1px solid gray;border-radius:10px;//画出来一个半圆border:1px solid red; border-radius:100px 100px 0 0;边框背景重复repeatborder-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat; -webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat; -moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat; } 铺满round border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 round; 拉伸stretchstretch，指的是对边框部分进行拉伸（不重复），有多长拉多长边框背景图片延伸方
在CSS3中，我们可以使用box-shadow属性轻松地为元素添加阴影效果。
语法：
box-shadow：x-shadow y-shadow blur spread color inset;
说明：
（1）x-shadow：设置水平阴影的位置（X轴），可以使用负值；
（2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值；
（3）blur：设置阴影模糊半径；
（4）spread：扩展半径，设置阴影的尺寸；
（5）color：设置阴影的颜色；
（6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。
CSS3背景
css2中关于背景的属性有background-image、background-position
background-size属性
在CSS3之前，背景图片的大小是由图片的实际大小决定的。
在CSS3中，我们可以使用background-size属性来设置背景图片的大小，这使得我们可以在不同的环境中重复使用背景图片。
语法：
background-size:取值;
background-size取值共有2种，一种是使用长度值（如px、百分比）；另外一种是使用关键字。
background-size关键字取值如下表：
div { width:160px; height:100px; border:1px solid red; margin-bottom:10px; background-image:url("../App_images/lesson/run_css3/css3.png"); background-repeat:no-repeat; } #div2{background-size:160px 100px;} div { width:160px; height:100px; border:1px solid red; margin-bottom:10px; background-image:url("../App_images/lesson/run_css3/css3.png"); background-repeat:no-repeat; } 当属性background-size的值为cover时，背景图像按比例缩放，直到覆盖整个背景区域为止，但可能会裁剪掉部分图像 #div2{background-size:cover;} 当属性background-size的值为contain时，背景图像会完全显示出来，但可能不会完全覆盖背景区域。 #div3{background-size:contain;}1、对于背景图片，不是可以使用width和height属性来设置吗？为什么还要增加一个background-size属性呢？
记住，背景图片不同于img标签引用的图片，对于img标签引用的图片，我们可以使用width和height属性来设置，但是这两个属性不能用于设置背景图片的大小。因此，在CSS3中，引入了background-size属性来设置背景图片的大小。这里大家要清楚一点，背景图片的大小跟一般图片的大小设置有本质的区别。
background-origin属性
在CSS3中，我们可以使用background-origin属性来设置元素背景图片平铺的最开始位置。
语法：
background-origin:属性值;
说明：
background-origin属性取值如下：
background-clip属性
在CSS3中，使用background-clip属性来将背景图片根据实际需要进行剪切。
语法：
background-clip:属性值;
说明：
background-clip属性取值如下表：
background-clip属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置（即background-origin属性）无关。背景绘制的位置可以出现在不显示背景的区域。这就相当于背景图片被不显示背景的区域裁剪了一部分一样。
多张背景图片
background:url("../App_images/lesson/run_css3/frame1.png") bottom left no-repeat, url("../App_images/lesson/run_css3/frame2.png") top right no-repeat;CSS3动画效果共3大部分：
- （1）CSS3变形；
- （2）CSS3过渡；
- （3）CSS3动画；
CSS3变形（transform）
在CSS3中，我们可以使用transform属性来实现文字或图像的的各种变形效果，如位移、缩放、旋转、倾斜等。
translate()移动
在CSS3中，我们可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。
对于位移translate()方法，我们分为3种情况：
（1）translateX(x)：元素仅在水平方向移动（X轴移动）；
（2）translateY(y)：元素仅在垂直方向移动（Y轴移动）；
（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；
transform:translateX(20px);translate(x,y)
语法：
tranform:translate(x,y)
说明：
x表示元素在水平方向（x轴）的移动距离，y表示元素在水平方向（y轴）的移动距离。
注意，Y是一个可选参数，如果没有设置Y值，则表示元素仅仅沿着X轴正方形移动。
transform:translate(20px,40px);scale()缩放
缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
transform:scaleX(1.5);元素沿着X轴方向放大了1.5倍（两个方向同时延伸，整体放大1.5倍）rotate()旋转
在CSS3中，我们可以使用rotate()方法来将元素相对中心原点进行旋转。这里的旋转是二维的，不涉及三维空间的操作。
transform：rotate(度数);
说明：
度数指的是元素相对中心原点进行旋转的度数，单位为deg。其中，deg是degree（度数）的缩写。
如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心进行逆时针旋转。
transform:rotate(30deg);skew()倾斜
在CSS3中，我们可以使用skew()方法将元素倾斜显示。
skew()方法跟translate()方法、scale()方法一样，也有3种情况：
（1）skewX(x)：使元素在水平方向倾斜（X轴倾斜）；
（2）skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜）；
transform:skewX(30deg);其实skewX()方法变形原理是这样的：由于我给元素限定了高度为100px，而skewX()方法是沿着X轴方向倾斜。所以，只要倾斜角度不是180°，元素都会保持100px的高度。同时为了保持倾斜，只能沿着X轴拉长本身。- （1）skewX()方法会保持高度，沿着X轴倾斜；
- （2）skewY()方法会保持宽度，沿着Y轴倾斜；
- （3）skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；
transform-origin属性
任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处。
默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形。
假如我们要使得元素进行位移、缩放、旋转、倾斜这些变形操作的中心原点不是原来元素的中心位置，那该怎么办呢？
在CSS3中，我们可以通过transform-origin属性来改变元素变形时的中心原点位置。
语法：
transform-origin:取值;
说明：
transform-origin属性取值有2种：一种是采用长度值，另外一种是使用关键字。长度值一般使用百分比作为单位，很少使用px、em等作为单位。
不管transform-origin取值为长度值还是关键字，都需要设置水平方向和垂直方向的值。transform-origin属性取值跟背景位置background-position属性取值相似，大家可以回去看看，对比理解一下。
transform-origin:right center;CSS3过渡transition
我们知道，transform（变形）、transition（过渡）和animation（动画）是CSS3动画的3大部分。
在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果（仔细理解这句话）。
CSS transform属性所实现的元素变形，呈现的仅仅是一个“结果”，而CSS transition呈现的是一种过渡“过程”，通俗点说就是一种动画转换过程，如渐显、渐隐、动画快慢等。
语法：
transition:属性 持续时间 过渡方法 延迟时间;
说明：
其实transition属性是一个复合属性，主要包含4个子属性：
（1）transition-property：对元素的哪一个属性进行操作；
（2）transition-duration：过渡的持续时间；
（3）transition-timing-function：过渡使用的方法（函数）；
（4）transition-delay：可选属性，指定过渡开始出现的延迟时间；
transition:background-color 1s linear;transition-property属性
在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现过渡效果。
其中，我们可以使用transition-property属性来单独设定过渡动画所要操作的那个属性。
语法：
transition-property：取值;
说明：
transition-property属性的取值是一个“CSS属性名”。
height:50px; background-color:#14C7F3; transition-property:height; transition-duration:0.5s ; transition-timing-function:linear; transition-delay:0; } div:hover { height:100px; } 这里使用transition-property属性指定了过渡动画所操作的CSS属性是height。当鼠标移动到div元素上时，元素的高度会在0.5s内从50px过渡到100px。 对于CSS3过渡动画，大多数情况下都是配合:hover伪类 来使用。transition-timing-function属性
在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果。
在CSS3中，我们可以使用transition-timing-function属性来定义过渡方式。所谓的“过渡方式”主要用来指定动画在过渡时间内的速率。
语法：
transition-function:取值;
说明：
transition-timing-function属性取值共有5种，具体如下：
transition-timing-function属性取值
transition-property:border-radius,background-color; transition-duration:1s ; transition-timing-function:linear; transition-delay:2s; div:hover { border-radius:50px; background-color:red; } 当鼠标移动到div元素上方时，div元素会在1s时间内同时对border-radius和background-color这两个属性产生过渡效果。如果想要使用transition属性同时对多个属性进行实现平滑过渡效果，只需要在transition-property属性添加多个属性名即可，其中属性名之间用英文逗号隔开。动画animation
在CSS3中，动画效果使用animation属性来实现。animation属性和transition属性功能是相同的，都是通过改变元素的属性值来实现动画效果。但是这两者又有很大的区别：transition属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。
想要使用animation属性实现CSS3动画的话，需要2步：
- （1）定义动画；
- （2）调用动画；
在CSS3中，我们使用@keyframes来“定义动画”。关于“调用动画”，我们学习了以下属性：
@-webkit-keyframes mycolor //定义动画 { 0%{background-color:red;} 30%{background-color:blue;} 60%{background-color:yellow;} 100%{background-color:green;} } div:hover { -webkit-animation-name:mycolor; //调用动画 -webkit-animation-duration:5s; //设置动画的持续时间 -webkit-animation-timing-function:linear; //可以使用animation-timing-function属性来设 置动画的播放方式，所谓的“播放方式”主 要用来指定动画在播放时间内的速率。其中， animation-timing-function属性跟transition-timing- function属性类似 animation-delay:时间; // animation-delay属性默认值为0，也就是说当我们没有设置 animation-delay属性时，CSS3动画就没有延迟时间。 animation-iteration-count：取值; //播放次数 }@keyframes简介
从上一节我们知道，使用animation属性定义CSS3动画需要2步：
- （1）定义动画；
- （2）调用动画；
@keyframes 动画名{ 0% { …… } …… 100% { }}使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比的话，这时0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。animation-name：动画名;
说明：
注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果
animation-iteration-count属性
在CSS3中，我们可以使用animation-iteration-count属性来定义动画的播放次数。
语法：
animation-iteration-count：取值;
说明：
animation-iteration-count属性取值有2种：
- （1）正整数；
- （2）infinite；
animation-iteration-count属性默认值为1。也就是默认情况下，动画从开始到结束只播放一次。“animation-iteration-count:n”表示动画播放n次，n为正整数；
当animation-iteration-count属性取值为infinite时，动画会无限次地循环播放。
animation-direction属性
在CSS3中，我们可以使用animation-direction属性定义动画的播放方向。
语法：
animation-direction:取值;
说明：
animation-direction属性取值如下：
animation-play-state属性
在CSS3中，我们可以使用animation-play-state属性来定义动画的播放状态。
语法：
animation-play-state：取值;
说明：
animation-play-state属性取值只有2个：running和paused。
animation-fill-mode属性
在CSS3中，我们可以使用animation-fill-mode属性定义在动画开始之前和动画结束之后发生的事情。
语法：
animation-fill-mode:取值;
说明：
animation-fill-mode属性取值如下：
CSS3多列布局
column-count列数
在CSS3的多列布局中，我们可以使用column-count属性指定多列布局的列数，而不需要通过列宽度等来调整列数。
语法：
column-count: auto/正整数;
说明：
column-count有2个属性值，一个是auto，另外一个是正整数（如1、2、3）
column-width每一列的宽度
在CSS3的多列布局中，我们可以使用column-width属性定义多列布局中每一列的宽度。
语法：
column-width：auto/长度值;
column-width有2个属性值：1个是auto，另外1个是长度值。
column-gap列间距
在CSS3多列布局中，我们可以使用column-gap属性定义列与列之间的间距（列间距）。
语法：
column-gap：取值;
column-gap有2个属性值：一个是normal，另外一个是长度值。
width:400px; padding:10px; border:1px solid silver; -webkit-column-count:2; -webkit-column-gap:20px; /*定义列间距为20px*/column-rule列之间的边框样式
在CSS3的多列布局中，我们可以使用column-rule属性来定义列与列之间的边框样式，其中边框样式包括：宽度、颜色和样式。
语法：
column-rule：边框宽度 边框样式 边框颜色;
说明：
column-rule属性类是一个复合属性，由3个子属性组成：
（1）column-rule-width：设置边框的宽度；
（2）column-rule-style：设置边框的样式；
（3）column-rule-color：设置边框的颜色；
-webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px dashed red;column-span跨列
column-span：取值;
说明：
column-span属性取值如下：
弹性盒子模型
在CSS3中，使用弹性盒子模型可以轻松实现自适应布局以及响应式布局。
注意，在你使用弹性盒子模型之前，你必须先把父元素display属性设置为box或inline-box后，该元素才具有弹性盒子模型。
box-orient盒子的布局方向
在CSS3弹性盒子模型中，我们可以使用box-orient属性定义弹性盒子内部中“子元素”的排列方向。也就是盒子内部的子元素是横着排，还是竖着走。
语法：
box-orient：取值;
box-orient属性取值如下：
display:-webkit-box; /*定义元素为盒子显示，注意书写*/ -webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/box-direction盒子的布局顺序
在CSS3弹性盒子模型中，我们可以使用box-direction属性来设置弹性盒子内部中“子元素”的排列顺序。
语法：
box-direction：取值;
box-direction属性取值如下：
display:-webkit-box; -webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/ -webkit-box-direction:reverse; /*定义盒子元素内的元素反向显示*/box-ordinal-group盒子的布局位置
从上一节，我们知道box-direction属性可以设置弹性盒子内部“子元素”的排列顺序。在CSS3弹性盒子模型中，我们还可以使用box-ordinal-group属性来设置每个“子元素”在弹性盒子中的“准确”显示位置。
语法：
box-ordinal-group:整数;
box-ordinal-group属性取值是一个自然数，从1开始，用来设置子元素的位置序号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下，子元素将根据元素的位置进行排列。
注意，对于没有指定box-ordinal-group属性值的子元素，则该子元素的序号默认都为1。并且序号相同的子元素将按照它们在HTML文档中加载的顺序进行排列。
body { display:-webkit-box; -webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/ } #box1 { background:red; -webkit-box-ordinal-group:2; } #box2 { background:blue; -webkit-box-ordinal-group:3; } #box3 { background:yellow; -webkit-box-ordinal-group:1; }box-flex属性
在CSS3弹性盒子模型中，我们可以使用box-flex属性来定义弹性盒子内部的子元素是否具有弹性空间。如果子元素具有弹性空间，当弹性盒子（父元素）的尺寸放大或缩小的时候，具有弹性空间的子元素的尺寸也会放大或缩小。每当弹性盒子有额外的空间时，具有弹性空间的子元素也会扩大自身大小来填补这一空间。
语法：
box-flex:取值;
说明：
box-flex属性取值是一个整数或者小数，不可为负数，默认值为0。
当盒子中包含多个定义了box-flex属性的子元素时，浏览器将会把这些子元素的box-flex属性值相加，然后根据它们各自的值占总值的比列来分配盒子剩余的空间。
注意，box-flex属性只有在弹性盒子确定了宽度或高度才有效。也就是说必须要先为父元素定义width或者height属性值。
使用弹性空间设置，使得弹性盒子内部元素的总宽度和总高度，始终等于弹性盒子的宽度与高度。不过只有当弹性盒子具有确定的宽度或高度时，子元素的弹性空间才生效。
box-pack水平对齐
box-pack属性可以在水平方向上对盒子的富余空间进行管理。
语法：
box-pack:取值;
说明：
box-pack属性取值如下：
box-align垂直对齐
box-align属性可以在垂直方向上对盒子的富余空间进行管理。
语法：
box-align:取值;
box-align属性取值如下：
其实图片的自适应居中，跟文字的自适应居中是一样的。我们只需要使用“display:box”定义外层元素为弹性盒子模型，然后使用“box-pack:center;”和“box-align:center;”即可。以后凡是遇到自适应居中问题，我们都可以尝试使用以上方法来解决，非常好的一个方法。其实，对于box-pack属性和box-align属性，基本掌握center这个属性值就行了 display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center;- css3
- css3
- css3
- css3
- css3
- css3
- CSS3
- CSS3
- css3
- CSS3
- css3
- css3
- CSS3
- css3
- css3
- css3
- css3
- css3
- GitHub -- GitHub配置与使用
- sqlalchemy位运算符的使用（与或非等）
- 利用python来解决 小鸡,公鸡,母鸡的数学问题
- 注册github以及创建项目
- 《OSG3.4.0》Part1 在控制台中测试OSG配置完成
- css3
- 中国剩余定理及其扩展——学习(复习)笔记
- AffinityPropagation(AP聚类算法)待理解
- 【常用函数封装】php-字符串
- jQuery学习笔记之三
- DOM
- html5
- Java自动拆装箱机制
- html入门总结
