web响应式布局一些基本css 持续更新

1.不定宽高的水平垂直居中

.myoff-wrapper{

position:absolute;

top:50%;

left:50%;

z-index:3;

-webkit-transform:translate(-50%,-50%);

border-radius:6px;

background:#fff;

}

flexbox 版

{

justify-content:center; //子元素水平居中

align-items:center; //子元素垂直居中

display:-webkit-flex;

}

媒体查询 用于给不同的显示器分辨率设定单独的样式

@media screen and (max-width:1024px){

pagewrap {width:95.5%}

conten {width:62%;}

content.article.hr{width:66%;margin-left:34%;}

}

3.弹性图片

{max-width:100%;}

4.当行文本溢出

.intwoline{

display:-webkit-box!important;

overflow:hidden;

text-overflow:ellipsis;

word-break:break-all;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

}