调整文字与行内块(span来举例)的相对位置
span {
display: inline-block;
vertical-align: middle;
margin-top: px; 微调就好了
}
去除图片底测缝隙,使图片和文字的基线对齐
img {
vertical-align: top;
}
常用link
<!-- 链接里的小图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- normalize 里面css 初始化 针对浏览器 -->
<link rel="stylesheet" href="css/normalize.css" />
<!-- base 里面只写公共样式 是对网页 头部和底部样式 -->
<link rel="stylesheet" href="css/base.css" />
<!-- 只写首页的 独有的-->
<link rel="stylesheet" href="css/index.css">
清除浮动
- 浮动末尾加
<div style=”clear:both”></div> - 父级加
overflow: hidden - 伪元素
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
去除默认样式
*{margin:0;padding:0}
li{list-style:none}
img{vertical-align:top;border:none}