总结css使用技巧

 

1、图片相关：

(1) 让大图片适应小屏幕img{max-width:100%}，但是ie6不支持max-width，所以在ie6中将语句改成img{width:100%}

(2) 让图片时刻都能充满整个屏幕：使用背景图片，background-size:cover；但是外边的div需要设置宽和高

(3) 让图片不虚化：图片宽度设置100%，不设置高度；图片的高度会根据宽度的变化而变化 

1、IE条件注释

 

(1) 

<!--[if IE]> 

        <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />

 < ![endif]-->

区分不同的IE版本

　　<!--[if IE 6]> - targets IE6 only --> 
　　<!--[if gt IE 6]> - targets IE7 and above --> 
　　<!--[if lt IE 6]> - targets IE5.5 and below --> 
　　<!--[if gte IE 6]> - targets IE6 and above --> 

　　<!--[if lte IE 6]> - targets IE6 and below -->

3、font-size的基准：

浏览器的基准大小是16px,可以先将基准字体大小调成10px，在布局的时候body{font-size:62.5%}，其他地方的字体统一使用em作为单位2.4em就表示24px

4、图片和文字上下居中：对于外部div同时设置line-height和vertical-align，里面的标签设置vertical-align

 

1. <div class="detail_title">  
2.    <img src="./index/img/灯泡_bulb3.svg" alt="">  
3.    <label>如何使用mideo</label>             
4. </div>  
5. 1. .detail_title{height:4rem;line-height:4rem;vertical-align:middle;padding:0 1rem;}  
   2. .detail_title img{width:2rem;height:2rem;vertical-align:middle;}  
   3. .detail_title label{font-size:1.8rem;vertical-align:middle;} 

5、div居中方式

 

1. <div id="root">  
2.     <div id="child" style="width:200px">make me center</div>  
3. </div>  

1. #child{  
2.     margin-left: auto;  
3.     margin-right: auto;  
4. }  

    或者

 

1. #child{  
2.     margin-left: 50%;  
3.     margin-right: 50%;  
4.     width: 0px;  
5. }  

6   父级是realtive，子集是absolute时，添加z-index的值无效时

    如果同一个页面中有多个这种布局，每个的父级的z-inde的值要比子集小；而且每个父级和子集的值要不相同；

    如果时普通的z-index值无效，一种情况是父级定义的是position:relative子集的index可能会失效，这种情况的话将父级的position 改成absolute；还有一种情况是父级有浮动，导致z-index无效，去除父级的浮动即可

7、用css修改a标签的title样式

 a {position:relative;} 
 a:hover:before {
      position:absolute;
      top:20px;
      right:0;
      content:attr(title);
      color:#000000;
      border:1px solid #242424;
      background-color:#E5E5E5;
}