CSS 几个通用语法

184 阅读1分钟

调整文字与行内块(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}