扬州专注企业网站建设网页设计素材怎么算侵权

当前位置： 首页 > news >正文

扬州专注企业网站建设,网页设计素材怎么算侵权,网页设计学校网站制作,长治网站制作的网站CSS 主流布局进阶 前言一、CSS 还原 UI 设计1、Photoshop 还原 UI 设计#xff08;1#xff09;PhotoShop 下载安装#xff08;2#xff09;添加辅助线#xff08;3#xff09;尺寸、文字、颜色等信息的获取#xff08;4#xff09;切图操作 2、蓝湖 App 快速标注信息 … CSS 主流布局进阶 前言一、CSS 还原 UI 设计1、Photoshop 还原 UI 设计1PhotoShop 下载安装2添加辅助线3尺寸、文字、颜色等信息的获取4切图操作 2、蓝湖 App 快速标注信息 二、布局的尺寸与位置1、尺寸1CSS 盒模型2块级盒子与内联盒子3标准盒模型与怪异盒模型 2、位置1浮动与清除浮动2定位样式简介 3、其它1详解 display 属性2BFC 块级格式上下文3标签默认样式以及清除4书写模式与逻辑属性 三、flex 弹性布局1、flex 容器1主轴与交叉轴2改变轴方向 —— flex-direction3换行 —— flex-wrap4改变主轴与换行的缩写 —— flex-flow5主轴对齐 —— justify-content6交叉轴对齐 —— align-content7交叉轴对齐 —— align-items 2、flex 项目1扩展比例 —— flex-grow2收缩比例 —— flex-shrink3初始化主轴值 —— flex-basis4扩展、缩小、初始值的简写 —— flex5项目排序 —— order6单独项目垂直对齐 —— align-self 四、grid 网格布局1、grid 布局的基本概念1基本概念2fr 单位 2、grid 容器1定义网格显式的行和列 —— grid-template-rows grid-template-columns2网格命名及合并网格 —— grid-template-areas3网格定义、命名、合并的缩写 —— grid-template4网格间隙及简写 —— grid-row-gap、grid-column-gap grid-gap5容器对齐方式及简写 —— justify-content、align-content place-content6网格对齐方式及简写 —— justify-items、align-items place-items7隐式网格的定义 —— grid-auto-rows、grid-auto-columns8repeat() 和 minmax()9指定项目排列方式 —— grid-auto-flow 3、grid 项目1指定项目占据的区域 —— grid-column-start、grid-column-end、grid-row-start、grid-row-end2指定项目占据区域的简写 —— grid-row、grid-column grid-area3项目的对齐方式 —— justify-self、align-self、place-self 五、移动端端适配布局1、移动端概念1像素2视口viewport3移动端常用单位px/%/em/rem/vw/vh 2、移动端 rem 布局1rem 布局原理2VSCode 中 px 转 rem 插件的安装与使用3postcss-px2rem 插件的使用 3、移动端 vw 布局1vw 布局2px-to-vw 插件的安装与使用 六、响应式布局1、媒体查询语法1媒体类型2媒体特性3逻辑操作符4link 标签方式 2、媒体查询的编写位置及顺序3、响应断点阈值的设定4、响应式栅格系统5、响应式交互实现 总结 前言 CSS 主要分为三个方向特效、工程化、布局特效动画、3D、渐变等工程化sass、less、postcss 等布局Flex、Grid、响应式布局等 一、CSS 还原 UI 设计 1、Photoshop 还原 UI 设计 1PhotoShop 下载安装 PhotoShop2020 Mac 下载链接: https://pan.baidu.com/s/1S1rO1MgmZmTorWxX0qUOcQ 提取码: heu9PhotoShop2020 Win 下载链接: https://pan.baidu.com/s/19ktONg_UFyXitX8XI6boyw 提取码: 1cl5 2添加辅助线 点击“视图”菜单勾选“标尺”然后在图片编辑界面上面和左侧就会出现标尺通过从上或从左的标尺位置向下或向右拖拉就能拉出标尺线 3尺寸、文字、颜色等信息的获取 尺寸大小的测量 点击“窗口”勾选“信息”然后在出现的信息面板点击“面板选项”将“标尺单位”改为“像素”配合选框工具或者其它工具就可以在信息面板查看尺寸大小 颜色的测量 通过吸管工具去拾取颜色就可以在拾取器上得到颜色值 文字信息的获取 点击文字会选中对应的图层点击字符面板就可以看到文字相关信息 4切图操作 点击编辑菜单找到“首选项”或者点击 PhotoShop 图标选择“首选项”然后点击“增效工具”勾选“启用生成器”点击文件菜单点击“生成”选择“图像资源”就可以对需要的图标图层进行重命名图片后缀然后在与当前文件相同的目录下就会出现图层对应的图片图标了也可以在命名的前面加上百分比和空格就可以得到原图对应缩放比例的图片例如200% icon1.png 2、蓝湖 App 快速标注信息 蓝湖在线切图https://lanhuapp.com/ 二、布局的尺寸与位置 1、尺寸 1CSS 盒模型 在 CSS 中所有元素都被一个个的“盒子box”装着即大盒装小盒盒子的组成content 内容上图188.742x51.875部分、padding 内边距上图 padding 部分、border 边框上图 border 部分、margin 外边距上图 margin 部分 ⚠️CSS 盒模型的注意点 padding 不能为负值而 margin 可以为负值背景色的设置会包含 content、padding、border 三个非 margin 的区域即 padding 和 border 的背景色和 content 背景色一样margin-top 会出现传递的现象即当子盒子设置 margin-top 时会导致父盒子产生效果而不是子盒子产生效果。 解决方案父盒子设置 border 属性子盒子改为使用 padding-top 属性使用 BFC 格式化上下文margin 上下重叠问题即两个上下排列的盒子如果上面的盒子设置 margin-bottom 属性下面的盒子设置 margin-top 属性会导致实际上两个盒子之间的外边距值为 margin-bottom 和 margin-top 两者相比的较大值而不是想象中的相加 解决方案只针对上面的盒子或者下面的盒子两者之一加想产生的实际距离值BFC 也能解决 2块级盒子与内联盒子 在 CSS 中主要分为两种盒子——块级盒子block box和行级盒子inline box块级盒子块级盒子会独占一行例如div、p、h系列 …内联盒子行内盒子会在一行排列直到当前行不能容纳导致换行例如span、a、strong … 块级盒子的特性 独占一行支持所有样式不写宽度时默认与父容器的宽度相同所占区域是一个矩形 内联盒子的特性 盒子不会产生换行有些样式不支持例如width、height 等不写宽度时宽度由内容决定内联盒子之间会产生间隙 解决方案标签之间不换行将父容器的 font-size 设置为 0设置浮动将其变为块级盒子 display:block; 3标准盒模型与怪异盒模型 标准盒模型是当容器设置宽高时所设的宽高就是实际 content 部分的宽高怪异盒模型当容器使用 box-sizing: border-box; 时容器设置的宽高变为 content padding border 2、位置 1浮动与清除浮动 当元素被浮动时浮动的元素会脱离文档流根据设置 float 的值为向左或向右浮动的元素会向左或向右移动直到碰到父元素的内边界或者兄弟浮动元素的边界为止文档流文档流是元素在 Web 页面上的一种呈现方式按照出现的顺序进行排列 清除浮动 清除浮动的作用是使浮动元素的兄弟元素不受浮动的影响 BFC使用 clear 属性 // html div classbox1/div div classbox2/div// css .box1 {width: 100px;height:100px;background: red;float: left; } .box2 {width: 200px;height:200px;background: skyblue;// 清除浮动// 如果是左浮动可以使用 clear: left;// 如果是右浮动可以使用 clear: right;// 如果是想将左右浮动都清楚可以使用 clear: both;clear: both; }通过对空标签使用 clear 属性使用 .clearfix::after {} // 原理是使用空标签 clear: both; 只不过是通过 ::after 伪类的形式添加 // html div classbox1 clearfixdiv classbox2/div /div // css .box1 {width: 200px;border: 1px solid #333; } .box2 {width: 100px;height: 100px;background: skyblue;float: left; } /* 清除浮动 / .clearfix::after {content: ,display: block; // 将 ::after 添加的盒子变成块级盒子clear: both; // clear 属性清除浮动只能针对块级盒子对行内盒子不起作用 }⚠️浮动特性注意点 浮动的元素只会影响到后面元素的布局文本不会被浮动元素覆盖浮动元素具备行级盒子的特性宽度由内容决定浮动元素也具备块级盒子的特性支持所有样式浮动元素在一行排列不下时会自动换行 2定位样式简介 CSS 中的 position 属性用于指定一个元素在文档中的定位方式其中 top、right、bottom、left 则决定了该元素的位置position 属性的属性值static、relative、absolute、fixed、sticky  static 属性值默认情况  relative 属性值相对定位是相对于原位置的偏移不会脱离文档流不会影响其它元素布局  absolute 属性值绝对定位的元素会脱离文档流具备行级盒子的特性——宽度由内容决定具备块级盒子的特性——支持所有样式绝对定位元素相对于 最近的非 static 外层元素进行定位若这样的元素不存在则相对于可视区定位而不是 body  fixed 属性值固定定位与绝对定位相似会脱离文档流具备行级盒子的特性——宽度由内容决定具备块级盒子的特性——支持所有样式但是会固定在可视区中不受外层元素的影响  sticky 属性值粘性定位被认为是相对定位与固定定位的混合元素在跨域特定阈值前为相对定位之后为固定定位 ⚠️定位特性注意点 绝对定位的 z-index 值默认为 0 3、其它 1详解 display 属性 在 CSS 中 display 属性表示“显示框类型”即不同的盒模型就是把块级盒子转位内联盒子或者把内联盒子转位块级盒子 display-outside外部值 外部值就是定义自身元素的外部表现而不影响其内的子元素block 值表示块级盒子如div、p …inline 值表示内联盒子如span、a、i …run-in 值还处在实验性质的属性浏览器支持性不好 display-inside内部值 和外部值相反内部值就是定义子元素布局的flow-root 值一个 BFC 的块级盒子table 值带有内部表格的块级盒子flex 值带有内部弹性布局的块级盒子grid 值带有内部网格布局的块级盒子flow 值ruby 值subgrid 值 display-listitem列表值 list-item 值该属性值是生成一个容纳内容和单独的列表行内元素盒的块级盒子 display-internal属性值 一些盒 table 布局、ruby 搭配一起控制页面布局的属性值table-row-group 值table-header-group 值table-footer-group 值table-row 值table-cell 值table-column-group 值table-column 值table-caption 值ruby-base 值ruby-text 值ruby-base-container 值ruby-text-container 值 display-box显示值 contents 值只影响其内容的样式生效比如字体大小、文字颜色等但像背景色、边框是不会生效的none 值从盒子树中移除包括其所有后代元素 display-legacy混合值 inline-block 值对外表现成内联盒子对外表现成块级盒子inline-table 值对外表现成内联盒子对子元素表现成表格盒子inline-flex 值对外表现成内联盒子对子元素表现成弹性盒子inline-grid 值对外表现成内联盒子对子元素表现成网格盒子 display-global全局值 inherit 值继承父元素的 display 属性initial 值不管父元素如何设定恢复到浏览器最初时的 display 属性unset 值unset 混合了 inherit 和 initial 。如果父元素设定就用父元素的如果父元素没设定就用浏览器的缺省设定 2BFC 块级格式上下文 BFC 即块级格式化上下文Block Formatting Contexts它是 W3C CSS2.1 规范中的一个概念具有 BFC 特性的元素可以看作是一个独立的容器容器里面的布局不会影响到外面小千世界、中千世界、大千世界 BFC 的生成条件 float 的值不是 noneposition 的值不是 static 或者 relativeoverflow 的值不是 visibledisplay 的值是 inline-block、table-cell、flex、table-caption 或 inline-flex BFC 的应用 解决 margin 传递和 margin 上下塌陷的问题解决浮动时父元素高度塌陷的问题。让父元素 BFC例overflow: hidden; 3标签默认样式以及清除 一些 HTML 标签在浏览器中会有默认样式例如body 标签有 margin: 8px; ul 标签有 margin: 16px 0; 等等 清除标签默认样式 Reset CSShttps://meyerweb.com/eric/tools/css/reset/ / http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (public domain) /html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; } / HTML5 display-role reset for older browsers / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ;content: none; } table {border-collapse: collapse;border-spacing: 0; }Normalize CSShttp://necolas.github.io/normalize.css/Normalize CSS 比 Reset CSS 更优  保护有用的浏览器默认样式而不是完全去掉  修复浏览器自身的 bug并保证各浏览器的一致性使用 npm 下载 npm install normalize.css复制如下代码到项目 /! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // Document //** 1. Correct the line height in all browsers.* 2. Prevent adjustments of font size after orientation changes in iOS./html {line-height: 1.15; / 1 /-webkit-text-size-adjust: 100%; / 2 / }/ Sections //** Remove the margin in all browsers./body {margin: 0; }/** Render the main element consistently in IE./main {display: block; }/** Correct the font size and margin on h1 elements within section and* article contexts in Chrome, Firefox, and Safari./h1 {font-size: 2em;margin: 0.67em 0; }/ Grouping content //** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE./hr {box-sizing: content-box; / 1 /height: 0; / 1 /overflow: visible; / 2 / }/** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd em font sizing in all browsers./pre {font-family: monospace, monospace; / 1 /font-size: 1em; / 2 / }/ Text-level semantics //** Remove the gray background on active links in IE 10./a {background-color: transparent; }/** 1. Remove the bottom border in Chrome 57-* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari./abbr[title] {border-bottom: none; / 1 /text-decoration: underline; / 2 /text-decoration: underline dotted; / 2 / }/** Add the correct font weight in Chrome, Edge, and Safari./b, strong {font-weight: bolder; }/** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd em font sizing in all browsers./code, kbd, samp {font-family: monospace, monospace; / 1 /font-size: 1em; / 2 / }/** Add the correct font size in all browsers./small {font-size: 80%; }/** Prevent sub and sup elements from affecting the line height in* all browsers./sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline; }sub {bottom: -0.25em; }sup {top: -0.5em; }/ Embedded content //** Remove the border on images inside links in IE 10./img {border-style: none; }/ Forms //** 1. Change the font styles in all browsers.* 2. Remove the margin in Firefox and Safari./button, input, optgroup, select, textarea {font-family: inherit; / 1 /font-size: 100%; / 1 /line-height: 1.15; / 1 /margin: 0; / 2 / }/** Show the overflow in IE.* 1. Show the overflow in Edge./button, input { / 1 /overflow: visible; }/** Remove the inheritance of text transform in Edge, Firefox, and IE.* 1. Remove the inheritance of text transform in Firefox./button, select { / 1 /text-transform: none; }/** Correct the inability to style clickable types in iOS and Safari./button, typebutton, typereset, [typesubmit] {-webkit-appearance: button; }/** Remove the inner border and padding in Firefox.*/button::-moz-focus-inner,

