CSS-小记

来源：互联网发布：网络骗贷十六万借呗编辑：程序博客网时间：2024/05/20 05:30

常用样式

/* 单行文字溢出虚点显示*/.ell {    text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden;}/* 垂直居中 */.ver-center {    &:after, &::after {        content: "";        display: inline-block;        width: 0;        height: 100%;        vertical-align: middle;    }}/* 清除浮动 */.clearfix() {    &::after {        content: " "; // 1        display: table; // 2        clear: both;    }}/* 半透明遮罩 */.gt-backdrop {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    background-color: #2f2e2e;    filter: alpha(opacity=50); //!*IE滤镜，透明度50%*!    -moz-opacity: 0.5; //!*Firefox私有，透明度50%*!    opacity: 0.5; /*其他，透明度50%*/}

美妙的1-2-3-4

（上下左右）·（上下-左右）·（上-左右-下）·（上-右-下-左）

margin: 5px; //上下左右margin: 5px 10px; //上下-左右margin: 5px 10px 15px; // 上-左右-下margin: 5px 10px 15px 20px; //上-右-下-左

自适应正方形

<style type="text/css">    .demo {        width: 40%;        height: 0;        overflow: hidden;        margin: 0;        padding-bottom: 40%; /* 关键就在这里 */        background: green;    }</style><div class="demo"></div>

阅读全文

0 0