样式收集小能手

标签

<hr />标签存在margin距离

标签

color:#
font-family:""
font-size:14px
font-weight:
border:像素 类型 颜色(复合属性)
width:100px
height:
text-align:center;			内容居中
vertical-align:bottom;		垂直居中
letter-spacing:			设置字符间距，？5px
text-decoration:none;		取消a标签的下划线
background-color:
line-height:			行高
display:none;			设置元素不可见
display:block;			设置元素可见
margin:0px auto				边距(上，右，下，左)
padding:				内填充
list-style:none;			取消列表的样式
overflow:hidden;		内容溢出隐藏
float:left;				元素向左浮动
background-color		背景颜色
background-image:url("")		背景图片
background-position	背景图片定位,难点
background-size		设置图片大小
background-repeat:		设置图片是否平铺

特殊

background:linear-gradient(angle|dirction,color,color)		颜色渐变
border-radius: 10px;	圆弧边框，如果正方形是50%，那就变成圆形
white-space:nowrap;	强制不换行
word-wrap: break-word; word-break: break-all;允许换行
letter-spacing : 14px;	字间距
placeholder="XXX"	输入框的不可选中文本
filter: blur(10px)	模糊背景
html { overflow-y: hidden; }		去除页面中的滚动条
opacity		透明度
font-family: "Microsoft YaHei", "微软雅黑";
autocomplete="off" 		去除输入提示
/* 打点三式 */ 
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

边框相关

box-shadow: 0 3px 0 #d7e4ed;	DIV阴影
参数：水平  垂直  模糊度  颜色  (inset内部阴影)
border-image-source:url("/路径")	设置边框的背景图片
border-image-slice:19			切割边框的背景图片，指切割4个角
border-image-repeat:round		/stretch拉伸/repeat平铺/推荐使用round铺满

文本修饰

text-shadow      阴影
参数：水平  垂直  模糊度  颜色

鼠标样式

cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize |
 n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)

去除输入框/下拉框选中时的蓝框

input {
    outline: none;
}
select{
    outline: none;
}

按钮

button:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

设置滚动条的样式

overflow:auto先设置DIV超出滚动条

#right_middle_left::-webkit-scrollbar-thumb { 
border-radius: 10px;
 -webkit-box-shadow:
inset 0 0 6px rgba(0,0,0,.3);
 background-color: #555; 
} 
#right_middle_left::-webkit-scrollbar{ 
width: 9px;
height: 9px;
}

去除bootstrap模态框抖动

body { padding-right: 15px !important; padding-right: 16px !important; }

一个翻转的div ，可以做对话框的尖头

.rotate{
  margin-top:-20px;
  width: 40px;
  border-width: 20px; 
  border-style: solid;
  border-color:#292929;
  transform: rotate(45deg);
}

设置字体(并指定路径)

CSS选择器

+ 选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
~ 选择器 ：作用是查找某一个指定元素的后面的所有兄弟结点。
//table取除了第一个以外的tr
.table tr~tr:hover {
    background-color: #f0f2f579;
}


具有href属性，并且以E开头的a标签
a[href^="E"]{
}
具有href属性，并且以mp4结尾的a标签
a[href$="mp4"]{
}
具有href属性，并且包含l的a标签
a[href*="l"]{
}


目标选择器，如果该元素被锚点，则生效

p:target{
}
选中选择器，选中文字后生效

p::selection{ 
}


设置第一个文字样式

div:first-letter{
}
设置第一行文字样式

div:first-line{
}


li:first-child{}	第一个
li:last-child{}		第一个
li:nth-child(3){}	选择第几个

转换

放在父容器，透视效果，3d转换要用
perspective: 1000px;

子元素也进行3D旋转
transform-style: preserve-3d;


多个转换同时进行用空格隔开
/* 平移横、纵 */
transform: translate(50px, 50px);
/* 旋转 */
transform: rotate(60deg);
/* 中心放大 */
transform: scale(2);
/* 沿着x轴倾斜30度，沿着y轴方向也倾斜30度 */
transform: skew(30deg, 30deg);
/* 3d变换则加一个轴 */
transform: scaleZ(300) rotateY(30deg);

快速让div在父级div居中

父子级div必须都有固定高宽
父级设置相对定位
position: relative;

子级设置边距margin为自适应，绝对定位，并且各边0；
margin: auto;
position: absolute;
top: 0;left: 0;bottom: 0;right: 0;

手动自适应屏幕大小

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

样式收集小能手

原文：https://www.cnblogs.com/lolojia/p/12958062.html