02-CSS3

CSS3

新增盒模型属性

• border-radius：设置圆角，设置百分比是以自身为单位
  • 值1：四角
  • 值1 值2：左上右下角，右上左下角
  • 值1 值2 值3：左上角，右上和左下角，右下角
  • 值1 值2 值3 值4：左上角，右上角，右下角，左下角
• box-shadow：设置盒阴影
  • 值1：影子水平偏移量
  • 值2：影子垂直偏移量
  • 值3：模糊度，不能为负数，默认为0
  • 值4：影子的尺寸，默认为0px与元素一样大
  • 值5：影子的颜色，默认透明
  • 值6：内外阴影，默认外阴影，inset为内阴影

新增样式属性

背景样式

• background-clip：背景裁剪
  • border-box：背景被裁剪到边框，默认
  • padding-box：背景被裁剪到内边距
  • content-box：背景被裁剪到内容区
• background-origin：背景图片偏移锚点位置
  • border-box：边框左上角，默认
  • padding-box：内边距左上角
  • content-box：内容区左上角
• background-size：背景图片大小，有两个值，水平方向上和垂直方向上，百分比是以盒子为准，只写一个值另一个默认为auto会自动等比例缩放
  • cover：填充整个盒子
  • contain：显示整张图片
• background-image：可以设置多张背景图片，用逗号分隔URL函数，在前面的层级高，用来制作带水印的图片
• background-color：可以设置多个背景颜色，用逗号分隔颜色，在前面的层级高，通过渐变函数能制作特殊的背景
• background：简写，不区分先后顺序，建议颜色 url() no-repeat 水平偏移 垂直偏移，其他的还是分开写

渐变函数

• 渐变函数只能用于背景颜色和背景图片；
• 至少有两个颜色
• 省略渐变宽度默认第一个0%，最后一个100%，中间每个颜色宽度平均分配，若有不符合从小到大的顺序的，将按照边界值算
• 第一个和最后一个比较特殊，是从自己过渡到自己的颜色，所以若不是默认值则会是自己的颜色；

线性渐变

函数名	描述
linear-gradient([direction,]...color [渐变宽度])	渐变方向是钟表方向，也可以是to 方位词1 方位词2决定渐变方向，默认从上到下180deg；
repeating-linear-gradient([direction,]...color [渐变宽度])	重复线性渐变，与普通线性渐变一样，只不过若不将所有渐变宽度用完，则会重复颜色渐变，直到所有渐变宽度用完

径向渐变

函数名	描述
radial-gradient([圆心位置,][渐变形状 渐变尺寸,]...color [渐变宽度])	默认圆心在盒子中间，若是具体数值则参照盒子定位，若是百分比则参照盒子的宽度，渐变形状和渐变尺寸默认是`ellipse closest-corner	farthest-corner椭圆形状和最近角|最远角，因为此时最近角和最远角是一样的，渐变形状还可以设置为circle圆，渐变方向还可以设置为closest-side最近边和farthest-side`最远边
repeating-radial-gradient([圆心位置,][渐变形状 渐变尺寸,]...color [渐变宽度])	重复径向渐变渐变，与普通径向渐变一样，只不过若不将所有渐变宽度用完，则会重复颜色渐变，直到所有渐变宽度用完

文本样式

• text-shadow：文本阴影
  • 值1：影子水平偏移量
  • 值2：影子垂直偏移量
  • 值3：影子模糊度，不能为负，默认为0
  • 值3：影子颜色，默认前景色
• word-break：文本断开规则，换行规则
  • break-all：该换行就换行，英文会断开单词，中文会不会将标点放在单独一行，和正常一样
  • keep-all：中文标点符号华换行，英文空格和连字符换行
• word-wrap:break-word：英文单词会断开，中文无效果
• text-overflow：文本溢出，一定要配合overflow:hidden使用
  • clip：溢出裁剪
  • ellipsis：溢出省略号显示，需要在配合white-space:nowrap使文字不换行

字体样式

• 自定义字体

  @font-face{	/*自定义规则，字体声明*/
    font-family:"fontName";	/*为自定义字体起名*/
    src:url("font.woff") format("woff");
    /*url引入字体文件，format说明字体文件格式*/
    /*
    常见的字体格式
    后缀	类型
    *.eot	embedded-opentype	ie浏览器专用的嵌入式字体格式	，ie浏览器支持
    *.woff woff	ttf或otf的压缩版本，web open font format简写，现代浏览器都支持
    *.ttf	truetype	windows和mac系统字体	，safari浏览器、苹果和安卓系统
    *.otf	opentype	ttf格式基础上的字体
    *.svg	svg	矢量图字体	，其他浏览器和苹果系统
    */
    /*一般将常用字体格式放上面，*/
  }
  

