Css

TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的 安装 npm install tailwindcss 初始化tailwind.config.js npx tailwindcss init 在tailwind.config.js中content属性，表示着项目的html或者js文件 content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration 创建一个css文件配置tailwind三大组件（base，components.utilities） @tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要 @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 也可以将css导入到js中 import "tailwindcss/tailwind.css" tailwind编译 npx tailwindcss -i ./src/index.css -o ./dist/main.css...

backdrop-filter是css原生的属性 backdrop-filter的一些方法（用法和filter一样） blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色 简单实现一个毛玻璃背景效果，例如： <style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url("1.jpg"); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } </style> <div id="app"> <div id="test"> <p class="text"> hallo word </p> </div> </div> backdrop-filter和filter区别： filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己 backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）

grid 布局 grid布局和flex布局类似，不过grid是最强大的css布局方式 grid布局是网格布局 display: grid; // 定义grid布局，默认为块级元素 display: inline-grid // 设置为行内元素 设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效 列宽和行高的设置 grid-template-columns: 100px; // 列宽 grid-template-rows: 100px; // 行高 数值也支持百分比 grid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的 grid-template-columns: 100px 100px 100px; grid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px grid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍 grid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px grid-template-rows: auto; // 由浏览器决定行高 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳 grid-row-gap: 10px; // 行间距（行与行的距离）...

box-sizing 盒类型 该属性是告诉浏览器是以什么盒模型展示的 IE用的是border-box 计算方式是外边距+内边距+内容=宽度（高度） 而像谷歌浏览器之类的用的是content-box 计算方式是容器的宽度或者高度 box-sizing: content-box; // 告诉浏览器是以content-box方式计算 border-box // 告诉浏览器是以border-box方式计算 css样式优先级 !important > 内联 > id > 类 > 标签 > 通配符 > 默认样式 > 继承样式 letter-spacing 字间距 该属性控制字符之间的距离，字符之间的字符间距，默认值为0 该属性支持三种类型的数值 px（像素） em（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数） rem（和em类似，不过它相对的是html元素，而em是相对于它本身） 例如： letter-spacing: 6px; columns 用于指定列宽和列数 例如： columns: 100px 3; // 指的是列宽为100px，列数为3 column-gap 用于列与列之间的间隔 column-gap: 30px; column-rule 用于指定列之间的宽度和样式，以及颜色（列的边线） column-rule: 6px dashed #ccc; 可拆分为 column-rule-width和column-rule-style和column-rule-color column-span 指定元素应横跨多少列 column-span: 3; all为横跨所有列 media 媒体查询 媒体查询常用于响应式布局，为不同屏幕设置不同的样式 @media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...

居中布局 分水平居中和垂直居中，水平+垂直居中 水平居中：当前元素在父级元素容器中，水平方向是居中显示的 inline-block+text-algin #app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2） 缺点：text-align具有继承性，会导致子元素的文本也是居中的 table+margin .child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化 absolute+transform #app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果 缺点：transform属性是css3的新属性，浏览器兼容性比较差 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的 table-cell+vertical-algin #app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好 缺点：vertical-align属性具有继承性 absolute+transform...