CSS
微软雅黑写法
“微软雅黑”使用英文“Microsoft YaHei”
div{font-family:”Microsoft YaHei”}
内部阴影 css3 -- box-shadow
- box-shadow: h-shadow v-shadow blur spread color inset;
| h-shadow | 必需。水平阴影的位置。允许负值。
| v-shadow | 必需。垂直阴影的位置。允许负值。
| blur | 可选。模糊距离。
| spread | 可选。阴影的尺寸。
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
div
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px 30px 20px pink inset;
}
* 单侧阴影
box-shadow:0 -1px 0 0 #FFF inset;
http://www.divcss5.com/css3-style/c727.shtml
伪元素(::after)
p::before{
content: '';
color: blue;
}
https://www.cnblogs.com/keyi/p/5943133.html
http://www.w3school.com.cn/tiy/t.asp?f=css3_image_gallery
滚动条
隐藏滚动条同时又可以滚动
::-webkit-scrollbar {display:none}
https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html
定义滚动条轨道
::-webkit-scrollbar-track {
background-color: #141935;
}
定义滚动条滑块
::-webkit-scrollbar-thumb {
background-color: #141935;
}
例:
.menus_list ::-webkit-scrollbar-thumb {
background-color: rgba(0, 154, 255, .8);
}
参考:https://www.cnblogs.com/vicky-li/p/css.html
border透明度(HSLA)
- HSLA(H,S,L,A)
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
A:Alpha透明度。取值0~1之间。
兼容性:不支持IE8及以下版本
例:
border-bottom:1px solid hsla(0,0%,100%,.3);
https://blog.csdn.net/It_rod/article/details/80615557
占位和不占位隐藏元素
不占位隐藏
display:none;
占位隐藏
visibility:hidden;
参考:https://blog.csdn.net/BuquTianya/article/details/50771986
CSS换行和不换行
文字超出自动换行
word-wrap: break-word;
word-break: normal;
强制不换行
white-space:nowrap;
强制英文单词断行
word-break:break-all;
https://blog.csdn.net/liuyan19891230/article/details/50969393
选取第几个标签元素 (nth-child、first-child、last-child)
最后一个标签元素样式
li:last-child{background:#090}
https://blog.csdn.net/zsg88/article/details/64165993/
指定父元素的最后一个 p 元素
p:last-of-type {
background:#ff0000;
}
http://www.w3school.com.cn/cssref/selector_last-of-type.asp
css鼠标样式cursor
<span style="cursor:pointer">Pointer</span>
https://blog.csdn.net/wangshiting/article/details/75661146
li 去掉小圆点及相关属性
ul {list-style-type:none;}
https://blog.csdn.net/business122/article/details/7973638
页面高度自适应 height:100%;
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%; /*这里是关键*/
}
https://www.cnblogs.com/liaojie970/p/7260039.html
css3设置背景图片的大小
/* 将背景图片等比缩放填满整个容器 */
background-size:cover;
https://www.cnblogs.com/imguo/p/5772668.html
ipad横竖屏切换,页面适配方法
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
https://blog.csdn.net/wangle_style/article/details/81101161
如何实现隐藏input的光标(隐藏光标,可正常输入)
<style>
input{
color:transparent;
text-shadow:0 0 0 red;
}
</style>
https://blog.csdn.net/u010730897/article/details/72721960
input 选中状态 样式
input:focus {
color: #fff;
}
flex一系列属性详解
https://www.cnblogs.com/xianxianxxx/p/8086554.html
修改原生js 复选框的样式
.export_custom input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 14px;position: relative;top: -1px;border-radius: 50%;}
.export_custom input[type="checkbox"]::before{content: "\2713";position: absolute;top: -2px;left: -2px;background: #cabdbd;color: #fff;width: 14px;height: 14px;border: none;border-radius: 50%;}
.export_custom input[type="checkbox"]:checked::before{content: "\2713";background-color: #F5A400;position: absolute;top: -2px;left: -2px;width:14px;height: 14px;border: none;color:#fff;font-size: 13px;border-radius: 50%;}
http://www.cnblogs.com/cloud-k/archive/2018/03/15/8572438.html
CSS 宽高度百分比数减去固定像素值的办法(例:100%-20px)
height:calc(100% - 20px);
图片在div中垂直居中
img { vertical-align: middle; }
https://blog.csdn.net/qq_38071635/article/details/81068694
border影响元素宽高(box-sizing)
.item{
width: 200px;
height: 400px;
border: 2px solid red;
box-sizing: border-box;
}
https://blog.csdn.net/TalonZhang/article/details/84945411
CSS应用
谷歌浏览器字体如何改到12px以下
解决办法:利用css3的transform属性
span {
font-size: 12px;
-webkit-transform-origin-x: 0; // 缩小后文字位置不变
-webkit-transform: scale(0.90); // 缩小元素(文字随之缩小)
}
https://blog.csdn.net/im_dogg/article/details/93891050h
https://blog.csdn.net/wkw1598727534/article/details/90692146
设置无效
原因:所在元素未设置宽高,无法缩放
解决办法:给元素加宽高
span {
display: inline-block;
width: 100px;
height: 20px;
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.90);
}
问题:display: flex; 导致子元素宽度被压缩
解决办法:
width: 120px;
flex-shrink: 0; /* 用数值来收缩比例 默认值为1 */
https://www.cnblogs.com/jisi2012/p/14521951.html
css中超出变为省略号:
超出一行显示省略号
<style>
div{
width:100%;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
超出多行显示省略号 (-webkit-line-clamp即为几行)
<style>
div {
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
</style>
https://blog.csdn.net/Yiright/article/details/53230760
- 不生效可能是高度问题,解决办法:
max-height: 60px;
white-space: normal;
https://www.php.cn/faq/509103.html
背景使用opacity设置透明度时,导致字体也出现透明的问题解决
background-color:rgba(0, 0, 0, .7);
https://blog.csdn.net/gll77/article/details/79713082
鼠标移入移出时改变样式
- CSS :hover 同级元素
#home:hover +.sign_out {
display: block !important;
}
https://blog.csdn.net/shengjon/article/details/78050413
css 弹框遮罩层 (蒙版)
https://blog.csdn.net/Dzq_Boyka/article/details/80592346
https://blog.csdn.net/yunsiwl5/article/details/80365956
清除浮动(子元素设置了float属性后父元素高度为0)
1、父元素设置overflow:hidden;或overflow:auto 等。
https://www.cnblogs.com/chakson/p/4709762.html2、给父元素设置 清除浮动样式
<style type="text/css">
.left{float:left;}
.right{float:right;}
/*给父元素设置 清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<body>
<div class="clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
https://www.cnblogs.com/nxl0908/p/7245460.html
css使用精灵图
span {
width: 20px;
height: 20px;
background-image: url(icno.png); //引用精灵图
background-size: 60px 40px;
background-position: -20px -20px;
}
https://www.cnblogs.com/liaojie970/p/7260039.html
修改 <input type=file> 的样式
input {opacity:0;}
隐藏input元素,点击图片时,调用input方法
https://blog.csdn.net/qq_32623363/article/details/80878408
css3 定时移动
let leftnumber = 100
let time = setInterval(function () {
leftnumber -= 10
$('#moveTable').css({left: leftnumber + '%'})
if (leftnumber <= 0) {
console.log(leftnumber)
clearInterval(time)
}
}, 40)
https://blog.csdn.net/qq471011042/article/details/79339691
css实现自定义虚线边框
#post .post_content .el-table td {
border-bottom: 1px dashed transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,#FFD786 0,#FFD786 0.2em,white 0,white 0.4em);
}
https://www.cnblogs.com/libin-1/p/7096926.html
保证图片在div中自适应显示,不变形
- 解决方法:同时设置图片的最大宽高为100%
max-width:100%;
max-height:100%;
https://blog.csdn.net/weixin_41863239/article/details/87713884
html中,td的宽度无法设置
- 解决办法:为td中的div设置宽度
<td><div>aaaa</div></td>
td div { width: 100px;}
https://www.jb51.net/web/166296.html
给移动端页面设置背景颜色后,整个屏幕填充背景色
html,body{
margin:0;
padding:0;
outline:none;
list-style:none;
width:100%;
height: 100%;
background: #012145;
font-family:"微软雅黑";
}
https://blog.csdn.net/qq_32849999/article/details/82864255
网页移动端适配动态修改页面font-size
https://www.jianshu.com/p/19c71db5fc9f
根据屏幕大小设置字体大小
https://www.cnblogs.com/syh119/p/9109572.html
使用writing-mode让文字竖向排版
https://blog.csdn.net/clschen/article/details/51221371
移动端最小最大宽度
在移动端最小宽度是320px;在不考虑横屏的情况下,就是414px。
https://www.cnblogs.com/zlj123/p/6257506.html
css背景图充满整个屏幕
.login{
background-size:cover;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url("../../assets/login.png")no-repeat center center;
}
<div class="login"></div>
https://www.cnblogs.com/IT123/p/10882819.html
flex布局下的float
使用 :margin-left: auto;(可以不用float了)
https://www.jianshu.com/p/792aec32039f
css背景图片自适应
.login {
background-image:url("../../assets/images/login/login.png");
background-repeat:no-repeat;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
- 浏览器支持:
Firefox 3.6+ , Chrome 1.0+ , Opera 9.63+, IE9 +
https://zhidao.baidu.com/question/2080394442897317548.html
如何让td内容高度自适应,与tr同高
<table>
<tr>
<td>
aaaaaaaaaa<br />
aaaaaaaaaa<br />
aaaaaaaaaa<br />
aaaaaaaaaa<br />
</td>
<td style="width: 200px; height: 0px;">
<div style="background-color: #f00; width: 100%; height: 100%;"></div>
</td>
</tr>
</table>
- td高度为0,里面的div高度为100%
https://bbs.csdn.net/topics/392566943
css处理浏览器输入框记住账号密码后的背景色
input:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
}
https://blog.csdn.net/u011752272/article/details/66973367
CSS实现宽度自适应100%,宽高16:9的比例的图片或者矩形
https://www.cnblogs.com/yf-html/p/9626000.html
img 图片在div里的垂直居中
- 方法1:transform
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
https://blog.csdn.net/qikule/article/details/83087729
- 方法2:position
div {
width: 200px;
height: 200px;
position: relative;
}
img {
width:80px;
height:50px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;//使其垂直居中
}
http://www.divcss5.com/css3-style/c56620.shtml
css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
height:calc(100% - 20px);
* 减号两边一定要打空格,不然会失效
https://blog.csdn.net/u011630575/article/details/49097205/
https://blog.csdn.net/qq_35771141/article/details/90598813
标签中识别空格
<div v-html="data" style="white-space:pre"></div>
- 会根据代码中的换行,展示对应的样式
https://blog.csdn.net/qq_36370731/article/details/78069056
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示,取值有:
- normal:默认,忽略文本中所有的空白、换行符;只有文本存在
或文本达到框的约束时,文本才会换行- nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行
- pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在
或文本中有换行符时,文本才会换行- pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行- pre-line:会略文本中的空白符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
https://blog.csdn.net/liuxiao723846/article/details/118994673
去掉textarea小三角,禁止调整大小
resize: none;
https://blog.csdn.net/qianqian901108_/article/details/52299634
实现图片翻转
transform:rotateY(180deg);
div禁用,不可点击(只是样式,实际操作,可以在点击事件里加判断)
<div :class="versionPage == 1?'notclick':''"></div>
.notclick {
cursor:not-allowed;
opacity: 0.6;
}
https://blog.csdn.net/wyh_mwk/article/details/81777270
https://blog.csdn.net/Devio_001/article/details/90291984
输入框的高度宽度,根据输入内容自适应
<div id="textarea_div1" contenteditable="true" v-html="form.make_demand" style="white-space: pre;">
- 1、contenteditable="true" 将div写成可编辑,可输入内容
- 2、直接绑定输入值,v-html绑定值,可以获取到回车等格式,设置为white-space: pre;可以按回车后的格式展示,宽高不定,可以设置最大宽度,也可以不设置,高度自适应
- 3、获取值:this.form.make_demand = $('#textarea_div1').html(),存的数据为带有样式的字符串
https://www.cnblogs.com/chenbeibei520/p/9802545.html
css3 动画平移效果
@keyframes changDeg{
0%{
transform:translate(0, 0);
}
50% {
transform:translate(50px, -50px);
}
100%{
transform:translate(0, 0);
}
}
img {
width: 100%;
position: absolute;
left: 0;
animation:changDeg 30s linear 0s infinite;
}
https://blog.csdn.net/wangzhneg123/article/details/87894305
父元素的宽度不定,随子元素变化(让父元素适应子元素的宽高)
- 给父元素设置 display:inline-block;
https://bbs.csdn.net/topics/391951170
https://segmentfault.com/q/1010000014474283
@media 响应式媒体查询
/*屏幕大于1200排序(大屏幕电脑)*/
@media screen and (min-width: 1200px){}
/*屏幕在1024px到1199之间(中屏幕电脑)*/
@media screen and (min-width: 1024px) and (max-width: 1199px){}
/*屏幕在768px到1023之间(小屏幕-pad)*/
@media screen and (min-width: 768px) and (max-width:1023px){}
/*屏幕在480px到768之间(主要是手机屏幕)*/
@media screen and (max-width: 768px){}
https://www.mybj123.com/2975.html
button的四种状态
1.普通状态2,鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态
.btn:hover {
background-color: #ff0000;
}
/*active 要在后面 否则会被hover覆盖*/
.btn:focus {
background-color: #00ff00;
}
.btn:active {
background-color: #000000;
}
https://blog.csdn.net/isaisai/article/details/41944033
鼠标:不可点击
鼠标不可点击主要是两种表现:
1.鼠标不可点击时的显示状态
cursor: not-allowed
2.鼠标原有的事件不能实现
pointer-events:none
https://blog.csdn.net/weixin_42322501/article/details/81941443
vue中应用
:style用法(多个样式用逗号隔开)
<p :style="{color:(tabIndex==0?red:‘#fff‘)}">样式</p>
http://www.mamicode.com/info-detail-2179823.html
:class 用法
<p :class="{'active':tabIndex==0}">样式</p>
<p :class="{'active':tabIndex==0, 'active2': flag}">样式</p>
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
// classA 是固定不变的,classB与classC 是根据条件来判断是否加入
https://www.jianshu.com/p/e4248eb7c92a
- :class 多个样式
:class="[email!=''?'makeColor':'',result.email===false?'makeColorRed':'']"
https://blog.csdn.net/zhq_zvik/article/details/86692280
css 小圆点
.circle {
width: 14px;
height: 14px;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
background: #f5a400;
}
https://blog.csdn.net/wangzongyang1025_/article/details/87869381
纯css三角形
向上的三角形
<div class="triangle_border_up">
<span></span>
</div>
<style>
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
</style>
https://www.cnblogs.com/blosaa/p/3823695.html
带文字的三角形
<template>
<!-- 右侧三角形的图片 -->
<div class="triangle-image">
<div
class="triangle-image_bg"
:style="{
borderBottomColor: bgColor ? bgColor : ''
}"
></div>
<div class="triangle-image_text">{{ titleText }}</div>
</div>
</template>
<script>
export default {
name: 'TriangleImage',
props: {
bgColor: {
type: String,
default: '#BD3124' // 默认红色
},
titleText: {
type: String,
default: '迟到'
}
}
}
</script>
<style lang="less" scoped>
.triangle-image {
position: absolute;
top: 0;
right: 0;
text-align: right;
width: 28px;
height: 28px;
&_bg {
width: 0;
height: 0;
border-bottom: 28px solid transparent;
border-right: 28px solid transparent;
border-left: 28px solid transparent;
transform: rotate(45deg);
position: absolute;
top: -4px;
right: -18px;
}
&_text {
font-size: 12px;
color: #ffffff;
transform: rotate(45deg);
position: relative;
top: 0;
right: 0;
}
}
</style>