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

来源:互联网 发布:linux split 编辑:程序博客网 时间:2024/04/30 03:00

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;
}

0 0
原创粉丝点击