自己几个常用的CSS片段,多为CSS3

前端
评论

叔叔

偶尔添加

  1. 除去最后一个li的边框

    1
    2
    3
    li:not(:last-child) {
    	border: 1px solid black;
    }

    浏览器支持情况：IE9+

  1. 文字过长省略号显示 

    1
    2
    3
    4
    5
    6
    p {
    	width: 100px;
    	text-overflow: clip;
    	overflow: hidden;
    	white-space: nowrap; /*强制不换行*/
     }

    浏览器支持情况：IE11都不支持！firefox加前缀

  2. 去浮动，撑开元素！其实一般情况之遥氟元素一个overflow:hidden就可以了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .clearfix {
    	*zoom: 1; /* 兼容IE*/
     }
     .clearfix:after {
    	content: '\200B' ; /* 空字符*/
    	display: block;
    	height: 0;
    	clear: both;
     }

    浏览器支持情况：allllllll

  3. 绝对居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .parent {
    	position: relative; 
      }
     .child {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	margin: auto;
    	height: 999px;
    	/* 这个方案需要子容器有一个固定的高，或百分比自适应于外部。它的高度不能是height:auto*/
     }

  4. 单个颜色实现hover,active颜色变化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .button:before  {
    	position: absolute;
    	left:0;right:0;bottom:0;top:0;
    	z-index:-1;
    	background: rgba(0, 0, 0, .1);
    }
    .button:hover:before {
        content: '';
    }
    .button:after  {
    	position: absolute;
    	left:0;right:0;bottom:0;top:0;
    	z-index:-1;
    	background: rgba(255, 255, 255, .2);
    }
    .button:hover:after {
        content: '';
    }
    /*首先button要创建层叠上下文*/

  5. inline元素实现换行

1
2
3
4
.inline:after {
    content: 'A';/*由0x000A简写而来，换行符*/
    white-space: pre;/*保留元素后面的空白服和换行符*/
}