css知识点2@qunar

浏览数：23 / 时间：2015年06月09日

1、import

　　import要放在内部规则前面，不然就会无效；

　　impor 引入多个文件，会出现闪烁，浏览器会先去下载import引入的css文件，然后再去解析，应该避免使用import

2、important

　　important优先级最高。但important IE6下的bug;

　　IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码：

　　div{color:#f00!important;color:#000;}
　　在上述代码中，IE6及以下浏览器div的文本颜色为#000
　　!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

　　div{color:#f00!important;}
　　div{color:#000;}
　　在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

3、自适应布局

　　overflow:hidden，通过设置overflow:hidden;可以使得content宽度自适应。

　　<style>
　　.demo{
	width:960px;
	height:500px;
	margin:0 auto;
　　}
　　.aside{
	float:left;
	width:200px;
	height:200px;
	margin-right:20px;
	background:#aaa;
　　}
　　.content{
	height:200px;
	overflow:hidden;
	background:#0ff;
　　}
　　.inner{
	margin:0 10px 0 10px;
　　}
</style>

　　<div class="demo">
	<div class="inner">
		<div class="aside">aside</div>
	</div>
	<div class="content">通过设置overflow:hidden;可以使得content宽度自适应,但是如果把aside的float设置成left，还要调整边距
	</div>

　　</div>

4、行高

　　IE6 元素有固定的行高，当高度小于最小的行高时，即使定义更小的高度仍然会失效。但可以通过设置overflow:hidden解决

 .demo{
 	width:500px;
	height:1px;
	overflow:hidden;
	background:#aaa;
}
<div class="demo"></div>

5、css选择器

　　1.子选择器E>F，选择所有作为E元素的子元素F。

　　2.相邻选择器 E+F，选择紧贴在E元素之后F元素。

　　3.兄弟选择器 E~F，选择E元素后面的所有兄弟元素F。

　　4.nth-child（n），n是从1开始计数的，类似这样的都是从1开始计数。

　　5.E:last-child：匹配父元素的最后一个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

6、target

　　匹配相关url指向的元素；

　　.b:target{color:#f00}
　　<a href="#a">click</a>
　　<div id="a">change red</div>

　　css target使用前提：a便签的href的取值要与匹配的便签的id一致；

7、增强表单

　　为什么加大响应区域：

　　增强用户体验

　　以复选框为例：

　　　　原本：你只能点击中复选框才能选中或者取消选中
　　　　增强：当你点击复选框或它旁边的文本时都能选中或者取消选中

使用label标签：
　　<label for="blue"><input type="checkbox" id="blue" />蓝色</label>
或者：

　　<input type="checkbox" id="blue" /><label for="blue">蓝色</label>
　　

　　这里利用的是 label 标签的 for 属性，for 的值和需要加强响应区域的复选框的id相同即可，与位置无关；
　　
　　在label中设置for属性，使其取值等于input id的取值，来兼容ie6；

　　想在一行的最后，点击任然可以选中，可以这样设置，感觉这样需求不多

　　 <label for="blue"><input type="checkbox" id="blue" />蓝色</label>
　　.label{
　　	display:block;  /*因为行内元素没有宽高*/
　　}
　　<label for="blue"><input type="checkbox" id="blue" />蓝色</label>

8、checked伪类

　　匹配用户界面上处于选中的元素，常用于input type为radio与checkbox；

　　<style>
	input:checked+span{background:#f00;}
	input:checked+span:after{content:" 我被选中了";}
　　</style>

　　<form method="post" action="#">
	<fieldset>
		 <legend>选中下面的项试试</legend>
		 <ul>
			 <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
			 <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
			 <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
		 </ul>
	</fieldset>

	<fieldset>
		 <legend>选中下面的项试试</legend>
		 <ul>
			 <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
			 <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
			 <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
		</ul>
	</fieldset>
　　</form>

　　checkbox可以实现选中多个，不互斥；而radio可以实现互斥，只能选中其中的一个。

　　通过checked可以实现隐藏、显示之间的切换。

9、transform

　　允许我们对元素进行旋转、缩放、移动或倾斜，这里只对缩放进行解释；

　　浏览器默认字体大小是12px，如果希望页面字体大小为10px；

　　<style>
　　.demo{
	font-size:11px;
	-webkit-transform:scale(10/12);
　　}
　　span{
	display:inline-block;
　　}
　　</style>
　　<span class="demo">非大声道大神发</span>

　　缩放比例是相对于浏览器默认的字体大小进行设置，还要对span进行设置