Html Css 相干
单行居中多行居左布局
能够应用display: inline-block实现
<!-- html构造 --><div class='container'> <div class='list'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div></div><!-- 款式 -->.container { padding: 10px; width: 600px; text-align: center; border: 1px solid #000;}.list { display: inline-block; text-align: left;}.item { display: inline-block; width: 80px; border: 1px solid #f00; height: 200px;}如何实现垂直居中布局
同宽高+padding
.parent{ width: 100px; height: 100px; /*将padding设置，来挤出来居中的样子；然而要留神的是，此时的width和height要和子元素的大小一样，否则还是不居中*/ padding: 100px; border: 1px solid; margin: 100px auto;}.child{ width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center;}定位+定宽+定高，应用absolute（定位）
.parent{ position: relative; width: 200px; height: 200px; border: 1px solid;}.child{ position: absolute; width: 100px; height: 100px; /* 1. 应用 margin:auto ，子元素必须拉满整个容器*/ width: 200px; height: 200px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* 2. 通过 calc()函数，值为 50% 减去宽度/高度的一半 */ left: calc(50% - 150px); top: calc(50% - 150px); /* 3. 设置该元素的偏移量，值为 50%，并通过外边距 -值 的形式将元素挪动回去 */ left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; /* 4. 不晓得子元素的宽高，应用transfrom:translate(-50% -50% ) ，CSS3属性有兼容性问题*/ transform: translate(-50%, -50%); background: pink; line-height: 100px; text-align: center;}应用inline-block+table-cell
.parent { display: table-cell; text-align: center; vertical-align: middle;}.child { display: inline-block;}应用flex布局
只需设置父节点属性，无需设置子元素,兼容性问题
.parent { display: flex; /* 1. 通过 justify-content 以及 align-items: center 实现 */ justify-content:center; align-items:center;}.child { /* 2. 或者通过 margin auto 实现 */ margin: auto;}应用Grid布局
只需设置父节点属性，无需设置子元素,兼容性问题
.parent { display: grid; /* 通过 items 属性实现*/ /* align-items: center; */ /* justify-items: center; */ /* items 的缩写 */ /* place-items: center; */ /* 或者通过 content 属性 */ /* align-content: center; */ /* justify-content: center; */ /* content 的缩写 */ /* place-content: center; */}.child { /* 或者通过 margin auto 实现 */ /* margin: auto; */ /* 或者通过 self 属性 */ /* align-self: center; justify-self: center; */ /* self 的缩写 */ place-self: center;}首字母大写
text-transform: capitalize活用border-radius
活用 border-radius, 实现波浪百分比图。
// 应用 `text-decoration-style: wavy` 生成波浪下划线。<div >ABCDEFGHIJKLMNOPQ</div><div class="wave">ABCDEFGHIJKLMNOPQ</div>div { width: 200px; height: 200px; line-height: 200px; font-size: 50px; margin: auto; text-align: center; overflow: hidden;}.wave { border: 5px solid deeppink; border-radius: 50%; animation: indent 5s infinite linear;}div { color: transparent; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: deeppink;}@keyframes indent { 100% { text-indent: -110px; }}代码片段
活用 border-radius, 实现波浪动画。
<div class="container"> <div class="wave"></div> </div>.container { position: absolute; width: 200px; height: 200px; padding: 5px; border: 5px solid rgb(118, 218, 255); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;}.wave { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%; &::before, &::after{ content: ""; position: absolute; width: 400px; height: 400px; top: 0; left: 50%; background-color: rgba(255, 255, 255, .4); border-radius: 45%; transform: translate(-50%, -70%) rotate(0); animation: rotate 6s linear infinite; z-index: 10; } &::after { border-radius: 47%; background-color: rgba(255, 255, 255, .9); transform: translate(-50%, -70%) rotate(0); animation: rotate 10s linear -5s infinite; z-index: 20; }}@keyframes rotate { 50% { transform: translate(-50%, -73%) rotate(180deg); } 100% { transform: translate(-50%, -70%) rotate(360deg); }}代码片段
活用border-radius实现充电动画
<div class="container"> <div class="header"></div> <div class="battery"> </div> <div class="battery-copy"> <div class="g-wave"></div> <div class="g-wave"></div> <div class="g-wave"></div> </div></div>html,body { width: 100%; height: 100%; display: flex; background: #e4e4e4;}.container { position: relative; width: 140px; margin: auto;}.header { position: absolute; width: 26px; height: 10px; left: 50%; top: 0; transform: translate(-50%, -10px); border-radius: 5px 5px 0 0; background: rgba(255, 255, 255, .88);}.battery-copy { position: absolute; top: 0; left: 0; height: 220px; width: 140px; border-radius: 15px 15px 5px 5px; overflow: hidden;}.battery { position: relative; height: 220px; box-sizing: border-box; border-radius: 15px 15px 5px 5px; box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22); background: #fff; z-index: 1; &::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 80%; background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%); border-radius: 0px 0px 5px 5px; box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08); animation: charging 10s linear infinite; filter: hue-rotate(90deg); }}.g-wave { position: absolute; width: 300px; height: 300px; background: rgba(255, 255, 255, .8); border-radius: 45% 47% 44% 42%; bottom: 25px; left: 50%; transform: translate(-50%, 0); z-index: 1; animation: move 10s linear infinite;}.g-wave:nth-child(2) { border-radius: 38% 46% 43% 47%; transform: translate(-50%, 0) rotate(-135deg);}.g-wave:nth-child(3) { border-radius: 42% 46% 37% 40%; transform: translate(-50%, 0) rotate(135deg);}@keyframes charging { 50% { box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4); } 95% { top: 5%; filter: hue-rotate(0deg); border-radius: 0 0 5px 5px; box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08); } 100% { top: 0%; filter: hue-rotate(0deg); border-radius: 15px 15px 5px 5px; box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4); }}@keyframes move { 100% { transform: translate(-50%, -160px) rotate(720deg); }}代码片段
活用border-radius变换实现loading成果
<div id="app">loading</div>body { background: #000;}div { position: relative; width: 35vmin; height: 35vmin; background: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%); opacity: .8; margin: 25vh auto; border-radius: 35%; animation: rotateMain 2s linear infinite;}div::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #35a0f0 0%, #b233f0 100%); opacity: .8; box-shadow: 5px 5px 90px rgba(10, 102, 255, 0.5); border-radius: 35%; animation: rotateMain 8s linear 2s infinite;}div::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(60deg, #33580f 0%, #b7ee6d 100%); opacity: .8; box-shadow: 5px 5px 60px rgba(20, 102, 255, 0.3); border-radius: 35%; animation: rotateMain 8s linear 4s infinite; z-index: -1;}#app{ color: #fff; text-align: center; line-height: 35vmin; text-transform: capitalize}@keyframes rotateMain { 50% { transform: rotateZ(180deg); border-radius: 50%; } 100% { transform: rotateZ(360deg); border-radius: 35%; }}代码片段
活用border-radius单标签线条动画
<div id="app"></div>html,body{ width: 100%; height: 100%; overflow: hidden;}body { background: #000; filter: blur(5px) contrast(20); &::before { position: absolute; content: ""; background: #000; top: 0; left: 0; right: 0; height: 20vh; z-index: 10; }}div { position: relative; width: 30vmin; height: 30vmin; margin: 30vh auto; // border: 1vmin solid #fff; border-radius: 46% 42% 47% 44%; background: linear-gradient(#fff, #9c27b0); transform: scale(15) translate(0, -13vh) rotate(0deg); animation: rotate 10s infinite linear alternate; &::before { content: ""; position: absolute; width: 99%; height: 99%; background: #000; border-radius: 46% 42% 47% 44%; transform: translate(-50%, -50%); left: 50%; top: 50%; }}@keyframes rotate { 100% { transform: scale(10) translate(0, -15vh) rotate(360deg); }}@keyframes move { 50% { left: 50%; right: 49.95%; } 100% { left: 90%; right: 9.7%; }}代码片段
结语
本次分享的是集体的一些浅见，写的不好请轻喷！！！！欢送一起交换！！！！
Html Css 前端常识总结