首页 > 代码库 > css知识点2@qunar

css知识点2@qunar

2024-07-13 11:26:22   221人阅读

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=http://www.mamicode.com/"#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=http://www.mamicode.com/"0" /><span>蓝色</span></label></li>			 <li><label><input type="radio" name="colour-group" value=http://www.mamicode.com/"1" /><span>红色</span></label></li>			 <li><label><input type="radio" name="colour-group" value=http://www.mamicode.com/"2" /><span>黑色</span></label></li>		 </ul>	</fieldset>	<fieldset>		 <legend>选中下面的项试试</legend>		 <ul>			 <li><label><input type="checkbox" name="colour-group2" value=http://www.mamicode.com/"0" /><span>蓝色</span></label></li>			 <li><label><input type="checkbox" name="colour-group2" value=http://www.mamicode.com/"1" /><span>红色</span></label></li>			 <li><label><input type="checkbox" name="colour-group2" value=http://www.mamicode.com/"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进行设置

10、border

　　border-color的取值依赖于color的取值，同样可以对border-color进行设置。


联系
我们