常用CSS

常用flex


/* 图片和文字一行垂直对齐 */
display: flex;
flex-direction: row;
align-items: center;

/* 子元素水平垂直居中 */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

圆角


border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

a


a:link {text-decoration: none;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}

媒体查询


/* 小于某个宽度 */
@media screen and (max-width:900px) { 

}

/* 两个宽度之间 */
@media screen and (max-height: 479px) and (min-width:1410px)  { 

}

选择


/* 间隔 */		
p:nth-child(odd) {

}
p:nth-child(even) {

}
/* 第一行 */
p:nth-child(even) {
  background:#0000ff;
}
/* 第二行 */
p:nth-child(odd) {
  background:#ff0000;
}
/* 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。 */
p:nth-child(3n+0) {
  background:#ff0000;
}
/* 第n个 */
p:nth-child(2) {
  background:#ff0000;
}

文字超出用。。。


width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

垂直和水平居中


display: flex;
align-content: center;
justify-content: center;