首页 > 代码库 > css选择器及float(浮动)
css选择器及float(浮动)
--------------------------选择器( css有就近原则)-------------------------------
选择器名称 在css表的形态 在html中的调用
?html标记符选择器: p,a,img,div,span.... 不用另外加任何东西
?具有上下关系的选择器: div span a (中间是空格) 不用另外加任何东西
?类(class)选择器: . ( 比如: .header) <div class="header "></div>
?id选择器 (一般不用id,留给js来操作) # ( 比如: #text ) <div id="text "></div>
?群组选择器 (优化代码) .left , .right , p , ul , li ?伪类选择器 (选择器上加上:hover) a:hover{color:#ccc}
选择器的优先级: 行间 > id选择器 > class选择器 > 标记符选择器
2.浮动(float)
功能:用于在普通元素流布置规则以外放上元素。
数值: none -无改动。
left -将其它元素内容放到浮动元素右边。
right -将其它元素内容放到浮动元素左边
---------------------float(浮动)-------------------------
为什么要 清除浮动????
浮动带来的负面影响:
会使父级对象的高度消失,
导致背景图片,
边框不能正常显示,
margin,padding设置值不能正确显示(特别是上下边的padding和margin不能正确显示);
清除浮动的三种方式:( 1 ):直接给父级确定的高度; (项目中的扩展,不现实 )
( 2 ):在父级的css里直接加上 overflow:hidden; 但是不能和height同时出现; overflow:hidden;和height同时出现(功能:超出部分被隐藏; )
( 3 ):a:在css里面 .***{ clear:both;} b:在父级结束之前新添 <div class="***"></div>
<div>
<div class="***"></div>
</div>
css选择器及float(浮动)