你的位置:首页 > 软件开发 > 网页设计 > DIV+CSS网页标准化布局(二)之浮动布局

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

发布时间:2016-09-15 11:00:15
盒模型以及浮动布局 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin);这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子, ...

   

 

盒模型以及浮动布局

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

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

先上图:

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

上图清晰的表明了盒模型的具体表现样式; 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)

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

DIV+CSS网页标准化布局(二)之浮动布局
<style type="text/css">      .div2{ padding: 20px; border: 1px solid #000099;}      .div2 a{ background: red;}    </style>    <div >      <a href="#">div标签默认是一个块状(block)盒子</a>    </div>
DIV+CSS网页标准化布局(二)之浮动布局

 

div标签默认是一个块状(block)盒子
<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+CSS网页标准化布局(二)之浮动布局

 

div标签默认是一个块状(block)盒子
<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+CSS网页标准化布局(二)之浮动布局

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

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

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

 

什么是CSS清除浮动?

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

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

DIV+CSS网页标准化布局(二)之浮动布局
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clear { clear: both; }<div ><img src='/images/loading.gif' data-original="news-pic.jpg" /><p>some text</p><div ></div></div>
DIV+CSS网页标准化布局(二)之浮动布局

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

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

 

方法二:使用CSS的overflow属性

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

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

DIV+CSS网页标准化布局(二)之浮动布局
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.content{ clear:both; }<div ><img src='/images/loading.gif' data-original="news-pic.jpg" /><p>some text</p><div ></div></div>
DIV+CSS网页标准化布局(二)之浮动布局

 

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

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

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

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

原标题:DIV+CSS网页标准化布局(二)之浮动布局

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。