HtmlCss前端知识总结

时间：2023-03-27 12:06:21 JavaScript

HtmlCss相关的单行居中多行左布局可以使用display实现：inline-block

.container{padding:10px;宽度：600px；文本对齐：居中；border:1pxsolid#000;}.list{display:inline-block;text-align:left;}.item{display:inline-block;宽度：80px；边框：1px实心#f00；height:200px;}如何实现等宽等高的垂直居中布局+padding.parent{width:100px;高度：100px；/*设置padding挤出中心；但需要注意的是此时的宽高要和子元素的大小一致，否则不会居中*/padding:100px;边框：1px实心；边距：100px自动；}.child{宽度：100px；高度：100px；背景：粉色；行高：100px；text-align:center;}定位+固定宽度+固定高度，使用absolute(定位).parent{position:relative;宽度：200px；高度：200px；边框：1px实心；}.child{位置：绝对；宽度：100px；高度：100px；/*1.使用margin:auto，子元素必须填满整个容器*/width:200px;高度：200px；左：0；右：0；顶部：0；底部：0；保证金：自动；/*2.通过calc()函数，取值是50%减去宽/高的一半*/left:calc(50%-150px);顶部：计算（50%-150px）；/*3.设置元素的偏移量，值为50%，将元素向后移动margin-value*/left:50%;顶部：50%；左边距：-50px；边距顶部：-50px；/*4.不知道子元素的宽高，使用transfrom:translate(-50%-50%)，CSS3属性有兼容性问题*/transform:translate(-50%,-50%);背景：粉色；行高：100px；text-align:center;}使用inline-block+table-cell.parent{display:table-cell;文本对齐：居中；vertical-align:middle;}.child{display:inline-block;}使用flex布局只需要设置父节点属性，不需要设置子元素，兼容性问题。父{显示：flex;/*1.通过justify-content和align-items:center实现*/证明内容：居中；align-items:center;}.child{/*2.或者通过marginauto实现*/margin:auto;}使用Grid布局只需要设置父节点属性，不需要设置子元素，兼容Sexuality.parent{display：网格;/*通过items属性实现*//*align-items:center;*//*对齐项目：中心；*//*items的缩写*//*place-items:center;*//*或者通过content属性*//*align-content:center;*//*证明内容：居中；*//*content的缩写*//*place-content:center;*/}.child{/*或按边距auto*//*margin:auto;*//*或者通过自身属性*//*align-self:center;自我辩护：中心；*//*self的缩写*/place-self:center;}capitalizetext-transform:capitalizeuseborder-radius使用border-radius实现波浪百分比图//使用`text-decoration-style:wavy`生成波浪形下划线。

ABCDEFGHIJKLMNOPQ

ABCDEFGHIJKLMNOPQdiv{width:200px;高度：200px；行高：200px；：中心;overflow:hidden;}.wave{border:5pxsoliddeeppink;边界半径：50%；动画：缩进5s无限线性；}div{颜色：透明；款式：波浪形；text-decoration-color:deeppink;}@keyframesindent{100%{text-indent:-110px;.container{位置：绝对；宽度：200px；高度：200px；填充：5px；border:5pxsolidrgb(118,218,255);顶部：50%；左：50%；转换：翻译（-50%，-50%）；边界半径：50%；溢出：隐藏；}.wave{位置：相对；宽度：200px；高度：200px；背景颜色：rgb（118、218、255）；边界半径：50%；&::before,&::after{内容：“”；位置：绝对；宽度：400px；高度：400px；顶部：0；左：50%；背景色：rgba(255,255,255,.4)；边界半径：45%；变换：平移（-50%，-70%）旋转（0）；动画：旋转6s线性无限；z-指数：10；}&::after{边界半径：47%；背景色：rgba(255,255,255,.9)；变换：翻译（-50%,-70%)旋转(0);动画：旋转10s线性-5s无限；z-指数：20；}}@keyframesrotate{50%{transform:translate(-50%,-73%)rotate(180deg);}100%{变换：平移(-50%,-70%)旋转(360deg);}}代码片片段生活用border-radius实现充满电动画

/div>html,body{宽度:100%;高度：100%；显示：弹性；背景：#e4e4e4；}.container{位置：相对；宽度：140px；边距：自动；}.header{位置：绝对；宽度：26px；高度：10px；左：50%；顶部：0；变换：平移（-50%，-10px）；边界半径：5px5px00；背景：rgba(255,255,255,.88);}.battery-copy{position:absolute;顶部：0；左：0；高度：220px；宽度：140px；边框半径：15px15px5px5px；溢出：隐藏；}.battery{位置：相对；高度：220px；框大小：边框框；边框半径：15px15px5px5px；框阴影：005px2pxrgba(255,255,255,0.22);背景：#fff；z-索引：1；＆::之后{内容：“”;位置：绝对；左：0；右：0；底部：0；顶部：80%；背景：线性渐变（到底部，#7abcff0%，#00BCD444%，#2196F3100%）；边框半径：0px0px5px5px；框阴影：014px28pxrgba(33,150,243,0),010px10pxrgba(9,188,215,0.08);动画：充电10s线性无限；滤镜：色调旋转（90度）；}}.g-wave{位置：绝对；宽度：300px；高度：300px；背景d:rgba(255,255,255,.8);边界半径：45%47%44%42%；底部：25px；左：50%；转换：翻译（-50%，0）；z-索引：1；动画：移动10s线性无限；}.g-wave:nth-child(2){border-radius:38%46%43%47%;变换：平移（-50%，0）旋转（-135deg）；}.g-wave：nth-??child（3）{边界半径：42%46%37%40%；变换：平移（-50%，0）旋转（135deg）；}@keyframescharging{50%{box-shadow:014px28pxrgba(0,150,136,0.83),0px4px10pxrgba(9,188,215,0.4);}95%{顶部：5%；过滤器：色调旋转（0度）；边界半径：005px5px；框阴影：014px28pxrgba(4,188,213,.2),010px10pxrgba(9,188,215,0.08);}100%{顶部：0%；过滤器：色调旋转（0度）；边框半径：15px15px5px5px；盒子阴影：014px28pxrgba(4,188,213,0),010px10pxrgba(9,188,215,0.4);}}@keyframes移动{100%{转换：translate(-50%,-160px)旋转(720deg);}}代码片段活用border-radius改变现实loadingloadingbody{background:#000;}div{position:relative;宽度：35vmin；高度：35vmin；背景：线性渐变（120deg，#34e0f00%，#b400ff100%）；不透明度：0.8；保证金：25vh自动；边界半径：35%；动画：rotateMain2s线性无限；}div::before{位置：绝对；内容：””;顶部：0；左：0；右：0；底部：0；背景：线性渐变（180deg，#35a0f00%，#b233f0100%）；不透明度：0.8；盒子阴影：5px5px90pxrgba(10,102,255,0.5);边界半径：35%；animation:rotateMain8slinear2sinfinite;}div::after{position:absolute;顶部：0；左：0；右：0；底部：0；背景：线性渐变（60deg，#33580f0%，#b7ee6d100%）；不透明度：0.8；盒子阴影：5px5px60pxrgba(20,102,255,0.3);边界半径：35%；阿尼玛tion:rotateMain8slinear4sinfinite;z-index:-1;}#app{颜色:#fff;文本对齐：居中；行高：35vmin；text-transform:capitalize}@keyframesrotateMain{50%{transform:rotateZ(180deg);边界半径：50%；}100%{变换：rotateZ(360deg);边界半径：35%；}}代码片段活用border-radius单标签线动画html,body{width:100%;高度：100%；溢出：隐藏；}正文背景：#000；滤镜：模糊（5px）对比度（20）；&::before{位置：绝对;内容：””;背景：#000；顶部：0；左：0；右：0；高度：20vh；z-指数：10；}}div{位置：相对；宽度：30vmin；高度：30vmin；保证金：30vh自动；//边框：1vminsolid#fff;边界半径：46%42%47%44%；背景：线性渐变（#fff，#9c27b0）；转换：比例（15）翻译（0，-13vh）旋转（0度）；动画：旋转10s无限线性交替；&::之前{内容：“”；位置：绝对；宽度：99%；高度：99%；背景：#000；边界半径：46%42%47%44%；转换：翻译（-50%，-50%）；左：50%；顶部：50%；}}@keyframesrotate{100%{transform:scale(10)translate(0,-15vh)rotate(360deg);}}@keyframes移动{50%{左：50%；右：49.95%；}100%{左：90%；右：9.7%；分享的是一些个人观点，写的不好请轻喷！！！！欢迎一起交流！！！！HtmlCss前端知识总结

上一篇：2021 年 10 月 TIOBE 指数榜：Python 超越 C 语言成 20 多年来的新霸主

下一篇：vuewatch监控方式总结

HtmlCss前端知识总结相关文章