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>

时间: 2024-08-25 05:07:00

css选择器及float(浮动)的相关文章

CSS布局之float浮动

之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料是其一,但我觉得更重要的是把你遇到的问题和解决方法记录下来..这样以后你的开发效率是多高.言归正传,对浮动进行一些记录. 1.首先,网页是一个文档流,默认按块元素和级联元素从左到右,从上至下的依次显示.而Float浮动元素,就好比是漂浮在了文档流之上,不占据文档流的位置. 如下就是不进行任何浮动的文

Css布局系列-float 浮动

准备讲一个布局系列由浅入深,先讲解一些基本属性理论,在通过实例与理论相结合,争取讲明白讲清楚.欢迎大家一起讨论,一起学习一起奋斗.废话少说,先去官方网站看看是怎么解释定义float浮动. 官方定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄.假如在一行之上只有极少的空间可供浮动元素,那么这个元素

CSS清除浮动_清除float浮动

2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式.这样即可清除浮动. 具体CSS代码: .divcss5{ width:400px;border:1px solid #F00;background:#FF0} .divcss5-left,.divcss5-right{width:180px;hei

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼.混球 一.引言 你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

归纳篇(一)CSS的position定位和float浮动

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

CSS float浮动的深入研究、详解及拓展

CSS float浮动的深入研究.详解及拓展(一) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=583 一.浮动的原始意义是什么? 浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已.而我们目前用浮动实现页面布局本不是浮动该干的事情. 二.浮动的本质是什么? 我将浮动的本质定义为“包裹与破坏”! 1. 浮动的“包裹性”撇开浮动的“破坏性”,浮动就是个带有方位的d

子级用css float浮动 而父级div没高度不能自适应高度

子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>父div不自适应高度实例</title> <style> .divcss5{width:500px;border:1px solid #0