七、移动端
1、viewport
<!--
- width=device-width：宽度为设备宽度
- initial-scale=1.0：初始缩放比
- user-scalable=no：禁止缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
2、多列布局
.content {
/* 显示的列数 */
column-count: 5;
/* 调整列间距 */
column-gap: 30px;
/* 列边框 */
column-rule: 2px solid red;
/*
- balance：列高度统一
- auto：列高度把盒子占满
*/
/* column-fill: auto; */
/* 调整列宽 */
/* column-width: 500px; */
}
.content > h1 {
/* 横跨所有列 */
column-span: all;
text-align: center;
}
.content > div {
/* 禁止盒子内部折行（多列布局方式瀑布流案例） */
break-inside: avoid;
}
3、响应式布局
/*
1、常用设备：
- all：所有设备
- screen：显示器、笔记本、移动端等设备
2、关键字：
- and
- not
- only
3、屏幕方向：
- 竖屏：@media screen and (orientation: portrait) { }
- 横屏：@media screen and (orientation: landscape) { }
*/
@media all and (min-width: 1000px) {
#app {
background: red;
}
}
@media all and (min-width: 500px) and (max-width: 1000px) {
#app {
background: green;
}
}
@media all and (max-width: 500px) {
#app {
background: blue;
}
}
4、px、em、rem
* px：浏览器默认字体大小为16px，最小字体大小为12px
* em：相对于父元素的字体大小，父元素字体大小 = 1em
* rem：相对于根元素的字体大小，html元素字体大小 = 1rem
5、vw、vh
* vw：100vw = 可视区窗口宽度
* vh：100vh = 可视区窗口高度
6、补充
/* .container::-webkit-scrollbar：可指定容器 */
::-webkit-scrollbar {
display: none;
}
ul {
list-style: none;
display: flex;
overflow: auto;
}
ul > li {
/* 项目不收缩 */
flex-shrink: 0;
}
- width: 100vw;和width: 100%;的区别
* 没有滚动条：100vw = 100%
* 有滚动条：100vw = 100% + 滚动条宽度
八、渐变、过渡、动画
1、渐变
.container {
/*
1、支持多颜色渐变
2、支持方向：
- to (top | right | bottom | left)
- to (top left | top right | bottom right | bottom left)
- 数字deg（0deg在bottom位置，数值顺时针方向递增）
3、控制颜色显示比例：颜色后设百分比
*/
background-image: linear-gradient(0deg, red, green, blue);
}
.container {
/*
1、形状可取值：
- ellipse：椭圆
- circle：圆
2、渐变的大小可取值：
- closest-side：最近边
- farthest-side：最远边
- closest-corner：最近角
- farthest-corner：最远角
3、中心点可取值：
- center
- X轴% Y轴%
4、控制颜色显示比例：颜色后设百分比
*/
background-image: radial-gradient(ellipse farthest-corner at center, red 50%, green 50%);
}
* 重复线性渐变
- background-image: repeating-linear-gradient(red, green, yellow 25%);
* 重复径向渐变
- background-image: repeating-radial-gradient(red, green, yellow 25%);
2、过渡
.container .transform {
/*
1、复合属性：
- transition-property：过渡属性（all表示所有属性）。可取多值（transition不可以）
- transition-duration：持续时间
- transition-delay：延迟时间
- transition-timing-function：动画函数（二次贝赛尔曲线）
2、display和transition有冲突
*/
transition: all 1s 0s linear;
}
.container:hover .transform {
/*
1、移动方向：
- 水平移动：translateX(X轴)
- 垂直移动：translateY(Y轴)
- 对角移动：translate(X轴, Y轴)
2、position与transform（推荐）对比：
- 通过定位（合成图层）过渡，会增加浏览器回流重排
- 通过变换（独立图层）过渡，会减少浏览器回流重排
*/
transform: translate(300px, 0);
}
.container .transform {
/*
2、可取值：
- X轴百分比或px Y轴百分比或px
- left、right、top、bottom、center组合
*/
transform-origin: left top;
}
.container:hover .transform {
/*
1、缩放方向：
- 水平缩放：scaleX(X轴)
- 垂直缩放：scaleY(Y轴)
- 对角缩放：scale(X轴, Y轴)
*/
transform: scale(2, 2);
}
.container:hover .transform {
/*
1、旋转轴：
- X轴：rotateX(角度)
- Y轴：rotateY(角度)
- Z轴：rotate(角度)等价rotateZ(角度)
2、旋转方向：
- 正值：顺时针
- 负值：逆时针
*/
transform: rotate(360deg);
}
.container:hover .transform {
/* 多属性值使用要注意使用顺序的影响，scale会带着整个轴缩放，rotate会带着整个轴旋转 */
transform: translate(100px, 0) scale(0.5, 0.5) rotate(360deg);
}
.container:hover .transform {
/*
1、倾斜方向：
- skewX(X轴角度)：拽右下角，往右移动，形成角度
- skewY(Y轴角度)：拽右下角，往下移动，形成角度
- skew(X轴角度, Y轴角度)：拽右下角，往右下移动，形成角度
*/
transform: skew(45deg, 45deg);
}
3、关键帧动画
.container {
/*
2、复合属性：
- animation-name：动画名称
- animation-duration：持续时间
- animation-timing-function：动画函数（linear、ease、steps()等）
~ steps(1, start)等价step-start，跳过开始帧
~ steps(1, end)等价step-end，end是默认值，跳过结束帧
- animation-delay：延迟时间
- animation-iteration-count：循环次数（infinite无限）
- animation-direction：运动方向（normal、reverse、alternate、alternate-reverse）
- animation-play-state：动画状态（running、paused）
*/
animation: taiChi 3s linear infinite;
/*
3、可取值：
- none：默认值
- forwards：动画结束后，最后一帧样式应用在目标元素
- backwards：动画结束后，第一帧样式应用在目标元素
*/
animation-fill-mode: none;
}
.container:hover {
animation-play-state: paused;
}
/*
1、规定变化发生的时间可用关键词：from、to、百分比
*/
@keyframes taiChi {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
4、3d
<div class="scene">
<div class="substance">
<div style="background: red;">1</div>
<div style="background: orange;transform: rotateX(90deg);transform-origin: top">2</div>
<div style="background: yellow;transform: rotateY(90deg);transform-origin: right">3</div>
<div style="background: green;transform: rotateY(-90deg);transform-origin: left">4</div>
<div style="background: blue;transform: rotateX(-90deg);transform-origin: bottom">5</div>
<div style="background: purple;transform: translateZ(200px)">6</div>
</div>
</div>
<style>
.scene {
width: 600px;
height: 600px;
border: 1px solid black;
margin: 30px auto;
display: flex;
justify-content: center;
align-items: center;
/*
- flat：2d场景
- preserve-3d：3d场景
*/
transform-style: preserve-3d;
/* 景深 */
perspective: 900px;
}
.substance {
width: 200px;
height: 200px;
transition: all 1s linear;
position: relative;
transform-style: preserve-3d;
}
.substance > div {
width: 200px;
height: 200px;
font-size: 64px;
opacity: 0.5;
position: absolute;
text-align: center;
line-height: 200px;
}
.scene:hover .substance {
/*
- transform: translate3d(0, 0, 200px);等价transform: translateZ(200px);
- transform: rotate3d(0, 0, 1, 45deg);等价transform: rotateZ(45deg);
- transform: scale3d(1, 1, 2);等价transform: scaleZ(2);
*/
transform: scale3d(1, 1, 2);
}
</style>
九、网格布局
<div class="container">
<div>黄婷婷</div>
<div>孟美岐</div>
<div>姜贞羽</div>
<div>张婧仪</div>
<div>鞠婧祎</div>
<div>佟丽娅</div>
</div>
<style>
.container {
width: 600px;
height: 600px;
border: 1px solid black;
/*
1、可取值：
- grid：块级网格
- inline-grid：行内块级网格
*/
display: grid;
/*
2、规定列属性（grid-template-columns）和行属性（grid-template-rows）
- px：200px 200px 200px
- 百分比：33.33% 33.33% 33.33%
- repeat：repeat(3, 33.33%)
- repeat auto-fill：repeat(auto-fill, 33.33%)
- fr：1fr 1fr 1fr
- auto：auto auto auto
- minmax：minmax(200px, 200px) minmax(200px, 200px) minmax(200px, 200px)
*/
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/*
3、简写：
- grid-column-gap：列间距
- grid-row-gap：行间距
*/
grid-gap: 10px 10px;
/*
4、区域：与子元素的grid-area属性配合使用
*/
/*grid-template-areas: "a a c" "a a f" "g h i";*/
/*
5、可取值：
- row：横排列
- column：纵排列
*/
grid-auto-flow: row;
/*
6、网格在容器中的对齐方式，复合属性：
- justify-content
- align-content
*/
place-content: space-around space-around;
/*
7、项目在网格中的对齐方式，复合属性：
- justify-items
- align-items
*/
place-items: center center;
}
.container > div {
width: 50px;
height: 50px;
border: 1px solid black;
}
.container > div:nth-child(1) {
/*grid-area: a;*/
/*
8、功能与grid-template-areas一样：
- grid-column复合属性：
~ grid-column-start：列开始网格线
~ grid-column-end：列结束网格线
- grid-row复合属性：
~ grid-row-start：行开始网格线
~ grid-row-end：行结束网格线
*/
grid-column: 1/3;
grid-row: 1/3;
}
</style>
