标签：弹性盒 方法 blank text 样式 使用 ext 优先级 div
CSS 用于控制网页的样式和布局，而CSS3 是最新的 CSS 标准。
CSS3的规范仍在开发中，有些CSS3并不能完美兼容所有浏览器。
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。
一些最重要CSS3模块如下：
选择器 盒模型 背景和边框 文字特效
2D/3D转换 动画 多列布局 用户界面
CSS3选择器
添加了关系型选择器、属性选择器、伪元素选择器、伪类选择器等等新的选择器。
可以更精准的筛选元素。CSS3选择器
CSS3边框
CSS3中可以为元素创建圆角边框，添加阴影框。
CSS3圆角
语法：border-radius: 25px 25px 20px 20px;
可以拆分为:左上 / 右上 / 右下 / 左下
border-top-left-radius / border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius
CSS3盒阴影
语法：box-shadow: 10px 10px 10px 10px #000;
X Y s r color
可加上inset属性，加上则为内部阴影，没加则为外部阴影
CSS3图片边框
语法：border-image: url( ) 30 30 round;
CSS3背景
css3中包含了新的背景属性，提供更大背景元素控制。
background-image属性：元素的背景图片
语法：background-image: url(),url()可连接多个图片地址，如果前一个地址错误或者无法加载，会加载后面的地址。
也可以为不同的图片设置不同的属性：background-image: url() right bottom no-repeat , url() left top repeat;
backrgound-size属性：元素的背景图片的大小
语法：background-size: 80px 60px;
background-Origin属性：可以指定背景图片的位置区域
语法：background-Origin: padding-box;内填充
border-box;边框
content-box;内容
background-clip属性：对图片从指定位置进行裁剪
语法：background-clip: 值同上;
在文字中添加背景图：
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
CSS3 Flex Box 弹性盒子
弹性盒子是CSS3的一种新的布局模式
弹性盒子由弹性容器和弹性子元素组成。
弹性容器内包含了一个或多个弹性子元素。
用法：
display:flex; //inline-flex
flex-direction: row | row-reverse / column | column-reverse
主轴以x为准，|取反 主轴以y为准，|取反
flex-wrap: 默认no-wrap不换行，会压缩;
wrap换行 warp反向换行排列
justify-content: flex-start / flex-end / center / space-between / space-around
基于主轴的对齐方式
基于交叉轴的对齐方式:
适用于单行的：align-items：flex-start / flex-end / center / baseline / stretch
适用于多行的：align-content：flex-start / flex-end / center / space-between / space-around / stretch
如果只有一行是没有区别的
order： flex中子项排序，数值小的排序在前。
align-self ：项目在交叉轴的对齐方式：
flex-start交叉轴最顶 flex-end最底
center baseline stretch 比前两者优先级更高。
flex: 子项，以下控制宽
flex-grow : ; 伸，会按照写的比例来瓜分剩下的空间，写在多个标签内会一起计算比例，不写默认值为0
flex-shrink : ; 缩，按照比例缩小按比例分配的值
flex-basis : ;基础宽，可以认为即width。最小宽度，width为最大宽度。
以加权值来计算，在容器宽不足以容纳子项，以每个项目的宽*比例值相加后，按照比例缩小。
CSS的过渡属性 transition 只要状态发生改变，就会触发过渡
transition-property--规定设置过渡效果的 CSS 属性的名称。all 为全部属性
transition-duration--规定完成过渡效果需要多少秒或毫秒。
transition-timing-function--规定速度效果的速度曲线。
transition-delay--定义过渡效果何时开始。
CSS的动画属性 animation 必须使用@keyframes
@keyframes--定义关键帧动画,名字随便取，调用的时候用这个名字即可
animation-name--动画的名字，必须与@keyframes配合使用
animation-duration--动画的时间，从0 - 100 的时间
animation-timing-function--动画的方法：
steps(<integer>[, [ start | end ] ]?) step-start：等同于 steps(1, start) step-end：等同于 steps(1, end) cubic-bezier(<number>, <number>, <number>, <number>)
animation-delay--动画的延迟时间，默认值是0s
animation-iteration-count--动画的循环次数，默认值是一次infinite：无限循环
animation-direction--必须建立在循环的基础之上的
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
CSS转换属性 transform 3D转换中元素移动坐标轴也会移动
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
rotate旋转
rotateX() rotateY() rotateZ() rotate3d(x,y,z,deg)
元素的旋转，旋转以后，元素的坐标轴也跟着发生了旋转,所以会导致先转和后转的结果会不一样
scale伸缩
scale() scelex() scaley() scelez() scale3d(x,y,z)
当你图片伸缩的时候，是伸缩的空间坐标轴，并不是图片的大小,造成了一个视觉差的效果
skew倾斜
skewx() skewy()
倾斜是倾斜坐标轴，并且会将坐标轴进行拉伸
translate移动
translatex() transelatey() translatez() translate3d(x,y,z)
相对于元素本身发生的偏移
标签：弹性盒 方法 blank text 样式 使用 ext 优先级 div
原文地址：https://www.cnblogs.com/yeming980912/p/11240370.html