CSS3变形

• transform：声明变行，属性值可以是一个或多个变形函数，用空格隔开
• transform-origin:x y z：设置变化参考点，默认是50% 50% 0，可以使用百分比、具体值、也可以是方位词

特点：不会影响其他元素，原位置保留，类似相对定位，默认

2D变形

函数名	描述	参数说明
rotate(angle)	几何中心旋转	旋转角度，正数顺时针，单位deg默认0度
translate(X,Y)	相对于左上角平移	平移长度，正数向右和下，百分比参照自身宽度和高度，若只有一个参数则是水平方向
scale(X,Y)	几何中心缩放	水平和垂直缩放系数，若只有一个参数则是等比例缩放，默认是1
skew(Xangle,Yangle)	几何中心扭曲	水平和垂直斜切角度，正数是逆时针，单位deg默认0度，若只有一个参数则是水平方向

3D变形

函数名	描述	参数说明
rotate3d(x,y,z,angle)	3d旋转	x、y、z是绕不同坐标轴旋转的程度，0-1之间的数字，angle是旋转角度，参数不允许省略
translate3d(X,Y,Z)	3d平移	平移长度，正数是向右、下、屏幕外，参数不允许省略
scale3d(X,Y,Z)	3d缩放	三个方向的缩放系数，参数不允许省略

矩阵变换

• matrix(a, b, c, d, tx, ty)：变化矩阵如下，要注意的是这个2d变化矩阵是3d变化矩阵的转置矩阵

$$2d的 \left[ \begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{matrix} \right]=3d的 \left[ \begin{matrix} a & b & 0 & 0 \\ c & d & 0 & 0 \\ 0 & 0 & 1 & 0 \\ tx & ty & 0 & 1 \\ \end{matrix} \right]$$

• matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)：变化矩阵如下

$$\left[ \begin{matrix} a1 & a2 & a3 & a4\\ b1 & b2 & b3 & b4\\ c1 & c2 & c3 & c4\\ d1 & d2 & d3 & d4 \end{matrix} \right]$$

CSS3过渡

注意

• 过渡一定要有事件发生才能发生过渡效果
• 在事件选择器中的写过渡，只有到来的这个时间段有效果，在普通选择器中写过渡，到来和回去的时候都有效果

• transition-property：设置要过渡的属性，可以是all也可以是具体的属性名，多个用逗号隔开，默认是all
• transition-duration：设置过渡持续时间，单位秒（s）或毫秒（ms），默认0
• transition-timing-function：设置过渡时间曲线
  • linear：线性过渡，匀速
  • ease：平滑过渡，由慢到快（加速度不一样），默认
  • ease-in：由慢到快（加速度一致）
  • ease-out：由快到慢（加速度一致）
  • ease-in-out：慢快慢（加速度一致）
  • steps(步数[,start|end])：进步函数，第二个参数可省默认end，可通过长时间短步数观察end和start的区别
  • cubic-bezier()：贝塞尔曲线运动函数，0-1之间的四个数
• transition-delay：设置过渡延时，单位秒或毫秒，默认0
• transition:property duration timing-function delay：简写，注意顺序

CSS3动画

• 关键帧

@keyframes name{	/*像函数一样，指定关键帧动画的名字*/
  0%{/*css过渡样式*/}	/*from等价于0%*/
  100%{/*css过渡样式*/}	/*to等价于100%*/
}

• animation-name：调用的动画名称

• animation-duration：动画持续时间，默认0

• animation-timing-function：动画时间曲线，与过渡时间曲线一致，请参照过渡动画时间曲线

• animation-delay：动画延时，默认0

• animation-iteration-count：动画迭代次数

  • infinite：无限次
  • 具体次数，默认1次

• animation-direction：动画方向

  • normal：正方向
  • reverse：反方向
  • alternate：先正在反交替执行，必须循环次数大于一次才有效果
  • alternate-reverse：先反在正交替执行，必须循环次数大于一次才有效果

• animation-fill-mode：设置动画播放前后动画效果是否可见（动画初始和结束状态与元素状态不一致时效果明显）

  • none：动画不改变元素状态
  • forwards：保留最后一帧动画
  • backwards：延时期间使用动画中的第一帧
  • both：即使用第一帧又使用最后一帧

