常用css样式（2）旧的

在vue中使用高度100%无法实现时，可使用100vh来实现页面的填充

照片居中 display: table-cell;

vertical-align: middle;（前两个垂直居中）

在它的父级里面加

text-align: center;（水平居中）

cursor:pointer;（小手状态）

default（光标状态）

动画名称 动画时间 动画方式 动画延时 动画次数 动画的方向

animation: donghua 2s linear 1s infinite alternate;

当文本内容为英文或者数字是，超出容器溢出 使用本方法

/*按兼容性写*/

word-break: break-all;

word-wrap: break-word;

/*也有加上overflow: hidden的*/

width: 272rem;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;单行文本折行

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden; 多文本折行

em: 本身元素的font-size值的相对大小（2em就是2倍本元素font值大小）

rem:根元素（html）的font-size值的相对大小

vw：viewport（屏幕）宽度的1%

vh：viewport（屏幕）高度的1%

%：相对于父元素的大小

px：实际像素值

第一步：元素大小单位选用rem。

第二步：根据设计稿的屏幕宽度设置html的font-size大小，且单位用vw。

1200px的屏幕，1vw就是12px，375px的屏幕，1vw就是3.75。

定位

position: absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto; 定位居中

html{

/* font-size: 100px; */

font-size: 13.333333vw ;

}这样就不应写移动端的js了

使用rem

html{font-size: 100px;}

body{font-family:"微软雅黑";font-size: 16px;}

这两句都是必不可少

属性选择器：

CSS2中的属性选择器 E[attr] 指定了属性名称，

但没有指定属性值 E[attr = value] 指定了属性名称，并且指定属性值 CSS3中新增属性选择器 E[attr^="val"] 选择拥有attr属性且属性值为val开头的E元素

E[attr$="val"] 选择拥有attr属性且属性值以val结束的E元素

E[attr*="val"] 选择拥有attr属性且属性值中包含val的E元素

.box p:nth-of-type(2){

background-color: tomato;

}（同一种属性）

display: flex;

flex-direction: column;

align-items: center;

background: linear-gradient(to top right,#4158D0,#C850C0,#FFCC70);

线性渐变

background: -webkit-radial-gradient(rgb(255, 251, 0),#25fa12);

径向渐变（从中心到四周）

background: -webkit-repeating-radial-gradient(center,#FF0000 10%,#6284FF 20%);

径向渐变重复

弹性盒子

/* 折行wrap为折行，nowrap为不折行 */

/* flex-wrap: nowrap; */

flex-wrap: wrap;

/* 设置弹性盒 */

display: flex;

/* 排列在y轴，(默认x轴) */

/* flex-direction: column; */

/* 排列方式为居中 */

/* justify-content: center; */

/* 自动分配距离 */

/* justify-content: space-around; */

/* 排列方式为两端对齐 */

/* justify-content: space-between; */

/* 和自动分配很像，距边框和标签距离都相同 */

/* justify-content: space-evenly; */

/* 侧轴对齐方式 */

/* align-items: center; */

/* align-items: flex-end; */

.box p:nth-child(4n){}(第4n个p元素设置)

eg：.demo {

width: 400px;

height: 300px;

border: 1px dashed #000;

display: table-cell;

vertical-align: middle;

text-align: center;

}

.demo img {

width: 200px;

height: 150px;

}

dotted - 定义点线边框

dashed - 定义虚线边框

solid - 定义实线边框

text-indent:2em;首行缩进2

取消使用padding多加的值box-sizing:border-box;

外边距塌陷，给父元素设置overflow:hidden;

行内块元素中间有缝隙而且行内块元素经常错位，用浮动解决。

如何触发一个盒子的BFC：

position:absolute;

display:inline-block;

float:left/right;

overflow:hidden;

相邻兄弟元素 用 +

单行文本溢出

.box{

width:200px;

widte-space:nowarp;//文本不折行

overflow:hidden;//溢出隐藏

text-overflow:ellipsis;//出现省略号

}