你的位置:首页 > 网页设计

[网页设计]DIV+CSS网页标准化布局(二)之浮动布局


   

 

盒模型以及浮动布局

 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin)

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。

先上图:

上图清晰的表明了盒模型的具体表现样式; margin外边距+border边框+padding内边距+content内容;

既然盒模型叫做盒模型~那么我们可以把它比作一个 液晶屏幕包装盒子(楼主刚刚买了一台,所以拿它来比喻了,大家都知道的 这玩意儿快递的时候padding可不少啊)  拆快递的时候,里面的显示屏就是内容(content) 而泡沫呢?就是内边距(padding)  外面的壳子就是(border)  然后呢 就是盒子与其他盒子之间的距离(margin) 这就组成了我们css中的盒模型;

css中盒模型有很多种表现形式:其中 block(块状)、inline(行内)、(inline-block以块状形式表现的行内元素) 设置css display可以改变盒子的表现形式 下面会详细介绍

个人觉得css可以这么去理解:它规定了盒子的包装样式,盒子的摆放位置,盒子的长宽高等等等等,浏览器就像是一个房子,等待人们用箱子填满它;

 

下面呢,楼主简单介绍一下 内容(content)、填充(padding)、边框(border)、边界(margin)在css中的具体表现,以及他们所带的看似bug的另类属性。

1.内容(content)

  内容包括了文本,块状盒子,图片,内容盒子的盒模型等等......栗子:

复制代码
<!DOCTYPE html><html><head>  <meta charset="UTF-8"/>  <title>demohtml</title>  </head>  <body>    <style type="text/css">      .div1{ background: red;}    </style>    <div >      div标签默认是一个块状(block)盒子    </div>  </body>  </html>
复制代码

上图代码得到的结果是:(楼主直接敲在编辑器里了)

 

div标签默认是一个块状(block)盒子

 div标签其默认的表现形式是block,通过观察我们可以得到 block块状盒子默认的宽度是100%,而高度右文字撑开,文字就是它的(content内容);如果没有文字,并且没有规定高度,那么它的高度为0;

看图 文字的高度是21  边框 内边距 外边距 都为0 宽度为100% (楼主屏幕14寸的 小啊);

block(块状),它通常是一个外部容器 用来承载需要的内容 常用的块级元素有  div,p,h1 , header,footer,nav 等等......

inline(行内)

行内元素,顾名思义,一行内的元素,块状里面的元素,常见的有a标签,i(倾斜标签),em,span,s(删除线),strong(加粗),b等等等等

行内元素的表现形式主要在于填充内容,它默认是没有上下外边距的,只可以左右;

<div >      div标签默认是一个块状(block)盒子      <a href="#">这是一个超级链接</a>  </div>

上图与代码表示了行内元素的表现形式  其宽高等于内容的宽高  且,不可以直接设置它的宽度和高度,设置宽度和高度并没有什么卵用;

我们可以使用 display:block;来让它变成块状。block也可以使用display:inline;来让块状变成行内;

这里由于篇幅过长,楼主点到即止,关于block与inline  传送门:block,inline和inline-block概念和区别 

 

2.内边距(padding)

 内边距规定了内容与边框之间的填充距离,栗子:

  

