当前位置：文档之家 › css_float_解析学习

css_float_解析学习

  • 格式：doc
  • 大小：596.00 KB
  • 文档页数：9

什么是CSS Float？ 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。 fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。 下面让我们来详细了解下css float

1.Float的用处

除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。

浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置：

同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。 程序代码 需要用到的CSS样式 body{ margin:0px; padding:0px; text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px;} div,p,ul,li,h2,h3,h4,h5{ padding:0px; margin:0px;line-height:22px;} h1{ font-size:14px;} body >div{ text-align:left; margin:10px auto;} #box{ width:900px; text-align:left;} .box1{ width:370px;border:1px solid #f00;} .box3{border:1px solid #f00;} .box2{ width:370px;border:1px solid #f00;} .box2:after{display:block;clear:both;content:"";visibility:hidden;height:0;} .box1_1{ width:100px; height:70px;border:1px solid #6CF;} .clear{ clear:both; height:0px; width:0px; font-size:0px; line-height:100%; } .fl{ float:left;} .fr{ float:right;} .hidden{overflow:hidden;} span{ color:#f00; font-weight:bold;} .mar{ margin-left:20px;} .inmar{ display:inline; margin-left:20px;} .box1_2{ width:200px; float:left; height:100px; background-color:green;} .box1_3{ width:150px; height:100px; margin-left:200px; background-color:red;} .box1_4{ width:200px; float:left; height:100px; background-color:green;margin-right:-3px;} .box1_5{ width:150px; float:left; height:100px; background-color:red;} .box2_1{ margin-bottom:10px;float:left;width:80px; height:70px;border:1px solid #f00;} .box2_2{ float:left;width:80px; height:70px;border:1px solid #f00;} .padbot{ padding-bottom:10px;} 2．float浮动元素不占据正常文档流空间 由于浮动块不在文档的普通流中，所以文档的普通流中的块表现得就像浮动块不存在一样。 ·以下是3块div均未加float时在浏览器内显示如下图

代码：

代码：

3.浮动“塌陷”

·使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。在这里我们可以称为“塌陷”。如下图

代码：

代码：

代码：

代码：

4. IE6双边距问题

·IE6双边距问题：一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 在ie6内便产生双倍边距。如下图 IE7、IE8和Firefox IE6 代码：

代码：

5.IE6文本产生3象素的bug

·浮动IE6文本产生3象素的bug时指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。如下图

合集下载

CSS视屏学习笔记

CSS视屏学习笔记

CSS视屏学习笔记第一章：字体的相关设置前面的相关介绍请看另一本笔记。

第一节：字体的颜色设置实例如下：1.h2{Color：rgb（0%,0%80%）；<!--括号里分别表示红色分量，绿色，和蓝色>}2.p{Color：#333333；<!--十六进制表示>}3.span{Color：red；}效果如下：第二节：字体1.font-size：设置字体：2.Font-weight：定义粗细，blod和lighter3.Font-style：定义斜体italic为斜体，normal 为正常的字体；4.Text-decoration：下滑线underline，顶划线overline，删除线线line-through，闪烁blink(只在fox浏览器中显示效果)5.Text-tansform：单词小写，capitalize首字母大写，lowercase全部小写，uppercase 全部大写。

摸拟google标记：代码：<html><head><title>文字字体</title><style type="text/css">p{font-size:60px;font-weight:bold;letter-spacing:-13px;/*设置字体的间距*/font-style:italic;/*斜体*/}.span1{color:rgb(0%,10%,80%);}.span2{color:red;}.span3{color:yellow;}.span4{color:rgb(0%,10%,80%);}.span5{color:rgb(0%,500%,10%);}.</style></head><body><p><span class="span1">G</span><span class="span2">o</span><span class="span3">o</span><span class="span4">g</span><span class="span5">l</span><span class="span2">e</span></p></body></html>第三节：段落对齐方式1.文字对齐方式：vertical-align：top，bottom，center，及顶对齐，底对齐，居中对齐2.首字放大：及<p>和<span>联合起来实现的效果图如下：代码及注释：<html><head><title>文字字体</title><style type="text/css">span{font-size:50px;font-weight:bold;color:blue;float:left; /* 首字下沉*/}</style></head><body><p><span>众</span>人继续欣赏景色，发现温泉中云雾、五彩斑谰，原来温泉水中有种细菌，它们的颜色能随水温改变。

CSSHACK区分兼容ie5ie6ie7ff技巧,float闭合技巧（转载）...

CSSHACK区分兼容ie5ie6ie7ff技巧,float闭合技巧（转载）...

CSSHACK区分兼容ie5ie6ie7ff技巧,float闭合技巧（转载）...一、CSS HACK以下两种方法几乎能解决现今部分HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}2, IE6/IE77对FireFox*+html 与 *html 是IE特有的标签, firefox 暂不支持.#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed */}注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””“>”二、float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽./* Clear Fix */.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/* Hide from IE Mac \*/.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.。

css样式的书写顺序及原理

css样式的书写顺序及原理

css样式的书写顺序及原理刚开始学习前端的时候，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。

那么是怎么个顺序呢？（1）定位属性：position display float left top right bottom overflow clear z-index（2）⾃⾝属性：width height padding border margin（3）⽂字属性：font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow（4）背景：background border（5）css3中新增属性：content box-shadow border-radius transform……按照上述1 2 3 4 5的顺序进⾏书写。

⽬的：减少浏览器reflow（回流），提升浏览器渲染dom的性能原理：浏览器的渲染流程为——①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构②构建render树：DOM树和CSS树合并之后形成的render树。

③布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。

④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

css样式解析到显⽰⾄浏览器屏幕上就发⽣在②③④步骤，可见浏览器并不是⼀获取到css样式就⽴马开始解析⽽是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进⾏解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。

十天学会DIV+CSS-7

十天学会DIV+CSS-7

标准之路首页CSS 版式布局DIV+CSS 教程DIV+CSS 实例常用代码站长杂谈技术文档资源下载图片素材今天我们开始学习《十天学会web 标准(div+css)》的html 列表，包含以下内容和知识点：⏹横向列表菜单 ⏹用图片美化的横向导航 ⏹css Sprites一、横向列表菜单前边学习过纵向导航菜单，又学习了float 属性，那么要实现横向导航菜单是不是很简单了，只需要列就可实现了。

把第四节的代码拿过来直接用，修改后的代码如下：提示：可以先修改部分代码后再运行 第七天 横向导航菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/x html1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { border: 1px solid #CCC; height:26px; background: #eee;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }</style></head><body>运行代码复制代码最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。