1、遮罩层
#mask{
background-color:#ccc;
opacity:0.5;
filter: alpha(opacity=50);
position:absolute;
left:0;
top:0;
z-index:1000;
}2、三角形
.triangle{
width:0;
height:0;
border:7px solid transparent;
border-top-color:#2DCB70;
}3、换行
white-space: normal;
word-wrap: break-word;
word-break:break-all;4、溢出
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap判断是否出现省略：$dom.scrollWidth > $dom.clientWidth
5、圆圈
.circle {
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
}6、气泡
.bubbleBox{
position:relative;
width:99%;
height:500px;
border:1px solid #CCCCCC;
border-radius:5px;
}
.bubbleBox:before,.bubbleBox:after{
content:"";display:block;
border-width:20px;
position:absolute; bottom:-40px;
left:100px;
border-style:solid dashed dashed;
border-color:#CCCCCC transparent transparent;
font-size:0;
line-height:0;
}
.bubbleBox:after{
bottom:-39px;
border-color:#FFF transparent transparent;
} //两个相同大小，不同颜色，不同位置的三角形叠加7、抵消滚动条
padding-left: calc(100vw - 100%);8、inline居中
{
text-align:center
line-height
}
9、inline-block 居中 //img 和 input 是 inline-block
{
vertical-align:middle;
}10、block居中
// 方案一
父元素
position:relative;height:100%;
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color:#dedeff;
}
// 缺点：子元素 高度需要确定// 方案二
父元素position:relative;height:100%;
.Absolute-Center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}// 方案三
flex布局
父元素{
display: flex;
justify-content: center;
align-items: center;
} 11、填满父元素的剩余高度
// 前提 父元素 有高度
height: inherit; // 父元素高度，扣掉父元素的padding，但不扣除(非固定定位的)兄弟元素的高度
height: calc(100%-父元素padding); // 效果同上条
flex-grow: 1; // 父元素的剩余高度，前提是父元素 display:flex;
12、页脚
/******* JS 写法 ******/
html:
<body>
<div id="wrapperForFooter">
</div>
<div id="footer"></div>
</body>
css:
#footer{ height: 50px; margin: 20px 0 0;}
js:
$(document).ready(function(){
$("#wrapperForFooter").css("min-height",$(window).height() - 70);
});
$(window).resize(function(){
$("#wrapperForFooter").css("min-height",$(window).height() - 70);
});/********** CSS 写法 ************/
body,html {
height:100%;
//block的height有三种情况：1、没设置height则由子元素决定；2、设置了height绝对高度px则高度固定；
3、设置了height相对高度%则由父元素决定。
为了让#main真的有高度，首先得让它的容器body有高度
}
#main {
position: relative; // 让footer相对于main，main的高度变化使得footer位置也发生变化
min-height:100%;
}
#content {
padding-bottom: 100px; // content把main撑出100%时，给footer留足位置
}
#footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
} 引申：一个父元素有子元素A，子元素B；要设置B 在纵向填满 扣除A 以外所有空间，那么设置 B{height: 100%; padding-top: 留给A的高度} A{position: absolute}。 其中父元素得有明确的高度。
明确的高度：高度单位为%的元素A，往上追溯到高度单位非%的祖先节点，经过的中间节点全部设置了高度%
/*********** flex 写法 **********/
#content{
flex-grow: 1; // 参考11条
}
13、自适应满屏
position: absolute;
top:0;
left:0;
right:0;
bottom:0;14、无偏移的绝对定位
想让一个元素A贴合另一个元素B，而A元素的位置又不确定时，可以设置B为无偏移的绝对定位
absolute、fixed，如果不写left和top，位置处于其在文档流中的位置，此时可以用margin（可以是负值）来调整位置
15、启动向导 里的 全局遮罩局部镂空：使用shadow实现，元素背景透明(局部镂空)，该元素的shadow罩住全局，
box-shadow: 0 0 0 150vw rgba(0, 0, 0, .5);
16、环形进度条
方案一：SVG
方案二：canvas
方案三：CSS
<!-- 一个小圆叠加在一个大圆上，形成一个圈；用两个相同的半圆（大圆的一半）来控制进度 -->
<!-- 进度为0时，两个半圆都在左侧 -->
<div class="outer-pie">
<!-- 第一个半圆，在下层，随进度顺时针转到右侧为止 -->
<div class="half-pie"
:style="`transform:rotate(${progressDeg < 180 ? progressDeg : 180}deg);`"></div>
<!-- 第二个半圆，在上层，用来遮住左侧 和 表示180度后的进度 -->
<div class="half-pie"
:style="`transform:rotate(${progressDeg < 180 ? 0 : progressDeg}deg);${progressDeg < 180 ? 'background: inherit': ''}`"></div>
<!-- 内圆 -->
<div class="inner-pie"></div>
<!-- 圆形端点 -->
<div class="round-point start" v-if="progressDeg > 0"></div>
<div class="round-point end"
:style="{transform:`rotate(${progressDeg}deg)`, opacity: progressDeg > 0 ? 1:0}">
</div>
</div> // 大圆
.outer-pie {
background-color: rgba(225, 227, 230, 1);
position: relative;
width: 40vw;
height: 40vw;
border-radius: 50%;
margin: 36px auto;
// 进度半圆
.half-pie {
background: rgba(255, 180, 100, 1);
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%; // 为保证圆弧对齐，只能用裁剪的方式来取半圆，不能用width:50%;border-radius:20vw;
clip: rect(0, 20vw, 40vw, 0); // rect里不能用 %，渲染时先rect再rotate
}
// 内圆
.inner-pie {
background: rgba(244, 245, 247, 1);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 32vw;
height: 32vw;
border-radius: 50%;
}
// 圆形端点
.round-point {
position: absolute;
width: 4vw;
height: 4vw;
background: rgba(255, 180, 100, 1);
border-radius: 2vw;
left: 18vw;
top: 0;
&.end {
transform-origin: 2vw 20vw; // 环绕的圆心
transition: transform 1s ease;
}
}
}17、按钮在点击时 遮上一层蒙版
&:active:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .2;
content: '';
border-radius: 4px;
}18、CSS实现 微信小程序图片 aspectFit 模式
/* 背景图片 内切于 容器 */
.image-wrap{
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* 图片 内切于 容器 */
img {
object-fit: contain;
background: #000;
width: 100%;
height: 100%;
}
/* 视频 内切于 容器 */
video {
object-fit: contain;
background: #000;
width: 100%;
height: 100%;
}
/* 横屏画（landscape 风景画）内切（覆盖）容器，竖屏画（portrait 肖像画）内切于容器 */
// 用JS获取背景图片的原始尺寸
let img = new Image();
img.src = url;
if (img.complete) {
backgroundSize = img.width > img.height ? 'cover' : 'contain'; // 设置background-size
} else {
img.onload = ()=> {
backgroundSize = img.width > img.height ? 'cover' : 'contain';
}
}19、圆角渐变边框
问题：使用 border-image 时，border-radius 失效
/* 方案一：
主元素叠加到 background-image 为渐变,有圆角的低层元素上，低层元素露出边缘部分 */
/* 方案二：*/
{
/* 两个背景叠加，单色背景在上，渐变背景在下 */
background-image: linear-gradient(#FFF, #FFF), linear-gradient(to right, green, gold);
/* 背景填充范围 */
background-origin: border-box;
/* 背景裁剪范围，两个值分别作用于两个背景，渐变背景的边缘部分被露出*/
background-clip: content-box, border-box;
/* 边缘透明，露出边缘部分的背景 */
border: solid 10px transparent;
border-radius: 10px;
}
/* 方案三：
border-image 为渐变的主元素，叠加到等大的，有圆角的底层元素，底层元素overflow:hidden，隐去主元素超出圆角部分 */
/* 方案四：
border-image 为渐变的元素，裁剪成圆角 */
{
clip-path: inset(0 round 10px); /* 裁剪掉0px，裁剪的边角圆弧半径为10px */
}20、保留多空格，换行\n，缩进\t
white-space: pre;21、清除浮动
<div class='parent'>
<div style='float:left'></div>
<div style='float:left'></div>
<div>
<div class='sibling'></div>
方法一：.sibling{clear:both} // 缺点：相当于sibling加了上边距，parent没有高度
方法二：.parent{overflow:hidden} // 缺点：限定死了overflow，会遮住absolute层
方法三：.parent:after{clear:both}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}22、条纹进度条
@keyframes move
{
from {background-position: 0 0;}
to {background-position: 20px 20px;}
}
.progress-bar {
width: 100%;
height: 10px;
border-radius: 5px;
overflow: hidden;
border: 1px solid #DFE5E9;
padding: 1px;
>div{
position: relative;
.progress-inner {
position: absolute;
width: 100%;
height: 6px;
border-radius: 3px;
background-image: linear-gradient(-45deg, #58cf51 25%, #41ac3d 0, #41ac3d 50%, #58cf51 0, #58cf51 75%, #41ac3d 0);
background-size: 20px 20px;
background-repeat: repeat-x;
animation: move 2s linear infinite;
}
}
}23、固定层
无偏移的固定定位：固定定位如果不写left和top，则脱离文档流后，位置处于它没脱离文档流时的地方，不用设置left和top了。此时可以用margin（可以是负值）来调整位置。left和top可只设置一个，另一个默认在文档流所处的位置。
区间固定层：刚开始可随滚动条滚动，当其顶部或底部贴近浏览器边缘时，将其固定
24、满屏图片
原图1920*1080的背景图片，一个方向贴边，一个方向裁剪
body{
background-position: center;
height: 100%;
}
// 用嵌套实现复杂的布尔逻辑
@media screen {
@media (max-aspect-ratio: 1920/1080) { // 容器宽高比小于图片宽高比
body {
background-size: auto 100%; // 纵向贴边
}
}
@media (min-aspect-ratio: 1920/1080) { // 容器宽高比大于图片宽高比
body {
background-size: 100% auto; // 横向贴边
}
}
}
// @media (max-aspect-ratio: 1920/1080) 不能写在less中，因为预编译时会计算 1920/1080，破坏了@media的语法原图1920*1080的背景图片，背景图片太大则裁剪，图片太小则等比拉大到刚好满屏
body{
background-position: center;
height: 100%;
}
// 用嵌套实现复杂的布尔逻辑
@media screen {
@media (max-width: 1920px) and (max-height: 1080px) {
body {
background-size: auto auto; // 容器比图片小，裁剪
}
}
@media (min-width: 1920px), (min-height: 1080px) { // 容器的宽 或 高 比图片大
@media (max-aspect-ratio: 1920/1080) { // 容器宽高比小于图片宽高比
body {
background-size: auto 100%; // 等比拉高到满屏
}
}
@media (min-aspect-ratio: 1920/1080) { // 容器宽高比大于图片宽高比
body {
background-size: 100% auto; // 等比拉宽到满屏
}
}
}
}
// @media (max-aspect-ratio: 1920/1080) 不能写在less中，因为预编译时会计算 1920/1080，破坏了@media的语法25、banner图片
原图1920*540的背景图片，背景图片宽度太大则裁剪，图片宽度太小则等比拉大到刚好满屏，高度固定
@media (min-width: 1920px)
.banner {
background-size: 100% auto;
}
@media (max-width: 1920px)
.banner {
background-size: auto auto;
}
.banner {
background-image: url();
background-position: 50%;
height: 540px;
}
780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