• animation-play-state：设置动画状态

  • paused：暂停动画
  • running：运行，默认

• animation：简写，动画名称和持续时间是必须的，写在最前面；若只有一个时间则是持续时间，两个时间，则第一个时间是持续时间第二个是延时时间；其他的无序管顺序

• will-change:要过渡的属性名：只有3d动画才能使用GPU加速，适当的使用该属性可以提升动画渲染的效率，一般使用js来控制该属性

FlexBox

使用display:flex设置为块级弹性容器或display:inline-flex设置为行内弹性容器

弹性容器的子元素就是弹性项，要注意的是只是子元素是弹性项，而孙元素及后代的元素不是弹性元素，并且子元素的float、clear和vertical-align属性将失效

一个元素可以既是弹性容器又是弹性项，所以可以嵌套定义

弹性容器样式

• flex-direction：主轴方向
  • row：从左到右，默认
  • row-reverse：从右到左
  • column：从上到下
  • column-reverse：从下到上
• flex-wrap：容器中的弹性项换行规则
  • nowrap：不换行
  • wrap：自动换行
  • wrap-reverse：自动换行后交叉轴方向翻转
• flex-flow：上两个属性的简写属性，没有顺序要求
• justify-content：主轴上元素在主轴方向的排列方式（理解为元素在水平方向排列）
  • flex-start：主轴起边对齐
  • flex-end：主轴终边对齐
  • center：主轴居中对齐
  • space-around：主轴两端对齐，每个弹性项的空白都是一样的，所以首尾元素的贴边空白比中间元素的空白的少一半
  • space-between：主轴两端对齐，首尾元素贴边，其他元素被空白平均围绕在弹性项的周围
  • space-evenly：主轴两端对齐，空白平均围绕在弹性项的周围
• align-items：主轴上元素在交叉轴方向的排列方式（理解为元素在垂直方向排列）
  • stretch：伸展对齐，保证同一主轴上的元素大小一致，默认
  • flex-start：交叉轴起边对齐
  • flex-end：交叉轴终边对齐
  • center：交叉轴居中对齐
  • baseline：文字基线对齐
• align-content：交叉轴上的多个主轴排列方向（理解为主轴线的的排列方式）
  • flex-start：交叉轴起边对齐，默认
  • flex-end：交叉轴终边对齐
  • center：交叉轴居中对齐
  • space-around：交叉轴两端对齐，每个主轴的空白都是一样的，所以首尾主轴元素的贴边空白比中间主轴元素的空白的少一半
  • space-between：交叉轴两端对齐，首尾元素贴边，其他元素被空白平均围绕在弹性项的周围
  • space-evenly：交叉轴两端对齐，空白平均围绕在弹性项的周围

弹性项样式

• flex-grow：伸展系数，默认为0不伸展
• flex-shrink：收缩系数，默认为1，若设置为0不收缩
• flex-basis：元素在主轴上的基础长度，默认auto参考元素设置的宽高
• flex：上述三个属性的简写属性，顺序要求flex-grow、flex-shrink、flex-basis
• order：弹性项会按照此属性设置的值大小来排列顺序，数值越小越靠前，默认0
• align-self：用来覆盖弹性容器设置的align-items属性，设置自己的在交叉轴方向上的排列方式

理解对齐方式属性

• 对于justify-content、align-items和align-content来说，都是对齐属性
• justify前缀代表的是主轴方向（默认水平方向），align前缀代表交叉轴方向（默认垂直方向）
• content后缀代表的是当容器内容部分的出现剩余空间时的排列方式，items后缀代表的是当前项相对与其他项目的对齐方式
• 对于网格布局也是如此

GridBox

使用display:grid设置为块级网格容器或display:inline-grid设置为行内网格容器

弹性容器的子元素就是网格项，要注意的是只是子元素是网格项，而孙元素及后代的元素不是网格元素，并且子元素的float、display: inline-block、display: table-cell、vertical-align和column-*属性将失效

一个元素可以既是网格容器又是网格项，所以可以嵌套定义

网格容器样式

