CSS高级用法

1、三角形

/*等腰三角形*/
.triangle {
    height: 0;
    width: 0;
    line-height: 0;		/*兼容性代码*/
    font-size: 0;	/*兼容性代码*/
    border: 100px solid transparent;
    border-left-color: brown;
}

/*直角三角形*/
.triangle {
    height: 0;
    width: 0;
    line-height: 0;
    /*兼容性代码*/
    font-size: 0;
    /*兼容性代码*/
    border-color: transparent transparent transparent red;
    border-style: solid;
    border-width: 200px 0 0 100px;
}

2、鼠标样式

3、表单轮廓线

input {
	outline: none;
}

4、文本域防拖拽

textarea {
	resize:none
}

5、文字和图片、表单的垂直对齐

vertical-align:用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。

6、图片底部边缘空白问题

• 由于图片默认对齐文字的基线，图片下部边缘会给文字基线下部分留一段空白。
  解决方案1：可以给图片的vertical-align: middle | top | bottom;
  解决方案2：给图片设置display:block;(只有行内元素和行内块元素存在基线对齐的问题)
  
  

7、单行文字溢出省略号显示

需要同时满足3个条件：

• 先强制一行显示文本
• 超出的部分隐藏
• 文字用省略号替代超出的部分

white-space: nowrap; /*默认normal自动换行*/
overflow: hidden;
text-overflow: ellipsis;

8、多行文字溢出省略号显示（兼容性较差）

• 适用于webkit及移动端 ，IE不显示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

9、CSS初始化

• 每个页面必须初始化

* {
    margin: 0;
    padding: 0
}

em,
i {
    font-style: normal
}

li {
    list-style: none
}

img {
    border: 0;
    vertical-align: middle
}

button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
/* \5B8B\4F53"是宋体的意思 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}