复制代码
<style type="text/css">      .div2{ padding: 20px; border: 1px solid #000099;}      .div2 a{ background: red;}    </style>    <div >      <a href="#">div标签默认是一个块状(block)盒子</a>    </div>
复制代码

 

div标签默认是一个块状(block)盒子

楼主将div2的内边距设为上下左右各20px,需要注意的是 现在div2的高度是 padding+content+边框,20x2+2= 42px 这在某些时候会产生一些令人疑惑的问题,但是以盒模型的概念,它是正确的;

即 盒子的高度包括内边距 但 css属性设置的是content的高度  比如div3高度设为100px,注意这个时候 div3的实际高度等于 100+40+2=142px

复制代码
<style type="text/css">      .div3{ padding: 20px; border: 1px solid #000099; height:100px;}/*注意这个时候 div1的实际高度等于 100+40+2=142px*/      .div3 a{ background: red;}    </style>    <div >      <a href="#">div标签默认是一个块状(block)盒子</a>    </div>
复制代码

 

div标签默认是一个块状(block)盒子

 3.边框(border)

 border默认为0;你可以随意指定它的某一个边的边框;其属性楼主也就不一一介绍了,再来一个传送门:CSS border边框属性教程(color style)

4.外边距(margin)

外边距规定了盒子与盒子之间的距离,因此它不会被计算到盒子的总体宽高之中,盒子内的盒子的外边距则会影响父级元素的宽度和高度;

margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。  这里也是直接给一个传送门吧,写起来这篇博文可就太长了......  css外边距详解

 

浮动

w3shool对浮动的解释:

  浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

以推箱子游戏为例,将箱子往左推 直到它碰到边界 或者另外一个箱子就会停止下来 看图:

  

蓝色盒子往左浮动 (float:left) 红色箱子紧跟着往左浮动(float:left;) 橙色箱子往右浮动(float:right;)  蓝色在遇到边界之后,停止在左上角。红色紧跟着左浮动,它遇到了同样是左浮动元素的蓝色,所以它停止在蓝色的结尾。 而橙色方块向右浮动直到遇到边界或者同样右浮动的元素则停止;

浮动元素会脱离当前文档流,以一种特殊的形式存在,因为它不再处于文档流中,所以它不占据空间

框1向左浮动,因为框1不再存在文档流中,框2被框1遮盖,图2当三个框同时向左浮动时,它们同是float元素,成列状排列;

另外一个特性是:如果包含框宽度小于内部浮动元素的总宽度,浮动元素会向下移动,直到有足够的空间;

如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

 

行框和清理

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:

复制代码
<style type="text/css">      .div1{height:200px; width: 100px; float: left; background: #ff9000;}      .div1 a{ background: red;}      .div2{height:200px; width: 100px; float: left; background: red;}      .div3{height:200px; width: 100px; float: right; background: #002A80;}    </style>    <div >          </div>    <div >          </div>    <div >          </div>    <div >      这是文本    </div>
复制代码

如果要想文本另换一行,与浮动框互不干扰,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

复制代码
<style type="text/css">      .div1{height:200px; width: 100px; float: left; background: #ff9000;}      .div1 a{ background: red;}      .div2{height:200px; width: 100px; float: left; background: red;}      .div3{height:200px; width: 100px; float: right; background: #002A80;}    </style>        <div >          </div>    <div >          </div>    <div >          </div>    <div ></div> //清除上面浮动元素的影响    <div >      这是文本    </div>
复制代码


 

什么是CSS清除浮动?

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

引用W3C的例子,news容器没有包围浮动的元素。

复制代码
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }<div ><img src="news-pic.jpg" /><p>some text</p></div>
复制代码

 

清除浮动方法

方法一:使用带clear属性的空元素

在浮动元素后使用一个空元素如<div ></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br />或<hr />来进行清理。

复制代码
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clear { clear: both; }<div ><img src="news-pic.jpg" /><p>some text</p><div ></div></div>
复制代码

优点:简单,代码少,浏览器兼容性好。

缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

 

方法二:使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

复制代码
.news { background-color: gray; border: solid 1px black; overflow: hidden;
*zoom: 1; }.news img { float: left; }.news p { float: right; }<div ><img src="news-pic.jpg" /><p>some text</p></div>
复制代码

 

方法三:给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

 

方法四:使用邻接元素处理

什么都不做,给浮动元素后面的元素添加clear属性。

复制代码
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.content{ clear:both; }<div ><img src="news-pic.jpg" /><p>some text</p><div ></div></div>
复制代码

 

方法五:使用CSS的:after伪元素

结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

复制代码
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clearfix:after{ content: "020";  display: block;  height: 0;  clear: both;  visibility: hidden;  }.clearfix { /* 触发 hasLayout */  zoom: 1;  }<div ><img src="news-pic.jpg" /><p>some text</p></div>
复制代码

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

 

总结

通过上面的例子,我们不难发现清除浮动的方法可以分成两类:

一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素,关于这一点。

 

推荐

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。

最后可以使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰。

 

 转自cnblogs 张泰峰 http://www.cnblogs.com/ztfjs/p/qdcss.html