[typesubmit]::-moz-focus-inner {border-style: none;padding: 0; }/*** Restore the focus styles unset by the previous rule.*/button:-moz-focusring,

[typesubmit]:-moz-focusring {outline: 1px dotted ButtonText; }/*** Correct the padding in Firefox./fieldset {padding: 0.35em 0.75em 0.625em; }/** 1. Correct the text wrapping in Edge and IE.* 2. Correct the color inheritance from fieldset elements in IE.* 3. Remove the padding so developers are not caught out when they zero out* fieldset elements in all browsers./legend {box-sizing: border-box; / 1 /color: inherit; / 2 /display: table; / 1 /max-width: 100%; / 1 /padding: 0; / 3 /white-space: normal; / 1 / }/** Add the correct vertical alignment in Chrome, Firefox, and Opera./progress {vertical-align: baseline; }/** Remove the default vertical scrollbar in IE 10./textarea {overflow: auto; }/** 1. Add the correct box sizing in IE 10.* 2. Remove the padding in IE 10./[typecheckbox], [typeradio] {box-sizing: border-box; / 1 /padding: 0; / 2 / }/** Correct the cursor style of increment and decrement buttons in Chrome./[typenumber]::-webkit-inner-spin-button, [typenumber]::-webkit-outer-spin-button {height: auto; }/** 1. Correct the odd appearance in Chrome and Safari.* 2. Correct the outline style in Safari./[typesearch] {-webkit-appearance: textfield; / 1 /outline-offset: -2px; / 2 / }/** Remove the inner padding in Chrome and Safari on macOS./[typesearch]::-webkit-search-decoration {-webkit-appearance: none; }/** 1. Correct the inability to style clickable types in iOS and Safari.* 2. Change font properties to inherit in Safari./::-webkit-file-upload-button {-webkit-appearance: button; / 1 /font: inherit; / 2 / }/ Interactive //** Add the correct display in Edge, IE 10, and Firefox./details {display: block; }/** Add the correct display in all browsers./summary {display: list-item; }/ Misc //** Add the correct display in IE 10./template {display: none; }/** Add the correct display in IE 10.*/[hidden] {display: none; }4书写模式与逻辑属性 书写模式 大部分国家的阅读方式都是从左到右进行的但是也有一些国家的阅读方式是从右到左所以在做国际网站网页排版时就需要考虑阅读方式的问题书写模式 writing-mode 属性 定义了文本水平或垂直排布以及文本在块级元素的行进方向  horizontal-tb 值水平方向自上而下的书写方式  vertical-rl 值垂直方向自右向左的书写方式  vertical-lr 值垂直方向且自左向右的书写方式  sideways-rl 值内容垂直方向从上到下排列  sideways-lr 值内容垂直方向从下到上排列 逻辑属性 逻辑属性是从逻辑角度控制布局而不是从物理、方向或维度来控制物理属性和值常见的为width、height、left、top、right、bottom 等等逻辑属性和值是指start、end、inline-start、inline-end、block-start、block-end 等值。其中 inline 表示水平方向block 表示垂直方向。在不同的书写模式下inline 和 block 所代表的方向是会发生改变的 三、flex 弹性布局 弹性盒子是一种用于按行或按列布局元素的一维布局方式。元素可以扩大填充额外空间或者缩小以适应更小的空间若想将盒子设置为弹性盒子需要将 display 属性设置为 flex可以参考上面“详解 display 属性”小节flex 容器的属性只会对容器产生作用属性有flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-contentflex 项目的属性也只会对项目产生作用属性有order、flex-grow、flex-shrink、flex-basis、flex、align-self 1、flex 容器 1主轴与交叉轴 flex 布局的默认情况或者当设置 flex-direction 为 row 时项目以水平方向排列主轴方向就是水平方向交叉轴是垂直方向同理当设置 flex-direction 为 column 时项目以垂直方向排列主轴方向就是垂直方向交叉轴是水平方向主轴与交叉轴互相垂直
2改变轴方向 —— flex-direction row 值默认值主轴是水平方向从左到右row-reverse 值主轴水平方向从右到左column 值主轴垂直方向从上到下column-reverse 值主轴垂直方向从下到上 3换行 —— flex-wrap nowrap 值默认不换行   若项目设置宽度当总项目宽度超出容器宽度项目也不会换行而是缩小项目宽度以适应容器宽度当项目宽度缩小到最小且不能再继续缩小而总项目宽度依旧超过容器宽度则会导致溢出wrap 值换行   若容器高度超出换行后项目的总高度则换行成多少行就将容器高度均分为多少份每行项目排列在该份高度的顶部wrap-reverse 值反向换行   当主轴方向是水平时默认是从上向下换行当使用该属性值换行是从下往上换行   当主轴方向是垂直时默认是从左向右换行当使用该属性值换行是从右往左 4改变主轴与换行的缩写 —— flex-flow flex-flow 是 flex-direction 与 flex-wrap 的缩写形式flex-flow: [flex-direction] [flex-wrap] 5主轴对齐 —— justify-content flex-start 值默认起始方向对齐flex-end 值终点方向对齐center 值居中对齐space-around 值每个项目的外边距都相等相邻项目之间的距离为两倍边距space-between 值靠近容器边界的项目贴合容器相邻项目的间隔相等space-evenly 值项目与容器边界或者与相邻项目之间的间距相等 6交叉轴对齐 —— align-content align-content 是针对交叉轴整体的对齐方式当不换行的情况下align-content 是不生效的stretch 值默认拉伸   当不设置宽高时默认会自动拉伸flex-start 值起始方向对齐flex-end 值终点方向对齐center 值居中对齐space-around 值space-between 值space-evenly 值 7交叉轴对齐 —— align-items align-items 是针对交叉轴每行的对齐方式stretch 值默认拉伸   当不设置宽高时默认会自动拉伸flex-start 值起始方向对齐flex-end 值终点方向对齐center 值居中对齐baseline 值基线对齐 2、flex 项目 1扩展比例 —— flex-grow 默认值是 0表示不占用剩余的空白间隙扩展自己的宽度最小值就是 0不能为负数如果只有一个项目且比例值大于等于 1就占满剩余的所有空间如果只有一个项目且比例值为小数所占空间 项目空间 (容器空间 - 项目空间) * 比例值如果有多个项目且项目总比例大于等于1则单个项目所占空间 当前项目空间 (当前项目比例 / 总比例) * (容器空间 - 项目总空间)如果有多个项目且项目总比例小于1则单个项目所占空间 当前项目空间 (容器空间 - 项目总空间) * 当前项目比例 // html div classboxdiv1/divdiv2/div /div// css /*** 示例1:* 当项目1扩展比例为1项目2扩展比例为1时总比例值大于等于1* 项目1所占空间 200 * 1/(1 1) 200 300* 项目2所占空间 200 * 1/(1 1) 100 200/ /* 示例2:* 当项目1扩展比例为 3项目2扩展比例为 2 时总比例值大于等于1* 项目1所占空间 200 (500 - 200 - 100) * 3/(2 3) 320* 项目2所占空间 100 (500 - 200 - 100) * 2/(2 3) 180//* 示例3:* 当项目1扩展比例为 0.3项目2扩展比例为 0.8 时总比例值大于等于1* 项目1所占空间 200 (500 - 200 - 100) * 0.3/(0.3 0.8) 254.55* 项目2所占空间 100 (500 - 200 - 100) * 0.8/(0.3 0.8) 245.45/ /* 示例4:* 当项目1扩展比例为 0.3项目2扩展比例为 0.7 时总比例值大于等于1* 项目1所占空间 200 (500 - 200 - 100) * 0.3/(0.3 0.7) 260* 项目2所占空间 100 (500 - 200 - 100) * 0.7/(0.3 0.7) 240/ /* 示例5:* 当项目1扩展比例为 0.3项目2扩展比例为 0.4 时总比例值小于1* 项目1所占空间 200 (500 - 200 - 100) * 0.3 260* 项目2所占空间 100 (500 - 200 - 100) * 0.4 180/.box {width: 500px;height: 300px;border: 1px solid red; } .box div:nth-of-type(1) {width: 200px;height: 100px;border: 1px solid green;flex-grow: 1; } .box div:nth-of-type(2) {width: 100px;height: 100px;border: 1px solid green;flex-grow: 1; }2收缩比例 —— flex-shrink 默认值是 1表示 flex 容器空间不足时项目自动收缩以适应容器如果只有一个项目当收缩比例大于等于 1时项目所占空间 项目初始空间 - 容器空间如果只有一个项目当收缩比例值小于 1 时超出容器部分按比例收缩即所占空间 项目初始空间 - (项目初始空间 - 容器空间) * 收缩比例如果有多个项目且项目总比例大于等于1则单个项目所占空间 当前项目所占空间 - ((当前项目所占空间 * 当前项目所占比例) / (每个项目所占空间 * 每个项目所占比例) 之和) * 超出容器空间如果有多个项目且项目总比例小于1则单个项目所占空间 当前项目所占空间 - ((当前项目所占空间 * 当前项目所占比例) / (每个项目所占空间 * 每个项目所占比例) 之和) * (项目所占总比例 * 超出容器空间) // html div classmaindiv1/divdiv2/div /div// css /* 多个项目示例1:* 当项目1收缩比例为2项目2扩展比例为3时即总比例大于1* 项目1所占空间 400 - ((400 * 2)/(400*2 300*3)) * (400 300 -500) 305.88* 项目2所占空间 300 - ((300 * 3)/(400*2 300*3)) * (400 300 -500) 194.12/ /* 多个项目示例2:* 当项目1收缩比例为2项目2扩展比例为 0.3时即总比例大于1* 项目1所占空间 400 - ((400 * 2)/(400*2 300*0.3)) * (400 300 -500) 220.23* 项目2所占空间 300 - ((300 * 0.3)/(400*2 300*0.3)) * (400 300 -500) 279.77//* 多个项目示例3:* 当项目1收缩比例为0.3项目2扩展比例为 0.7时即总比例等于1* 项目1所占空间 400 - ((400 * 0.3)/(400*0.3 300*0.7)) * (400 300 -500) 327.27* 项目2所占空间 300 - ((300 * 0.7)/(400*0.3 300*0.7)) * (400 300 -500) 172.73//* 多个项目示例4:* 当项目1收缩比例为0.3项目2扩展比例为 0.1时即总比例小于1* 项目1所占空间 400 - ((400 * 0.3)/(400*0.3 300*0.1)) * ((0.3 0.1) * (400 300 -500)) 336* 项目2所占空间 300 - ((300 * 0.1)/(400*0.3 300*0.1)) * ((0.3 0.1) * (400 300 -500)) 284/ .main {width: 500px;height: 300px;background-color: skyblue;display: flex; }.main div:nth-of-type(1) {width: 400px;height: 100px;background-color: red;flex-shrink: 0.3; } .main div:nth-of-type(2) {width: 300px;height: 100px;background-color: green;flex-shrink: 0.1; }3初始化主轴值 —— flex-basis flex-basis 默认值是 auto指定了 flex 元素在主轴方向的初始大小flex-basis 优先级大于主轴方向的宽主轴水平或者高主轴垂直auto 值默认固定值例如200px百分比值例如100% 4扩展、缩小、初始值的简写 —— flex flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写flex: 1 的展开flex-grow: 1; flex-shrink: 1; flex-basis: 0%;flex: 0 的展开flex-grow: 0; flex-shrink: 1; flex-basis: 0%;flex: auto 的展开flex-grow: 1; flex-shrink: 1; flex-basis: auto; 5项目排序 —— order order 的默认值是 0用于改变某个项目的排序位置order 的值越小排序越靠前order 的值也可以为负数 6单独项目垂直对齐 —— align-self align-self 的默认值是 auto用于控制单独某一个 flex 项目的交叉轴对齐方式align-self 的值默认是和容器的 align-items 的值保持一致stretch 值默认拉伸   当不设置宽高时默认会自动拉伸flex-start 值起始方向对齐flex-end 值终点方向对齐center 值居中对齐baseline 值基线对齐 四、grid 网格布局 CSS 网格是一个用于 Web 的二维布局系统。网格布局可以把内容按照行和列的格式进行排版实现一些复杂的布局 1、grid 布局的基本概念 1基本概念 容器和项目 容器container和 flex 布局的容器一样采用网格布局的区域称为容器项目item容器中的每一个子项称为项目子项的子项不属于容器的项目 行和列 行row容器内水平方向的区域称为行类比于普通表格的行列column容器的垂直方向的区域称为列类比于普通表格的列 单元格 单元格cell行和列交叉的区域称为单元格类比于普通表格的单元格 间隙 间隙gap单元格之间的距离称为间隙可以类比于表格的border边框 网格线 网格线grid line用于划分单元格的线称为网格线水平网格线划分出行每两根水平网格线划分出一行垂直网格线划分出列每两根垂直网格线划分出一列网格线可以使用数字命名方式也可以自定义名称命名数字命名默认从左到右和从上到下分别为1、2、3、4 …例如一个 3x3 的网格线水平方向从左到右依次为1、2、3、4垂直方向从上到下依次为1、2、3、4 区域 区域area相邻单元格之间可以合并合并后的单元格称为区域 2fr 单位 frfraction的缩写是一种用来表示比例关系的单位例如有两个容器的宽度分别为 1fr 和 2fr表示第二个容器的宽度是第一个容器宽度的两倍 2、grid 容器 1定义网格显式的行和列 —— grid-template-rows grid-template-columns display: grid;在容器中将容器定义为网格布局grid-template-rows 属性用于定义网格的行grid-template-columns 属性用于定义网格的列定义行、列属性的属性值可以为fr、px、%、auto、rem 等等定义多少列就写多少列的属性值属性值之间用空格分隔同理定义多少行就写多少行的属性值属性值之间用空格分隔 // html div classcontainerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/divdiv9/div /div // css .container {width: 500px;height: 300px;background: skyblue;display: grid;// 定义行 3行第一行宽度 100px第二行宽度 100px第三行宽度 100pxgrid-template-rows: 100px 100px 100px;// 定义列 3列第一列宽度 100px第二列宽度 200px第二列宽度 200pxgrid-tempalte-columns: 100px 200px 200px; } .container div {background: red; }2网格命名及合并网格 —— grid-template-areas 使用命名方式定义网格区域使用时需要配合 grid-area 属性进行使用grid-template-areas 属性用于命名网格网格名称可以自定义合并网格只要将相邻的网格的名称命名相同就会合并对应位置的网格⚠️注意合并后的网格要形成一个矩形 // html div classcontainerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div /div // css .container {width: 300px;height: 300px;background: skyblue;display: grid;// 定义列 3列三列均分容器宽度每列占三分之一宽度grid-tempalte-rows: 1fr 1fr 1fr;// 定义行 3行三行均分容器宽度每行占三分之一高度 grid-template-columns: 1fr 1fr 1fr;// 例如将第一行的第一列及第二列合并将第三行的第一列、第二列及第三列合并grid-template-areas: a1 a1 a2a3 a4 a5a6 a6 a6; } .container div {background: green;border: 1px solid #000;box-sizing: border-box; } .container div:nth-of-type(1) {// 表示第一个值1所在div容器占 a1 区域grid-area: a1; } .container div:nth-of-type(2) { // 表示第一个值2所在div容器占 a2 区域grid-area: a2; } .container div:nth-of-type(3) { // 表示第一个值3所在div容器占 a3 区域grid-area: a3; } .container div:nth-of-type(4) { // 表示第一个值4所在div容器占 a4 区域grid-area: a4; } .container div:nth-of-type(5) { // 表示第一个值5所在div容器占 a5 区域grid-area: a5; } .container div:nth-of-type(6) { // 表示第一个值6所在div容器占 a6 区域grid-area: a6; }3网格定义、命名、合并的缩写 —— grid-template grid-template 属性是 grid-temolate-rows、grid-template-columns、grid-template-areas 属性的缩写即grid-template: grid-temolate-rows grid-template-columns grid-template-areas; grid-template: 命名11 命名12 … 命名1n 第一行的高度 命名21 命名22 … 命名2n 第二行的高度 …… 命名m1 命名m2 … 命名mn 第m行的高度 / 第一列的宽度 第二列的宽度 … 第n列的宽度 ;示例 grid-tempalte-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: a1 a1 a2 a3 a4 a5 a6 a6 a6; // 缩写为 grid-template: a1 a1 a2 1fr a3 a4 a5 1fr a6 a6 a6 1fr / 1fr 1fr 1fr;4网格间隙及简写 —— grid-row-gap、grid-column-gap grid-gap 用来设置元素行列之间的间隙大小推荐使用row-gap、column-gap、gap原因是加 grid 前缀的属性已经过时了而没有加 grid 前缀的在其它例如flex布局中也可以使用grid-row-gap 属性添加网格之间行间距grid-column-gap 属性添加网格之间列间距grid-gap 属性是 grid-row-gap 属性和 grid-column-gap 属性的缩写grid-gap: row-gap column-gap; 或者 gap: row-gap column-gap; // css .container {width: 300px;height: 300px;background: skyblue;display: grid;grid-template-rows: 1fr 1fr 1fr;grid-tempalte-columns: 1fr 1fr 1fr;/* grid-row-gap: 20px;grid-column-gap: 10px; // row-gap: 20px;column-gap: 10px; // grid-gap: 20px 10px; */gap: 20px 10px; }5容器对齐方式及简写 —— justify-content、align-content place-content 这些属性的对齐指的是所有网格在容器中的对齐方式stretch 值默认拉伸start 值起始位置对齐center 值居中对齐end 值终点对齐space-around 值每个项目两侧的边距相等且相邻项目之间的间隔为边距的两倍space-between 值项目之间的间隔相等靠近容器的项目贴合容器边界space-evenly 值项目之间的间隔相等且项目与容器边界的间隔等于项目之间的间隔place-content: align-content justify-content; 6网格对齐方式及简写 —— justify-items、align-items place-items 这些属性指定了项目在网格中的对齐方式这些属性的对齐指的是所有项目在单元格中的对齐方式stretch 值默认拉伸start 值起始位置对齐center 值居中对齐end 值终点对齐space-around 值每个项目两侧的边距相等且相邻项目之间的间隔为边距的两倍space-between 值项目之间的间隔相等靠近容器的项目贴合容器边界space-evenly 值项目之间的间隔相等且项目与容器边界的间隔等于项目之间的间隔place-items: align-items justify-items; 7隐式网格的定义 —— grid-auto-rows、grid-auto-columns 隐式网格有时候定义容器的项目数超出容器单元格的数目就会造成一部分项目溢出形成新的单元格溢出形成的网格称为隐式网格如果不定义隐式网格的大小浏览器就会默认以内容的宽高为隐式单元格的宽高隐式网格的定义和显式网格的定义相似 8repeat() 和 minmax() repeat(次数值) 方法表示相同数值的重复次数有一个可选值 auto-fillauto-fill 表示自动会根据容器大小进行调整minmax(minVal, maxVal) 方法表示设置最小和最大的范围 // 示例1: grid-template-columns: 100px 100px 100px; // 等价于 grid-template-columns: repeat(3, 100px);// 示例2: grid-template-columns: 150px 100px 100px; // 等价于 grid-template-columns: 150px repeat(2, 100px);// 示例3: grid-template-columns: 100px minmax(100px, 1fr) 100px;// 示例4: grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));9指定项目排列方式 —— grid-auto-flow row 值默认指定项目按行排列即按行从左到右排列column 值指定项目按列排列即按列从上到下排列row dense 值某些项目指定位置以后剩下的项目按“先行后列”尽量紧密排列column dense 值某些项目指定位置以后剩下的项目按“先列后行”尽量紧密排列 3、grid 项目 1指定项目占据的区域 —— grid-column-start、grid-column-end、grid-row-start、grid-row-end 表示 grid 项目所占的区域的起始和终止位置包括水平方向和垂直方向默认值是 auto当某个项目指定占据区域后其它未指定的项目按默认顺序排列 // html div classcontainerdiv1/div /div // css .container {width: 300px;height: 300px;background: skyblue;display: grid;grid-template-rows: 1fr 1fr 1fr;grid-tempalte-columns: 1fr 1fr 1fr; } .container div:nth-of-type(1) {background: red;grid-row-start: 2; // 垂直方向第2条水平网格线开始grid-row-end: 4; // 垂直方向第4条水平网格线结束grid-column-start: 2; // 水平方向第2条垂直网格线开始grid-column-end: 3; // 水平方向第3条垂直网格线结束 }也可以使用“span”关键字加数字的形式表示跨越多少个网格 // html div classcontainerdiv1/div /div // css .container {width: 300px;height: 300px;background: skyblue;display: grid;grid-template-rows: 1fr 1fr 1fr;grid-tempalte-columns: 1fr 1fr 1fr; } .container div:nth-of-type(1) {background: red;grid-row-start: 2; // 垂直方向第2条水平网格线开始grid-row-end: span 2; // 表示占据两行即从第2条水平网格线开始到第4条水平网格线结束grid-column-start: 2; // 水平方向第2条垂直网格线开始grid-column-end: span 1; // 表示占据一列即从第2条垂直网格线开始到第3条垂直网格线结束 }自定义命名网格线名称在定义网格时分别在每行或每列前后定义网格线名称 // html div classcontainerdiv1/div /div // css .container {width: 300px;height: 300px;background: skyblue;display: grid;grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];grid-tempalte-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4]; } .container div:nth-of-type(1) {background: red;grid-row-start: row2; // 垂直方向第2条水平网格线开始grid-row-end: span 2; // 表示占据两行即从第2条水平网格线开始到第4条水平网格线结束grid-column-start: col2; // 水平方向第2条垂直网格线开始grid-column-end: span 1; // 表示占据一列即从第2条垂直网格线开始到第3条垂直网格线结束 }2指定项目占据区域的简写 —— grid-row、grid-column grid-area 简写方式通过 / 作为分割grid-row: grid-row-start / grid-row-end;grid-column: grid-column-start / grid-column-end;grid-area 是 grid-row-start、grid-column-start、grid-row-end、grid-column-end 属性的缩写并且支持 grid-template-areas 设置网格名称即grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 3项目的对齐方式 —— justify-self、align-self、place-self 这些属性的对齐指的是某个项目在自己区域中的对齐方式stretch 值默认拉伸start 值起始位置对齐center 值居中对齐end 值终点对齐space-around 值每个项目两侧的边距相等且相邻项目之间的间隔为边距的两倍space-between 值项目之间的间隔相等靠近容器的项目贴合容器边界space-evenly 值项目之间的间隔相等且项目与容器边界的间隔等于项目之间的间隔place-self: align-self justify-self; // html div classcontainerdiv1/div /div // css .container {width: 300px;height: 300px;background: skyblue;display: grid;grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];grid-tempalte-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4]; } .container div:nth-of-type(1) {width: 50px;height: 50px;background: purple;grid-row-start: row2; // 垂直方向第2条水平网格线开始grid-row-end: span 2; // 表示占据两行即从第2条水平网格线开始到第4条水平网格线结束grid-column-start: col2; // 水平方向第2条垂直网格线开始grid-column-end: span 1; // 表示占据一列即从第2条垂直网格线开始到第3条垂直网格线结束justify-self: center;align-self: center; }五、移动端端适配布局 移动端适配是实现各种设备的等比适配让所有移动端设备看起来是相同的 1、移动端概念 1像素 分辨率 屏幕上的点每一个点称为物理像素分辨率 纵向的点数 x 横向的点数 物理像素(physical pixel) 也称为设备像素(dpdevice pixel) CSS 像素 也称为逻辑像素logical pixel或 设备独立像素dipdevice independent pixelCSS 像素是实际开发中使用的像素 设备像素比dpr 设备像素比dprdevice pixel ratiodpr 设备像素 / CSS像素缩放比是 1 的情况下dpi 2 表示 1 个CSS像素用 2x2个设备像素来绘制 标清屏和高清屏 标清屏是指设备像素与CSS像素一比一即 1 个CSS像素 1 个物理像素高清屏是指设备像素与CSS像素比大于 1 缩放 缩放改变的是 CSS 像素的大小放大1 个CSS像素 多 x 多 个物理像素缩小多 x 多 个CSS像素 1 个物理像素 PPI/DPI 屏幕英寸屏幕对角线的长度PPI每英寸的物理像素点PPI 屏幕宽的平方 屏幕高的平方开根号再除以屏幕英寸DPI每英寸的点 2视口viewport 视口宽度设置 // 一般这样写 meta nameviewport contentwidthdevice-width,initial-scale1,user-scalableno,maximum-scale1,minimum-scale1 // 下面这些是分开写 meta nameviewport contentinitial-scale1 meta nameviewport contentwidthdevice-width meta nameviewport contentmaximum-scale1,minimum-scale1JS 中获取视口宽度 console.log(window.innerWidth); console.log(document.documentElement.clientWidth); console.log(document.documentElement.getBoundingClientRect().width);var viewWidth window.innerWidth || document.documentElement.clientWidth || document.documentElement.getBoundingClientRect().width;JS 中获取设备像素比 dpr console.log(window.devicePixelRatio);3移动端常用单位px/%/em/rem/vw/vh px / % / em / rem / vw / vh 这些单位中除了 px 是固定单位其它都是相对单位em元素自身字体大小1 em 1 font-size即表示 1 个 em 等于它自身 font-size 的大小当自身没有设置 font-size 属性或 font-size 属性单位也为 em 时则会向父元素找 font-size: 12px; width: 5em; // 相当于宽为 5 x 12 60px height: 6em; // 相当于高为 6 x 12 72pxremrem 是相对根元素设置的 font-size即设置的是 html 的字体大小然后可以整个当前页面全局使用 html {font-size: 12px; } .box {width: 1rem; // 相当于宽为 1 x 12 12px }vw视口宽度1 vw 1%viewWidthvh视口高度1 vw 1%viewHeight 2、移动端 rem 布局 1rem 布局原理 remrem 是相对根元素设置的 font-size即设置的是 html 的字体大小然后可以整个当前页面全局使用 html {font-size: 16px; } .box {width: 2rem; // 相当于宽为 2 x 16 32px }2VSCode 中 px 转 rem 插件的安装与使用 px to rem 插件的安装 在 VSCode 扩展里搜索“px to rem” 点击“1”的设置图标然后选择“扩展设置” 第“1”部分是设置将 px 单位转为 rem 单位后保留几位小数第“2”部分是设置 1rem 等于多少 px在这里设置为与项目中的相同⚠️注意如果不同项目中设置的 1rem 等于的 px 值不相同则需要每次都改第“2”部分
px to rem 插件的使用 将需要转换的 CSS 代码选中然后 Mac 电脑按“option z”对选中 px 单位进行 rem 转换Win 电脑按“Alt z”对选中 px 单位进行 rem 转换
⚠️注意PS 中量取的数值是物理像素CSS 中设置的是逻辑像素所以需要对量取的值进行除以 2 3postcss-px2rem 插件的使用 postcss-px2rem 是一款在编译时自动将 px 单位转为 rem 单位的插件。在开发时可以直接使用 px 单位进行开发该插件会在底层将 px 单位转为 rem 单位postcss-px2rem 插件的安装 npm install -D postcss-px2remVue 项目中在 vue.config.js 文件进行配置使用remUnit 必须与设置的 1rem 等于多少 px 保持一致例如开发中 1rem 100px则设置 remUnit: 100 // vue.config.js const px2rem require(postcss-px2rem)const postcss px2rem({remUnit: 100 })module.exports {publicPath: ./,css: {loaderOptions: {postcss: {plugins: [postcss]}}} }动态设置根元素 html 中的 font-sizeVue 项目中在 index.html 文件动态设置根元素的字体大小 script// 这里的 100 表示 1rem 100px// baseSize 设置与 vue.config.js 中的 remUnit 值保持一致const baseSize 100function setRem() {// 相对于 1920px 像素获得一个缩放比例const scale document.documentElement.clientWidth / 1920document.documentElement.style.fontSize baseSize * Math.min(scale, 2) px}window.onresize function () {setRem()} /script3、移动端 vw 布局 1vw 布局 vw视口宽度1 vw 1%viewWidth 2px-to-vw 插件的安装与使用 安装插件 配置“3”表示保留3位小数可以自己根据需要改“375”表示 1vw 3.75px可以自己根据需要改 使用将需要转换的 CSS 代码选中然后 Mac 电脑按“option z”对选中 px 单位进行 rem 转换Win 电脑按“Alt z”对选中 px 单位进行 rem 转换 ⚠️注意px to rem 和 px-to-vw 两个插件不能同时使用在使用某一个之前需要将另一个禁用 六、响应式布局 响应式布局概念是指网页能自动识别屏幕宽度、并作出相应调整的网页设计响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验 1、媒体查询语法 1媒体类型 媒体类型Media Types描述设备的一般类型all适用于所有设备print适用于打印预览模式screen主要用于屏幕speech主要用于语音合成器 media 媒体类型 {}2媒体特性 媒体特性Media features描述了 user agent、输出设备、或是浏览器环境的具体特征widthviewport 的宽度heightview height 的高度aspect-ratioviewport 的宽高比orientationviewport 的旋转方向 // 大于等于 200px media (min-width: 200px) {} // 垂直 media (orientation: portrait) {} // 水平 media (orientation: portrait) {}3逻辑操作符 逻辑操作符logical operatorsnot、and、or、onlyand用于将多个媒体查询规则组合成单条媒体查询not用于否定媒体查询如果不满足条件则返回 true否则返回 falseor用逗号表示用于将多个媒体查询合并为一个规则only用于旧版浏览器识别媒体类型使用 // and media (min-width: 200px) and (max-width: 300px) {} // not media not screen and (min-width: 200px) {} // or media (max-width: 200px), (min-width:500px) {}4link 标签方式 通过 media 属性设置媒体查询类型和媒体特性 // a.css // b.csslink relstylesheet href./css/a.css media(max-width: 200px) link relstylesheet href./css/b.css media(min-width: 500px)2、媒体查询的编写位置及顺序 一般会将媒体查询添加到样式表的底部对 CSS 进行优先级的覆盖移动端 PC端 的适配原则即从小到大min-width 从小到大PC端 移动端 的适配原则即从大到小max-width 从大到小 /* 移动端 PC端/ media (min-width: 576px) {} media (min-width: 768px) {} media (min-width: 992px) {} media (min-width: 1200px) {}/* PC端 移动端**/ media (max-width: 1200px) {} media (max-width: 992px) {} media (max-width: 768px) {} media (max-width: 576px) {}3、响应断点阈值的设定 超小屏Extra small 576px小屏Small 576px-sm中屏Medium 768px-md大屏Large 992px-lg较大屏X-Large 1200px-xl超大屏XX-Large 1400px-xxl .font-size {font-size: 12px; } media (min-width: 576px) {.font-sm-size {font-size: 13px;} } media (min-width: 768px) {.font-md-size {font-size: 14px;} } media (min-width: 992px) {.font-lg-size {font-size: 16px;} } media (min-width: 1200px) {.font-xl-size {font-size: 18px;} } media (min-width: 1400px) {.font-xxl-size {font-size: 20px;} }4、响应式栅格系统 响应式栅格系统栅格布局 断点设定 // html div classrowdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/divdiv classcol-xxl-3 col-lg-4 col-sm-6col/div /div// css .row {background: #ddd;display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: 30px;grid-auto-rows: 30px; } .row div {background: #aaa;border: 1px solid #000;grid-area: auto/auto/auto/12; } .row .col-1 {grid-area: auto/auto/auto/1; } .row .col-2 {grid-area: auto/auto/auto/2; } .row .col-3 {grid-area: auto/auto/auto/3; } .row .col-4 {grid-area: auto/auto/auto/4; } .row .col-5 {grid-area: auto/auto/auto/5; } .row .col-6 {grid-area: auto/auto/auto/6; } .row .col-7 {grid-area: auto/auto/auto/7; } .row .col-8 {grid-area: auto/auto/auto/8; } .row .col-9 {grid-area: auto/auto/auto/9; } .row .col-10 {grid-area: auto/auto/auto/10; } .row .col-11 {grid-area: auto/auto/auto/11; } .row .col-12 {grid-area: auto/auto/auto/12; }media (min-width: 576px) {.row .col-sm-1 {grid-area: auto/auto/auto/1;}.row .col-sm-2 {grid-area: auto/auto/auto/2;}.row .col-sm-3 {grid-area: auto/auto/auto/3;}.row .col-sm-4 {grid-area: auto/auto/auto/4;}.row .col-sm-5 {grid-area: auto/auto/auto/5;}.row .col-sm-6 {grid-area: auto/auto/auto/6;}.row .col-sm-7 {grid-area: auto/auto/auto/7;}.row .col-sm-8 {grid-area: auto/auto/auto/8;}.row .col-sm-9 {grid-area: auto/auto/auto/9;}.row .col-sm-10 {grid-area: auto/auto/auto/10;}.row .col-sm-11 {grid-area: auto/auto/auto/11;}.row .col-sm-12 {grid-area: auto/auto/auto/12;} }media (min-width: 768px) {.row .col-md-1 {grid-area: auto/auto/auto/1;}.row .col-md-2 {grid-area: auto/auto/auto/2;}.row .col-md-3 {grid-area: auto/auto/auto/3;}.row .col-md-4 {grid-area: auto/auto/auto/4;}.row .col-md-5 {grid-area: auto/auto/auto/5;}.row .col-md-6 {grid-area: auto/auto/auto/6;}.row .col-md-7 {grid-area: auto/auto/auto/7;}.row .col-md-8 {grid-area: auto/auto/auto/8;}.row .col-md-9 {grid-area: auto/auto/auto/9;}.row .col-md-10 {grid-area: auto/auto/auto/10;}.row .col-md-11 {grid-area: auto/auto/auto/11;}.row .col-md-12 {grid-area: auto/auto/auto/12;} }media (min-width: 992px) {.row .col-lg-1 {grid-area: auto/auto/auto/1;}.row .col-lg-2 {grid-area: auto/auto/auto/2;}.row .col-lg-3 {grid-area: auto/auto/auto/3;}.row .col-lg-4 {grid-area: auto/auto/auto/4;}.row .col-lg-5 {grid-area: auto/auto/auto/5;}.row .col-lg-6 {grid-area: auto/auto/auto/6;}.row .col-lg-7 {grid-area: auto/auto/auto/7;}.row .col-lg-8 {grid-area: auto/auto/auto/8;}.row .col-lg-9 {grid-area: auto/auto/auto/9;}.row .col-lg-10 {grid-area: auto/auto/auto/10;}.row .col-lg-11 {grid-area: auto/auto/auto/11;}.row .col-lg-12 {grid-area: auto/auto/auto/12;} }media (min-width:1200px) {.row .col-xl-1 {grid-area: auto/auto/auto/1;}.row .col-xl-2 {grid-area: auto/auto/auto/2;}.row .col-xl-3 {grid-area: auto/auto/auto/3;}.row .col-xl-4 {grid-area: auto/auto/auto/4;}.row .col-xl-5 {grid-area: auto/auto/auto/5;}.row .col-xl-6 {grid-area: auto/auto/auto/6;}.row .col-xl-7 {grid-area: auto/auto/auto/7;}.row .col-xl-8 {grid-area: auto/auto/auto/8;}.row .col-xl-9 {grid-area: auto/auto/auto/9;}.row .col-xl-10 {grid-area: auto/auto/auto/10;}.row .col-xl-11 {grid-area: auto/auto/auto/11;}.row .col-xl-12 {grid-area: auto/auto/auto/12;} }media (min-width: 1400px) {.row .col-xxl-1 {grid-area: auto/auto/auto/1;}.row .col-xxl-2 {grid-area: auto/auto/auto/2;}.row .col-xxl-3 {grid-area: auto/auto/auto/3;}.row .col-xxl-4 {grid-area: auto/auto/auto/4;}.row .col-xxl-5 {grid-area: auto/auto/auto/5;}.row .col-xxl-6 {grid-area: auto/auto/auto/6;}.row .col-xxl-7 {grid-area: auto/auto/auto/7;}.row .col-xxl-8 {grid-area: auto/auto/auto/8;}.row .col-xxl-9 {grid-area: auto/auto/auto/9;}.row .col-xxl-10 {grid-area: auto/auto/auto/10;}.row .col-xxl-11 {grid-area: auto/auto/auto/11;}.row .col-xxl-12 {grid-area: auto/auto/auto/12;} }5、响应式交互实现 利用 :checked 伪类 实现利用 JavaScript 脚本 实现 总结