css三角和初始化

1.CSS三角

（1）三角

	height: 0;
	line-height: 0;
	font-size: 0;
	border:5px solid transparent ;
	border-bottom-color: pink;

这样设置的是一个头朝上的等腰三角形。一般用于做对话框等。
其余三角设置基本方式和此相同。

（2）样例

京东价格框

html

<div class="jd">
			<span class="jd1">1600<i></i></span>
			<span class="jd3">5200</span>
		</div>

css

			width: 100px;
			height: 20px;
			border: 1px solid black;
			margin: 100px auto;
		}
		.jd1{
			float: left;
			position: relative;
			width: 50px;
			height: 100%;
			background-color: red;
			margin-right: 5px;
		}
		.jd1 i{
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 0;
			border-color: transparent white transparent transparent;
			border-style: solid;
			border-width:20px 10px 0 0 ;
			
		}
		.jd3{
			text-decoration: line-through;
		}

效果

css初始化

不同浏览器对于有些标签的默认值是不同的，为了消除不同，照顾浏览器，我们需要对css进行初始化。

以京东网页为例

<!-- 所有标签内外边距清零 -->
* {
    margin: 0;
    padding: 0
}
<!-- em,i斜体的文字不倾斜 -->
em,
i {
    font-style: normal
}
<!-- 去除li小圆点 -->
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
	<!-- "\5B8B\4F53" 兼容浏览器 -->
}

body {
	<!-- 抗锯齿性 让文字显示更加清晰 -->
    -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
}

hidden;
clear: both;
display: block;
content: “.”;
height: 0
}

.clearfix {
*zoom: 1
}