• grid-template-columns：划分每一列的宽度，用空格隔开，可以是百分比和具体值，也使用fr单位表示所占的份数，也可以使用repeat()和minmax()函数
• grid-template-rows：划分每一行的高度，用空格隔开，可以是百分比和具体值，也使用fr单位表示所占的份数，也可以使用repeat()和minmax()函数
• grid-auto-columns：与grid-template-columns用法一致但是只有一个参数，当超过设置的网格个数时自动添加的网格列宽，若不设置此属性则会以内容大小来决定超过设置的网格大小
• grid-auto-rows：与grid-template-rows用法一致但是只有一个参数，当超过设置的网格个数时自动添加的网格行高，若不设置此属性则会以内容大小来决定超过设置的网格大小
• grid-row-gap：设置行间距，默认是0
• grid-column-gap：设置列间距：默认是0
• grid-gap：设置行列间距的简写属性，顺序要求：grid-row-gap、grid-column-gap，若只写一个值，则行列间距相等
• grid-auto-flow：元素放置顺序
  • row：先行后列，默认
  • column：先列后行
  • dense：紧密放置，尽可能的不会出现空位
• justify-items：元素相对于自己单元格的水平对齐方式
  • stretch：伸展对齐
  • start：始边对齐（左对齐）
  • end：终边对齐（右对齐）
  • center：居中对齐
• align-items ：元素相对于自己单元格的垂直对齐方式
  • stretch：伸展对齐
  • start：始边对齐（上对齐）
  • end：终边对齐（下对齐）
  • center：居中对齐
• justify-content：单元格的水平对齐方式
  • start：起边对齐（左对齐），默认
  • end：终边对齐（右对齐）
  • center：居中对齐
  • space-around：两端对齐，每个单元格的空白都是一样的，所以首尾单元格的贴边空白比中间单元格的空白的少一半
  • space-between：两端对齐，首尾元素贴边，其他元素被空白平均围绕在单元格的周围
  • space-evenly：两端对齐，空白平均围绕在单元格的周围
• align-content：单元格的垂直对齐方式
  • start：起边对齐（上对齐），默认
  • end：终边对齐（下对齐）
  • center：居中对齐
  • space-around：（上下两端）两端对齐，每个单元格空白都是一样的，所以首尾单元格的贴边空白比中间单元格的空白的少一半
  • space-between：（上下两端）两端对齐，首尾单元格贴边，其他元素被空白平均围绕在单元格的周围
  • space-evenly：（上下两端）两端对齐，空白平均围绕在单元格的周围

网格项样式

• align-self：用来覆盖网格容器设置的align-items属性，设置自己的在单元格水平方向上的排列方式
• justify-self：用来覆盖网格容器设置的justice-items属性，设置自己的在单元格垂直方向上的排列方式
• grid-column-start：左边框所在的网格线，从一开始否则无效，可接受span n表示从当前位置跨越n个网格元素
• grid-column-end：右边框所在的网格线，从一开始否则无效，可接受span n表示从当前位置跨越n个网格元素
• grid-column：上两个属性的简写属性，采用/分隔，表示从那个网格线跨越到那个网格线,同样可以使用span n
• grid-row-start：上边框所在的网格线，从一开始否则无效，可接受span n表示从当前位置跨越n个网格元素
• grid-row-end：下边框所在的网格线，从一开始否则无效，可接受span n表示从当前位置跨越n个网格元素
• grid-row：上两个属性的简写属性，采用/分隔，表示从那个网格线跨越到那个网格线，同样可以使用span n

网格标签模板

在容器中通过grid-template-areas属性定义模板，该模板使用类似矩阵样式的字符串形式，每一个双引号字符串都代表一行，例如：

body {
      display: grid;
      grid-template-areas:
        "header header header"	/*设置header标签的元素会自动占据三个单元格，无需做跨行操作*/
        "body1 body2 body3"
        "foot foot foot";
    }

在网格项中通过grid-area属性指定该项所属标签中的哪一个位置，这里不需要加双引号，就像标签是变量一样，例如：

.item {
      grid-area: body2;
    }

媒体查询

语法

mediaType and (query)：多个条件可以使用多个and连接，若是或则使用逗号连接而不是or在最前面使用not则是对整个and语句的否定，也就是说使用逗号是分开的

• 媒体类型
  • all：全部设备，默认，不写时and也不能写
  • print：打印设备
  • screen：屏幕设备
  • speech：屏幕阅读器设备
• 查询语句
  • max-width：小于等于该宽度值
  • min-width：大于等于该宽度值
  • orientation：屏幕旋转方向
    • landscape：横屏
    • portrait：竖屏

使用方式

注意使用顺序，一般小屏幕优先

1. link和style标签上使用media属性

<link rel="stylesheet" href="style.css" media="screen and (min-width : 768px)">

<style media="screen and (min-width : 768px)">
/* code */
</style>

2. CSS中使用@media和@import时

@import url("style.css") screen and (min-width: 768px);

@media screen and (min-width: 768px){
      /* code */
}