css3 新特性
一 项目中常用的新特性
| 样式名 | 说明 |
|---|---|
| border-raduis | 10px |
| border-image | 边框图像 |
| box-shadow | 水平阴影(必) 垂直阴影(必) 模糊距离(可) 阴影大小(可) 阴影颜色(可) 内侧阴影(可) |
| background-image | 背景图/渐变 |
| background-size | 指定背景图的大小(相对父元素) |
| background-origin | 指定了背景图像的位置区域(取值content-box,padding-box,border-box) |
| background-clip | 规定背景的绘制区域(取值content-box,padding-box,border-box) |
| text-shadow | 文章阴影 |
| text-overflow | 文本溢出 |
| word-wrap | 换行 |
| word-break | 单词拆分换行 |
二 盒模型(box-sizing)
border-box(怪异盒模型)
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding
width = content + border + padding
content-box(标准盒模型)
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽
width = content
三 弹性盒子
display:flex;
| 属性 | 描述 |
|---|---|
| flex-direction | 弹性容器中子元素的排序方式 |
| justify-content | 弹性盒子在x轴方向的对齐方式 |
| align-items | 弹性盒子在y轴方向的对齐方式 |
| flex-wrap | 弹性盒子的子元素超出父容器时是否换行 |
| align-conent | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 弹性盒子的子元素排序顺序 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子的子元素如何分配空间 |
四 grid 布局
display:grid;
| 属性 | 描述 |
|---|---|
| grid-template-columns | 用来指定行的宽度 |
| grid-template-rows | 用来指定行的高度 |
| grid-row-gap | 设置行与行之间的间隔 |
| grid-colunm-gap | 设置列与列之间的间隔 |
| grid-auto-flow | 划分网格，容器的子元素排序是按照先行后列，通过该属性可以自定义排序的顺序 |
| justify-items | 设置单元格内容的水平位置 |
| align-items | 设置单元格内容的垂直位置 |
| justify-content | 整个内容区域在容器里面的水平位置 |
| align-content | 整个内容区域在容器里面的垂直位置 |
| grid-colunm-start | 左边框所在的垂直网格线 |
| grid-colunm-end | 右边框所在的垂直网格线 |
| grid-row-start | 上边框所在的水平网格线 |
| grid-row-end | 下边框所在的水平网格线 |
五 css3 transform、transition、animation
// 水平垂直居中
.box {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
transform:变形，改变
在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale、以及矩阵变形matrix
旋转：rotate() 顺时针旋转给定的角度，允许负值rotate(30deg
扭曲：skew()元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）参数：skew(30deg,20deg)
缩放：scale()放大或缩小，根据给定的水平线（x轴）和垂直线（y轴）参数：scale(2,3)
移动：translate()平移，传入的x,y值，代表x轴和y轴平移的距离
改变起点位置 transform-origin: bottom left
所有的2D方法组合在一起：
transform：rotate旋转|scale缩放|skew扭曲|translate移动|matrix矩阵变形
transform: 45deg 1 30deg 30deg 100% 100%;
.box {
transition:all .5s;
}
transition: 允许css属性在一定的时间区间内平滑的过渡（过渡动画）、
transition作用是指定了某一个属性（width、left、height、transform）在两个值之间如何过渡
如果某一个元素指定了transition,那么当属性改变时就会按照transition指定的方式进行过渡，动画就这样产生了
transition 主要包含四个属性值：
(1) 执行变换的属性 transition-property: all | width | left | height | transform;
(2) 变换持续的时间 transition-duration:.2s;
(3) 在延续时间段，变换的速率变换：
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
linear（匀速变化）
ease（低俗开始，然后加快，快结束的时候再放慢）
ease-in（低速开始）
ease-out（低速结束）
ease-in-out（低俗开始，低速结束）
(4) 变换延迟时间 transition-delay
transition 动画的执行需要事件的触发，例如单击、失去焦点、获得焦点
语法： transition: property duration timing-function delay;
.box {
width:200px:
height:300px
backgorund:red;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
@keyframes mymove {
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
animation 跟 transition 一样 也是通过改变某个属性，在两个值之间过渡来实现动画
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-timing-funtion:linear（匀速变化） ease（低俗开始，然后加快，快结束的时候再放慢） ease-in（低速开始） ease-out（低速结束） ease-in-out（低俗开始，低速结束） steps()
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画需要多少秒执行完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔 |
| animation-iteration-count | 定义动画的播放次数 |
| animation-direction | 指定是否应该轮流反向播放动画 |
| animation-fill-mode | 规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式 |
| animation-play-state | 指定动画是否正在运行或已暂停 |
六 媒体查询
@media mediatype and|not|only (max-width: 500px) {
}
//根据不同的媒体使用不同的stylesheet
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
| 值 | 说明 |
|---|---|
| and | 用于将多个媒体查询规则组合成单条媒体查询 |
| not | 用于否定媒体查询，如果不满足这个条件则返回true，否则返回false |
| only | 仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用 |
| ，(逗号) | 用于将多个媒体查询合并为一个规则 |
七 回流和重绘
回流：改变页面元素的大小、位置、是否隐藏都会引起回流
重绘：如果只改变外观风格，不影响布局会引发重绘
八 css有哪些元素可以继承
字体属性、文本属性、color、background-color、visibility、display、opacity、cursor
九 css 实现宽度自适应100%，宽高16:9的比例的矩形
第一步计算宽度，假设宽100%，那么高为h=9/16=56.25%
第二步 设置padding-bottom方法实现矩形
<style>
.box {
width: 80%;
}
.scale {
width: 100%;
padding-bottom: 56.25%;
height: 0;
position: relative;
}
.item {
width: 100%;
height: 100%;
background-color: aquamarine;
position: absolute;
}
</style>
<div class="box">
<div class="scale">
<p class="item">这是一个16：9的矩形</p>
</div>
</div>
十 图片等比缩放
.img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
文章参考
https://www.cnblogs.com/cythia/p/10894598.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
