css 记录
2020-09-26 本文已影响0人
小米和豆豆
段落属性
p{
/* font-family: "楷体","宋体";
font-variant: small-caps;*/
/*文字属性的简写形式*/
/*font: 40px/50px "serif";*/ /*大小 行高*/
/*text-decoration: underline;*/ /*下滑线*/
/*text-align: center; */ /*一般用于单行文本居中*/
/*text-indent:220px; */ /* 首行缩进*/
/*line-height: 150px;*/ /*行高*/
/*word-spacing:20px;*/ /*单词间隔*/
/*letter-spacing:30px; */ /*字符间隔*/
/*text-transform: uppercase;*//*转换成大写字母*/
/*text-transform: lowercase;*//*转换成小写字母*/
/*text-transform: capitalize;*//*首字母大写*/
}
img{
// vertical-align:middle;
vertical-align:top;
/*vertical-align:bottom;*/
}
背景属性
div{
height:400px;
width: 1700px;
background-color: red;
background-image: url(img/img5.jpg);
background-repeat: no-repeat;
/*background-repeat: repeat-x;*/ /* 图片像素小于背景盒子时,重复排列效果*/
/*background-repeat: repeat-y;*/
/*background-position:0 -110px;*/ /*图片显示在盒子里的位置 x不动,y向下110个像素*/
/*background :color image repeat position attachment;*/
/*background:red url(img/4.jpg) 20px -30px no-repeat fixed;*/
/*background-size:100% 100%; /*不等比例放大填充*/
background-size:cover:; /*等比例放大后填满*/
/*background-size:contain:;*//*使原始图像的宽度或高度完全等于盒子的宽度或高度*/
background: url('./0.jpg') background-position/background-size no-repeat; //position size组合 用 / 隔开
}
/*父盒子高度由背景图大小自动撑开,保质背景图不拉升失真*/
.box{
width: .5rem;
background: #ddd;
position: relative;
}
.box::after{
content: ' ';
display: block;
padding-top: 280%; // height/width*100%
background: url('./0.jpg') 10px/cover no-repeat;
}
//图片自适应填充 类似背景图的 background-size:cover:
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
圆角 阴影 渐变
.div1{
width:100px;
height:100px;
margin-top:10px; /*框距*/
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
box-shadow:2px 2px 12px #666; /*阴影*/
text-shadow:2px 2px 2px #666;
white-space:nowrap;
overflow: hidden; /*不显示的字省略号代替*/
text-overflow: ellipsis;
background: linear-gradient(to top,red,yellow); /* 线性渐变;*/
/*background: radial-gradient(red,yellow); */ /*径性渐变*/
}
清除浮动
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
不显示的字省略号代替
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
超出3行省略号代替
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
隐藏滚动条
//兼容火狐
/*三角箭头的颜色*/
scrollbar-arrow-color: #ddd;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: rgba(250, 250, 250, 0.3);
/*滚动条整体颜色*/
scrollbar-highlight-color: #ddd;
/*滚动条阴影*/
scrollbar-shadow-color: rgba(250, 250, 250, 0.3);
/*滚动条轨道颜色*/
scrollbar-track-color: #ddd;
::-webkit-scrollbar {
width: 10px;
height: 6px;
background-color: #29326d;
border-radius: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 6px;
background-color: #29326d;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #4276bd;
cursor: pointer;
}
居中
已知高度1 width: 600px; height: 400px;
position:absolute;
left: 50%;
top: 50%;
margin-top: -200px;\/* 高度的一半 */\
margin-left: -300px;\/* 宽度的一半 */\
已知高度2
position: absolute;//
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
已知高度3
/*父级垂直居中*/
display: flex;
align-items: center;
/*自己本身设置水平居中*/
margin: 0 auto;
未知高度
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
画一个三角形
.a{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>