文本样式字体样式font-size字体大小font-weight字体粗细color字体颜色font-family字体族font-style字体风格normal将文本设置为普通字体将存在的斜体如em关闭italic将文本设置为斜体text-decoration字体装饰none取消文本装饰underline下划线overline上划线line-through穿过文本的线font简写font: font-style font-weight font-size/line-height font-family;其中font-size和font-family是必须写 其他可以省略文本布局text-align文本的水平对齐方式left左对齐默认right右对齐center居中对齐justify两端对齐自动改变字间距text-indent首行缩进常用单位em本元素的文字大小1em等于当前元素的字体大小letter-spacing文本字符间距line-height行高行高等于盒子高度可以实现垂直居中选择器关系选择器后代选择器.box p{ }选择.box的所有后代儿子孙子等元素子代选择器.boxp{ }选择.box的直接后代儿子元素通用兄弟选择器.box~p{ }选中紧跟在.box后面的所有p元素邻接兄弟选择器.boxp{ }选中紧跟在.box后面的第一个p元素父代选择器.box:has(p){ }选中包含p为子元素的.box伪类选择器状态伪类选择器链接伪类用于根据链接的不同状态如未访问、悬停、点击等为其添加样式从而提升用户体验和界面交互性a:link未访问链接a:visited已访问链接a:hover鼠标悬停在链接上时a:active链接被点击时的瞬间按下到松开用户行为伪类用于根据用户以某种方式和文档交互的时候为其添加样式从而提升用户体验和界面交互性:hover鼠标悬停在元素上:focus获得焦点的元素常用于表单结构伪类选择器根据元素的位置选择目标元素:first-child一组兄弟元素中的第一个元素:last-child一组兄弟元素中的最后一个元素:nth-child(n)一组兄弟元素中的第n个元素n的取值可以是数字关键字 odd奇数 even偶数公式:nth-child(3n) 3的倍数第3.6.9…个元素:nth-child(n2) 第2个以及以后的元素:nth-child(-n3) 前面3个元素注意公式的n取值从0开始计算表单伪类选择器针对表单元素的状态:disabled表单禁用状态:checked选中状态伪元素选择器选择元素的特定部分使用双冒号::选择特定部分::first-line选择首行::first-letter首字母::placeholder选择input或textarea占位符插入内容常用::before元素内插入伪元素 作为第一个元素::after元素内插入伪元素 作为最后一个元素before和after是插入的伪元素特性类似内联元素。content属性是必须不能省略没有内容空引号即可。属性选择器根据元素的属性特征来精准定位元素 从而实现更灵活的样式控制[属性]匹配包含指定属性的元素[属性值]匹配属性值等于指定值的元素[属性^值]匹配属性值以指定字符串开头的元素[属性$值]匹配属性值以指定字符串结尾的元素[属性*值]匹配属性值任意位置包含指定字符串的元素盒子模型边框borderborder: 边框粗细 边框样式 边框颜色;边框样式dotted 点状边框 原点组成的虚线dashed 虚线边框 短横线组成的虚线solid 实线边框 单一线条圆角边框border-radiusborder-radius: 属性值;数字/百分比 50%变成圆特殊圆角边框border-top-left-radius(左上角border-topright-radius(右上角border-bottom-right-radius(右下角border-bottom-left-radius(左下角如果后面跟两个值分别表示该角的水平半径和垂直半径border-bottom-left-radius:150px20px;外边距塌陷子盒子的上margin不生效给子盒子设置上下外边距会让父盒子塌陷跟随移动解决方案给父盒子添上上边框给父盒子添上上内边距给父盒子添加overflow: hidden;属性尺寸计算box-sizingbox-sizing: 属性值;content-box 元素的width和height仅包含内容区域 不包含padding和borderborder-box 元素的width和height包含内容、padding和border盒子背景backgroundbackground-color设置元素背景颜色backgroud-image设置背景图片background-repeat控制背景图片是否重复取值repeat默认no-repeatrepeat-xrepeat-ybackground-position定位图片位置background-size调整图片尺寸auto默认cover覆盖 图片显示不全contain包含 盒子不会被图片填满background-attachment背景是否跟随页面滚动scroll默认fixedbackground简写background: 颜色 图片 重复 固定 位置/尺寸;背景渐变linear-gradient在css中可以通过linear-gradient(线性渐变和radlal-gradient(径向渐变为元素添加渐变背景linear-gradient(方向颜色1位置颜色2位置...)线性渐变方向可控radial-gradient(形状颜色1,颜色2...)径向渐变形状和位置可控为文字添加渐变背景background:linear-gradient(toright,pink,red);设置背景渐变backaround-clip:text;文字范围裁剪背景color:transparent;文本填充颜色设置为透明盒子阴影box-shadowbox-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色;XY必填 其余可省略采取默认值默认是外阴影 加上inset可改为内阴影盒子倒影box-reflect)box-reflect: 倒影方向 倒影距离 倒影图像倒影方向必写above上below下left左right右倒影距离必写倒影图像可选常用线性渐变linear-gradient实现从清晰到透明的过度 避免倒影边缘生硬让子盒在父盒居中可以在父盒中加入方法一display:grid;place-items:center;/* 同时实现垂直和水平居中 */方法二display:flex;align-items:center;/* 垂直居中 */justify-content:center;/* 可选同时水平居中 */方法三text-align:center;line-height:height值;/* 仅支持单行文字在盒子中居中 使用场景较为有限 */可以在子盒中加入方法一margin:0 auto;/* 水平居中 前提要设置width*/width:fit-content;/* 没有width可以添加这行代码使宽度自适应内容 */方法二position:absolute;/* 子元素绝对定位 */top:50%;/* 先向下移动父容器高度的50% */left:50%;/* 先向右移动父容器宽度的50% */transform:translate(-50%,-50%);/* 再向左、向上移动自身的50% */处理文字溢出单行文字溢出显示省略号text-overflow:ellipsis;/*文字溢出显示省略号*/white-space:nowrap;/*文字不换行*/overflow:hidden;/*元素溢出时隐藏*/多行文字溢出显示省略号display:-webkit-box;/*旧版弹性盒子布局*/-webkit-box-orient:vertical;/*文本垂直排列*/-webkit-line-clamp:3;/*限制显示行数*/overflow:hidden;/*隐藏溢出内容*/text-overflow:ellipsis;/*文本溢出显示省略号*/裁剪形状clip-path可以创建复杂的裁剪形状 是元素仅显示被裁剪区域内的部分 即可以让盒子呈现出各种形状clip-path: circle(属性值)属性值可以在可视化工具中得到滤镜filter/backdrop-filterfilter是对盒子及盒子里面所有子元素都加上滤镜 而backdrop-filter只对当前盒子添加backdrop-filter通常与半透明背景配合使用 实现毛玻璃的视觉效果blur(数值)高斯模糊brightness(数值)调整亮度 1原始 1暗 1亮contrast(数值)调整对比度 同上saturate(数值)调整饱和度 0%无色彩 100%原始grayscale(数值)调整灰度 0原始 1完全灰度drop-shadow(数值)添加投影 类似box-shadow但他是给盒中元素加阴影布局模式转换流布局核心displaydisplay: 属性值block区块元素inline行内元素inline-block行内块元素使用场景让块级盒子一行显示。让行内盒子具备宽度高度。浮动布局核心floatfloat: 属性值left左侧浮动right右侧浮动none不浮动默认值使用场景由于存在塌陷问题 已基本弃用弹性布局核心flex父盒子属性⭐display定义元素为flexdisplay: flex;⭐justify-content定义主轴上的对齐方式横flex-start左对齐默认flex-end右对齐center居中对齐space-between两端对齐A–B–Cspace-around项目两侧间隔相等-A–B–C-)space-evenly项目间隔均匀分布–A–B–C–⭐align-items定义交叉轴上的对齐方式竖flex-start在交叉轴起始点对齐flex-end在交叉轴终点对齐center在交叉轴居中对齐stretch拉伸填充整个容器高度需子盒子无固定高度flex-direction定义主轴方向row子盒子从左到右排列row-reverse子盒子从右到左排列column子盒子从上到下排列主轴变成竖着的column-reverse子盒子从下到上排列flex-wrap控制是否换行nowrap不换行 会被压缩默认wrap换行align-content定义多行时交叉轴上的对齐方式仅当flex-wrap: wrap且内容换行时生效flex-start上对齐flex-end下对齐center居中对齐space-between两端对齐space-around项目两侧间隔相等space-evenly项目间隔均匀分布gap设置行与列之间的间距gap: 20px;行和列直接保持20像素间距gap: 20px;行间距20像素 列间距30像素比设置margin效果更好子盒子属性flex设置盒子的占比大小使用场景单行布局定位布局核心position四种属性 通过top/right/bottom/left控制元素偏移相对定位relativeposition: relative相对于自身原来位置移动 不脱离正常流常与绝对定位作为父元素搭配使用绝对定位absoluteposition: absolute相对于最近的已定位祖先元素position非static移动位置 脱离正常流常用于弹出菜单/下拉框 元素重叠悬浮效果固定定位fixedposition: fixed始终相对于浏览器窗口定位 滚动页面时位置不变 脱离正常流常用于固定导航栏 页面广告粘性定位stickyposition: sticky元素在滚动到指定位置如top: 0px前是相对定位 之后改为固定定位常用于吸顶效果 表格表头层叠顺序z-index)z-index: 数值数值越大 层级越高网格布局核心grid网格轨道grid-template-columns/rows绘制网格grid-template-columns定义网格中的列grid-template-rows定义网格中的行有几个属性值代表创建几个列/行属性值常用fr表示分配轨道剩余空间的比例 或auto表示根据内容长度自动分配也可以用repeat(次数, 轨道尺寸)函数简化重复定义 搭配minmax(最小值, 最大值)函数实现响应式布局其中repeat函数的次数还可取值auto-fill留有空白空间和auto-fit拉伸子盒占满父盒空间eg.grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));网格轨道对齐方式justify/align-contentjustify-content控制列轨道align-content控制行轨道flex-start左对齐默认flex-end右对齐center居中对齐space-between两端对齐A–B–Cspace-around项目两侧间隔相等-A–B–C-)space-evenly项目间隔均匀分布–A–B–C–结合用法place-itemsplace-items: align-items justify-items;place-items: center; /* 相当于 center center */最常用 这会让网格项在网格单元格中水平和垂直都居中。子项目对齐方式justify/align-itemsjustify-items: 属性值水平方向行轴align-items: 属性值垂直方向列轴start左对齐/顶部对齐end右对齐/底部对齐center居中对齐stretch默认值 拉伸填满单元格宽度/高度当子项目没有指定宽高时生效二者搭配可实现指定在任意位置左上、右下…网格间距gapgap: 数值也可分开写column-gaprow-gap跨网格线grid-column/row跨列grid-column: 开始线编号/结束线编号跨行grid-row: 开始线编号/结束线编号属性要加到子元素上开始线从1开始 结束线到行/列数1 如下网格填充方向grid-auto-flowgrid-auto-flow: 属性值row先行后列顺序填充默认column先列后行顺序填充object-fit用于控制替换元素如img,video,iframe等加载外部资源的元素内容如何适应其容器尺寸的属性fill默认值。拉伸内容以完全填充容器不保持宽高比可能导致内容变形最常用但需谨慎contain保持内容固有宽高比缩放至完全适应容器内部内容全部可见,容器可能有空白cover保持内容固有宽高比缩放至覆盖容器内容可能部分被裁剪,容器无空白常与object-position搭配使用例如cover时调整裁剪区域object-position控制内容在容器内的对齐位置如center居中top left左上角多列布局核心column将元素的内容父盒中的子盒自动分割为指定数量的垂直列不用设置display: column父盒子属性column-count: 数值分配列数column-gap: 数值列之间的间距column-rule: 颜色 宽度 样式列检的分割线样式子盒子属性break-inside: 属性值auto允许元素跨列分割默认值avoid-column强制元素不跨列分割动画过渡Transition过渡效果Transition用于在元素的属性值发生变化时 平滑的过度而不是瞬间切换transition: 过度属性默认 过渡时间2Dtransform不会破坏原有文档流布局 比margin更适用平移translatetransform: translate(x数值, y数值)移动transform: translateX(数值)x轴移动transform: translateY(数值)y轴移动平移不影响页面布局仅是视觉上的移动 添加鼠标经过元素的移动优先transform而不是通过left top等 性能更佳如果单位是百分比 则是相对于元素自身尺寸移动而非父容器旋转rotatetransform: rotate(数值)旋转单位deg正值顺时针转 负值逆时针转transform-origin: left top;旋转点行内元素inline的布局特性无法设置宽高盒模型限制transform基准异常会导致无法旋转所以文字类要转换行内块inline-block或者块级元素block。比如_字体图标__i_需要转换。缩放scaletransform: scale(x数值, y数值)放大transform: scaleX(数值)横向放大transform: scaleY(数值)竖向放大倾斜skewtransform: skew(x数值, y数值)倾斜transform: skewX(数值)x轴倾斜transform: skewY(数值)y轴倾斜单位deg正值顺时针转 负值逆时针转也可以用transform-origin设置倾斜中心点复合写法transform: A() B() C();从右到左的执行顺序进阶transition完整transition: 过度属性(all) 持续时间 速度曲线 延迟时间;ease默认linearease-inease-outease-in-out一般看到好的直接cv即可3Dtransform旋转rotatetransform: rotateX(数值)围绕X轴旋转transform: rotateY(数值)围绕Y轴旋转transform: rotateZ(数值)围绕Z轴旋转单位degratateZ和二维的rotate()一样的透视perspectiveperspective: 数值透视效果数值越小 透视效果越强 单位px给父元素添加则所有子元素都会有效果常用给子元素添加则当前元素独有transform: perspective(数值) ratateX(45deg)组合使用perspective必须作为第一个函数 否则无效搭配backface-visibility: hidden可实现两面翻转盒子的效果位移transformtransform: translateZ(数值)沿Z轴垂直屏幕方向平移元素正值靠近观察者 负值远离观察者需父容器设置perspective和transform-style: preserve-3d属性才能生效动画animation定义动画keyframes move/*自定义名称*/{0%{transform:...;}50%{transform:...;}100%{transform:...;}}使用动画animation: 动画名称 动画时长 速度曲线 延迟时间 播放次数 播放方向 执行完毕状态动画名称和动画时长必写 其他可以省略但要保证书写顺序动画属性要写在目标元素里面播放次数infinite无限循环播放方向reverse反向alternate交替执行完毕状态forwards保留最后一帧backwards回到第一帧animation-play-state: paused暂停动画此项需单独设置 可设置在hover里实现鼠标悬停时停止播放动画时间线animation-timeline允许开发者将动画进度与特定时间如滚动、视口可见性绑定 从而实现更复杂的交互效果animation-timeline: scroll()动画进度与页面或容器的滚动位置关联animation-timeline: view()动画进度与元素进入/离开视口的可见性关联编程变量定义变量css中:root{/* 全局变量 */--color:#000}.box{/* 局部变量 */--bgcolor:#fff}html中div classbox style--i:0/divdiv classbox style--i:1/divdiv classbox style--i:2/divdiv classbox style--i:3/div使用变量.box{color:var(--color);background-color:var(--bgcolor);}计算.box{width:calc(100% - 20px);height:calc(var(--i)* 50px);}移动端流式布局单位vw/vhvw表示视口宽度的1%.例如若当前浏览器视口的宽度为1920px,则1vw1920pxx1%19.2px.vh表示视口高度的1%.例如若当前视口的高度为1080px,则1vh1080pxx1%10.8px.vmin/vmaxvmin表示视口较小尺寸宽度或高度的1%vmax表示视口较大尺寸宽度或高度的1%当需要照顾手机端的横屏状态时 可以将所有vw改为vminremrem值等于根元素html的font-size通过动态修改可以是页面元素基于rem自适应不同屏幕尺寸动态修改html文字大小的方案媒体查询js方式引入推荐functionsetRemUnit(){varremdocEl.clientWidth/10docEl.style.fontSizerempx}响应式布局媒体查询media [媒体类型 and](可省略) (媒体特征) { }媒体类型目前是screen媒体特征min-width大于等于max-width小于等于杂项样式初始化中小项目选择性直接引入通用初始化代码*{margin:0;padding:0;box-sizing:border-box;}html, body{height:100%;}ul, ol{list-style:none;}em, i{font-style:normal;}a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}/* 设置img的垂直对齐方式为居中对齐去除img默认下间隙 */img{vertical-align:middle;}input{border:none;outline:none;/* 当输入框获得焦点时不会显示默认的轮廓线 */color:#333;}大项目推荐引入normalize.css文件linkrelstylesheethref./css/normalize.css点击浏览代码文件字体图标使用方法下载字体图标文件下载网站)引入html文件中按照要求使用字体图标SVG图标使用方法和字体图标类似常见css属性fill填充颜色支持颜色值渐变图案不需要改为none相当于background-colorstroke定义描边颜色支持颜色值渐变图案相当于border-colorstroke-width描边宽度支持像素百分比px,em等单位相当于border-widthstroke-dasharray虚线模式实线长度间隔长度stroke-dashoffset调整虚线与间隔的起始位置鼠标样式cursor: 属性值default默认箭头通常是系统默认的箭头光标pointet手型指尖朝下的小手,常用于可点击元素如链接《a,按钮《button).text型竖线类似文本输入光标,用于可编辑文本区域如《textarea,contenteditable元素.wait等待旋转圆圈或沙漏,表示操作进行中如加载提交时.help帮助带问号的头,提示用户需要帮助如提示信息区域.ot-allowec禁止圆圈带斜线,表示操作不可用如禁用的按钮.grab抓取手型带抓取动作,表示可拖动如可拖拽的元素.rabbing抓取中手型收紧,表示正在拖动配合grab使用.zoom-in放大号,表示放大操作如图片预览时.zoom-out缩小-号,表示缩小操作如图片预览时.