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>

转载于:https://www.cnblogs.com/fxty/p/7044847.html

css选择器及float(浮动)相关推荐

html中使浮动的字为行排列,CSS布局：float浮动
优秀文章:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 浮动细节原理所有元素设置float浮动之后,会脱离文档流 ...
CSS 学习-1. Float(浮动)
前言 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),用在图片附近可以实现文字环绕的效果,也可以使用在布局上. Float 浮动什么是浮动?浮 ...
CSS布局之float浮动
之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料 ...
CSS中，float浮动的理解
浮动什么意思呢,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢 <div style="width:100px;">1111 ...
CSS布局讲解-float浮动布局使用
我们在讲解float之前,需要大家理解一个东西-标准文档流什么是标准文档流呢?宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流", ...
Css margin 和 float浮动
1.浮动: 定义: 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思.它有四个值 none: 表示不浮动,默认 right:表示右浮动 left: 表示左浮动 f ...
CSS——灵活布局 float (浮动属性)
目录浮动概述浮动定位 float属性 clear属性 float与overfloat 第一部分 1. 浮动概述浮动定位是指(特点) - 将元素排除在普通流之外,即元素将脱离标准文档流 - 元素将 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

css选择器及float(浮动)

css选择器及float(浮动)相关推荐

最新文章

热门文章