搜索到
4
篇与
的结果
-
数据库 要清空名为 cx_video 的数据库表，你可以使用 SQL 语句。具体的 SQL 语句取决于你使用的数据库管理系统（如 MySQL、PostgreSQL、SQLite 等），但通常可以使用以下语法：DELETE FROM cx_video;或者，如果你想要更高效地清空表并重置自增主键（如果有的话），可以使用：TRUNCATE TABLE cx_video;语法解释：DELETE FROM cx_video;DELETE 是一个 SQL 语句，用于从表中删除数据。FROM 关键字后面跟的是要删除数据的表名。这个语句会删除 cx_video 表中的所有行，但表的结构和约束仍然保留。TRUNCATE TABLE cx_video;TRUNCATE 是一个 SQL 语句，用于快速删除表中的所有行。TABLE 关键字后面跟的是要清空的表名。与 DELETE 不同，TRUNCATE 通常不会逐行删除数据，而是直接释放数据页，因此在处理大量数据时效率更高。TRUNCATE 还会重置自增列的计数器（如果有的话）。注意事项：在执行这些操作之前，请确保你有足够的权限，并且在删除数据之前备份重要数据，因为这些操作是不可逆的。如果 cx_video 表中有外键约束，使用 TRUNCATE 可能会失败，必须先删除相关的外键约束或使用 DELETE。 -
移动端布局 code here...教学内容移动布局原理1. 重要术语(1) 术语序号名称描述1像素图像显示最小单位,PPI(像素分辨率)2DPR设备像素比 = 设备像素 / CSS 像素3视口可视窗口 viewport,分布局/视觉/理想三类2. 三种视口描述三种视口类型是人为的划分序号名称描述1布局视口Layout viewport设备无关, 通常默认980px,显示完整网页2视觉视口visual viewport设备相关,用户手机屏幕可见部分,通过缩放查看全部3理想视口idea viewport不必缩放就可查看全部,针对移动端进行布局3. 解决方案视口属性:<meta name="viewport" content="width=device-width, initial-scale=1.0" />序号属性值描述1width=device-width布局视图 = 视觉视图2initial-scale=1.0视觉视图 = 理想视图移动端布局单位很多,经典的百分比,em 等,但目前主流单位是: rem + vw,也称"rem-vw`解决方案4. 推荐 vscode 插件名称: px to rem & rpx,原名为cssrem自动将px换算为rem须在插件中设置1rem = ...px,默认为16px,通常设置为1rem=100px以方便计算5. 操作步骤布局前,必须先确定 1rem = ?, 1vw =?5.1 1vw = ?选择某款手机做为理想视口的基础,如iPhone11: 375px100vw = 100% = 375px, 所以 1vw = 3.75px5.2 1rem = ?1rem 默认为游览器字号16px推荐: 1rem = 100px1rem不要在<html>中写死, 应该通过100vw计算出来5.3 总结序号属性值描述11vw = 3.75px以iPhone6/11屏幕宽度为基准21rem = 100vw / 3.75即1rem = 100px, 方便计算
-
flex,grid布局 # 教学内容 ## 1. Flex 布局 ### 1.1 必知术语 | 序号 | 术语 | 描述 | | ---- | -------- | ----------------------------------------------------------- | | 1 | 弹性容器 | 拥有 display:flex/inline-flex 属性,使用 flex 弹性布局的区块 | | 2 | 弹性项目 | 弹性容器的"子元素" | | 3 | 主轴 | 弹性项目排列时参考的轴线,有水平和垂直二种 | | 4 | 交叉轴 | 与主轴垂直的布局参考线 | ### 1.2 flex 容器属性 | 序号 | 属性 | 描述 | | ---- | --------------- | ------------------------------ | | 1 | `display` | 元素显示类型(内部和外部) | | 2 | `flex-flow` | 主轴方向与项目是否允许换行 | | 3 | `place-content` | 容器剩余空间在项目之间进行分配 | | 4 | `place-items` | 项目在交叉轴上的对齐方式 | 常用属性值演示: (1) `display` | 序号 | 属性 | 描述 | | ---- | ------------- | ----------------------- | | 1 | `flex` | 外部块级,内部子元素弹性 | | 2 | `inline-flex` | 外部行内,内部子元素弹性 | > 默认外部为块级, 即`display: block-flex`与`display:flex`同义 > 外部内联: 指元素宽度自动收缩到内容宽度,多个该元素会同行显示 (2) `flex-flow` > `flex-flow`,是 `flex-direction`,`flex-wrap`属性的简化 | 序号 | 属性 | 描述 | | ---- | --------------- | ---------------------- | | 1 | `row nowrap` | 主轴水平, 不换行(默认) | | 2 | `row wrap` | 主轴水平, 允许换行 | | 3 | `column nowrap` | 主轴垂直, 不换行 | | 4 | `column wrap` | 主轴垂直,允许换行 | (3) `place-content` > 以最常见的从左到右水平排列为例,即起始线从左侧开始 | 序号 | 属性 | 描述 | | ---- | --------------- | ---------------------------------------- | | 1 | `start` | `左对齐`: 空间在所有项目的右侧(默认值) | | 2 | `end` | `右对齐`: 空间在所有项目的左侧 | | 3 | `center` | `水平居中`: 空间在所有项目二端平均分配 | | 4 | `space-between` | `二端对齐`: 空间在除二端元素之外平均分配 | | 5 | `space-around` | `分散对齐`: 空间每个项目二侧平均分配 | | 6 | `space-evenly` | `平均对齐`: 空间在每个项目之间平均分配 | (4) `place-items` > 以最常见的从上到下垂直排列为例,即起始线从顶部开始 | 序号 | 属性 | 描述 | | ---- | --------- | -------------------------------------- | | 1 | `stretch` | `拉伸`: 默认值, 自动拉伸成`等高列` | | 2 | `start` | `顶对齐`: 项目从交叉轴`起始线`开始排列 | | 3 | `end` | `底对齐`: 项目从交叉轴`终止线`开始排列 | | 4 | `center` | `居中对齐`: 项目在交叉轴中居中显示 | ### 1.3 flex 项目属性 | 序号 | 属性 | 描述 | | ---- | ------------ | ---------------------------- | | 1 | `place-self` | 交叉轴上对齐某个项目 | | 2 | `flex` | 项目在主轴中的绽放因子与宽度 | | 3 | `order` | 项目在主轴上的顺序 | (1) `place-self` > 在块方向和内联方向上对齐单个项目,flex 特指交叉轴 > 是`align-self`,`justify-self`合并简写 | 序号 | 属性 | 描述 | | ---- | --------- | -------------------------------------- | | 1 | `stretch` | `拉伸`: 默认值, 自动拉伸成`等高列` | | 2 | `start` | `顶对齐`: 项目从交叉轴`起始线`开始排列 | | 3 | `end` | `底对齐`: 项目从交叉轴`终止线`开始排列 | | 4 | `center` | `居中对齐`: 项目在交叉轴中居中显示 | (2) `flex` > 设置项目在主轴上的缩放因子与计算宽度 > `flex: flex-grow flex-shrink flex-basis` 2.1 单值语法 | 序号 | 属性 | 描述 | | ---- | ------------ | -------------------------------------- | | 1 | `flex: 1` | 等价`flex: 1 1 auto`, 自动在主轴上收缩 | | 2 | `flex: 10em` | `flex-basis:10em`,项目宽度,覆盖`width` | 2.2 双值语法 | 序号 | 属性 | 描述 | | ---- | -------------- | ------------------------------------------ | | 1 | `flex: 1 2` | 等价`flex: 1 2 auto`,主轴按 1:2 分配给项目 | | 2 | `flex: 1 10em` | `flex: 1 1 10em`,项目宽度,覆盖`width` | 2.3: 三值语法 | 序号 | 属性 | 描述 | | ---- | ---------------- | ------------------------------ | | 1 | `flex: 0 1 auto` | 默认值, 不放大,可缩小,宽度自动 | | 2 | `flex: auto` | `flex: 1 1 auto`,全响应式 | | 3 | `flex: none` | `flex: 0 0 auto`,非响应式 | (3) `order` > 规则 | 序号 | 属性 | 描述 | | ---- | ----------- | ------------------------------ | | 1 | `order 0` | 默认值, 显示顺序与源码顺序一致 | | 2 | `order: 2` | 显示在`<2`的右侧 | | 3 | `order: -2` | 允许负数 | > 了解更多: <https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox> --- ## 2. Grid 布局 ### 2.1 必知术语 | 序号 | 术语 | 描述 | | ---- | -------- | -------------------------------------------------------- | | 1 | 网格容器 | 拥有 display: grid/inline-grid 属性,使用 grid 布局的区块 | | 2 | 网格项目 | 网格容器的"子元素" | | 3 | 单元格 | 每个项目所在的空间, 在容器布局单元,对用户不可见 | | 4 | 网格区域 | 由一个或多个单元格构成, 可容纳一个或外个项目 | ### 2.2 Grid 容器属性 | 序号 | 属性 | 描述 | | ---- | ------------------------------ | ---------------------------- | | 1 | `display` | 元素显示类型(内部和外部) | | 2 | `grid-template-rows / columns` | 设置显式网格 | | 3 | `grid-auto-rows / columns` | 设置隐式网格行高/列宽 | | 4 | `grid-auto-flow` | 设置项目在容器中排列方向 | | 5 | `gap` | 设置轨道间隙 | | 6 | `place-content` | 容器空间在项目中的分配方式 | | 7 | `place-items` | 单元格空间在项目中的分配方式 | 常用属性值演示: (1) `display` | 序号 | 属性 | 描述 | | ---- | ------------- | ---------------------------- | | 1 | `grid` | 外部块级,内部子元素 网格布局 | | 2 | `inline-flex` | 外部行内,内部子元素网格布局 | (2) `grid-template-rows / columns`: 显式网格 | 序号 | 属性值 | 描述 | | ---- | ------------------------------------- | -------------------------------------- | | 1 | `auto` | 默认值,单列多行,按源码顺序垂直排列 | | 2 | `50px 60px 100px` | 指定行/列的固定宽度 | | 3 | `1fr 2fr 1fr` | `fr`比例, 行/列按比例占据全部空间 | | 4 | `10% auto minmax(3em, 10em)` | 支持相对/绝对单位和最大小最小值 | | 5 | `repeat(3, 1fr)` | `1fr 1fr 1fr`简写 | | 6 | `repeat(2, 20em 1fr)` | `20em 1fr 20em 1fr`简写 | | 7 | `repeat(2, 20em 1fr)` | `20em 1fr 20em 1fr`简写 | | 8 | `repeat(auto-fit, minmax(50px,1fr))` | 最小 50px,空间足够会发尽量充满 | | 9 | `repeat(auto-fill, minmax(50px,1fr))` | 最小 50px,空间足够也不会放大 | | 10 | `fit-content(200px)` | 等价于`minmax(auto,max-content/200px)` | 难点分析: css /* auto-fit: 容器自动收容到内容宽度,没有剩余空间 */ grid-template-columns: repeat(auto-fit, 100px); /* 容器不会自动收缩,如果内容不足会产生剩余空间 */ grid-template-columns: repeat(auto-fill, 100px); /* 经常与minmax()配合使用,实现响应式布局 */ /* 项目最小100px,空间足够会自动伸展到全部可用空间 */ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 项目最小100px,但不会自动伸展,哪怕空间足够 */ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 所以, auto-fill 与 minmax配合意义不大, 不如直接使用单值 */ (3) `grid-auto-rows / columns`: 隐式网格 > 该属性描述了在网格容器之外的项目应该占据的`行高/列宽` > 究竟是`行高`还是`列宽`,由`grid-auto-flow`属性决定 | 序号 | 属性值 | 描述 | | ---- | --------------------------- | ---------------------------------- | | 1 | `auto` | 默认值,单列多行,按源码顺序垂直排列 | | 2 | `100px / 1fr` | 指定行/列的固定宽度 | | 3 | `min-content / min-content` | `fr`比例, 行/列按比例占据全部空间 | | 4 | `minmax(100px,1fr` | 支持相对/绝对单位和最大小最小值 | (4) `grid-auto-flow`: 排列方向 > 该属性描述了在网格容器之外的项目应该占据的`行高/列宽` > 究竟是`行高`还是`列宽`,由`grid-auto-flow`属性决定 | 序号 | 属性值 | 描述 | | ---- | -------------- | --------------------------------------- | | 1 | `row` | 默认值,水平/行方向排列,空间不足换行显示 | | 2 | `column` | 垂直/列方向排列,空间不足换列显示 | | 3 | `row dense` | 行方向排列,尽量紧凑排列不浪费空间 | | 4 | `column dense` | 列方向排列, 尽量紧凑排列不浪费空间 | (5) `gap`: 轨道间隙 > 与`margin`不一样,该间隙仅存在于轨道之间 > `gap: row-gap column-gap`简写 | 序号 | 属性值 | 描述 | | ---- | --------------- | -------------------------- | | 1 | `gap: 0` | 默认值, 间隙 | | 2 | `gap: 10px 5px` | 行轨间隙 10px,列轨间隙 5px | | 3 | `gap: 1em` | 行与列间隙相等,都是 1em | (6) `place-content` > 所有项目在"容器"中的对齐方式, 即剩余空间在项目之间的分配方式 > 属性生效前提: 容器中存在剩余空间 > `place-content: 块/垂直方向 内联/水平方向` | 序号 | 属性 | 描述 | | ---- | --------------- | ---------------------------------------- | | 1 | `start start` | `左对齐`: 空间在所有项目的右侧(默认值) | | 2 | `end end` | `右对齐`: 空间在所有项目的左侧 | | 3 | `center center` | `水平居中`: 空间在所有项目二端平均分配 | | 4 | `center` | 二值相同,可只写一个 | | 5 | `start end` | 垂直向上, 水平居右 | | 6 | `space-between` | `二端对齐`: 空间在除二端元素之外平均分配 | | 7 | `space-around` | `分散对齐`: 空间每个项目二侧平均分配 | | 8 | `space-evenly` | `平均对齐`: 空间在每个项目之间平均分配 | (7) `place-items` > 所有项目在"单元格"中的对齐方式, 即剩余空间在单元格之间的分配方式 > 属性生效前提: "单元格"中存在剩余空间,即项目设置了`width/height` > 语法:`place-items:垂直方向 水平方向` | 序号 | 属性 | 描述 | | ---- | --------------- | -------------------------------------- | | 1 | `start start` | `左对齐`: 空间在所有项目的右侧(默认值) | | 2 | `end end` | `右对齐`: 空间在所有项目的左侧 | | 3 | `center center` | `水平居中`: 空间在所有项目二端平均分配 | | 4 | `center` | 二值相同,可只写一个 | | 5 | `start end` | 垂直向上, 水平居右 | ### 2.3 Grid 项目属性 (1) `grid-row / column` > 语法:`grid-row/column: 行或列起始线 / 行或列终止线或跨越的行或列数量` | 序号 | 属性 | 描述 | | ---- | ----------------- | ----------------------------------------------- | | 1 | `auto` | 默认占据一个单元格,可不写 | | 2 | `1 / 3` | 起始编号`1`, 终止编号`3` | | 3 | `2 / span 3` | 起始编号`2`, 跨越`2`列或列空间 | | 4 | `span 2` | 省去第 1 个参数,从当前位置开始,占据二个单元空间 | | 5 | `span 2 / span 2` | 垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域 | (2) `grid-area` > 语法:`grid-area: 行起始 / 列起始 / 行结束 / 列结束` > 与`grid-row/column`相比,`grid-arwa`是二维的 | 序号 | 属性 | 描述 | | ---- | ------------------------- | ----------------------------------------------- | | 1 | `auto` | 默认值, 由浏览器根据项目数量自动分配 | | 2 | `3 / 1 / 5 / 3` | 创建一个由`3 / 1 / 5 / 3`四个编号构成的空间 | | 3 | `1 / 1 / span 3 / span 2` | 从 1 行 1 列开始,占据 3 行 2 列 | | 4 | `span 2 / span 2` | 垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域 | | 5 | `span 3` | 跨 3 行,其它默认 | (2) `place-self` > 语法:`place-self: 垂直方向 水平方向` > 设置某个项目,在单元格中的对齐方式 | 序号 | 属性 | 描述 | | ---- | ------------------------- | ------------------------------------ | | 1 | `auto` | 默认值, 由浏览器根据项目数量自动分配 | | 2 | `start end` | 垂直居上,水平居右 | | 3 | `1 / 1 / span 3 / span 2` | 从 1 行 1 列开始,占据 3 行 2 列 | | 4 | `center center` | 垂直,水平均居中 | | 5 | `center` | 二值相同,可只写一个 | > 了解更多: <https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout>
-
Markdown语法 code here... * @Description: * @Version: 2.0 * @Author: haiyangcc * @Date: 2022-03-16 20:30:44 * @LastEditors: haiyangcc * @LastEditTime: 2023-06-05 03:55:57 markdown 语法1. 标题# level 1 headline ## level 2 headline ### level 3 headline #### level 4 headline ##### level 5 headline ###### level 6 headline2. 列表2.1 无序列表item1item2item3subItem3-1subItem3-2subItem3-32.2 有序列表item1item2item3subItem3-1subItem3-2subItem3-33. 代码单行: const box = document.querySelector('#box")多行namespace core; class Demo { // ... }4. 表格idnameemailsalary1H老师H@qq.com1234562S老师s@qq.com55555553Y老师Y@qq.com6666665. 图片> 语法: 链接:深海远洋: http://www.shyy.vip
