Web开发学习心得4——CSS盒模式与排版
2009-04-13 12:34
363 查看
首先简单讲一下盒模式,所谓盒模式,是CSS看待元素的方式,CSS将每个单一的元素都看作一个盒子,如下图所示:
<body>
<div id="header">
<h1>
这里是头部。</h1>
</div>
<div id="content">
<div id="leftbar">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
</div>
<div id="main">
<p>
这里是主区域。</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
</div>
</div>
<div id="footer">
<p>
这里是脚部。</p>
</div>
</body>#header, #footer, #content, #leftbar, #main
p
{}{
background-color: Orange;
}
这段html在浏览器中将显示如下:
![](http://images.cnblogs.com/cnblogs_com/jhh0111/origal.gif)
如果我们将其中的leftbar设置为float:left;width:20%,那么将是下面这个样子:
![](http://images.cnblogs.com/cnblogs_com/jhh0111/floated.gif)
以上就是float的原理。不过,在实际实践中,我们通常需要的是leftbar与main各自成一列,而不希望main的内容还流入到leftbar的下面。哈,这就需要你开动脑筋了,想想该怎么办?我们可以给main指定margin-left:20%,显示如下:
![](http://images.cnblogs.com/cnblogs_com/jhh0111/floatedMargin.gif)
从上图我们发现了一个问题,那就是leftbar突破了其父元素content的区域。是的,漂移元素不再受其父元素区域的限制,或者说漂移元素不会使其父元素的区域撑大。这导致footer的呈现不满足我们的需要。clear属性骑着白马来帮助我们了,我们给footer加上clear:left的属性试试。
![](http://images.cnblogs.com/cnblogs_com/jhh0111/clear.gif)
到此,你应该比较清楚float、clear排版的基本原理了吧。如何才能排出令人赏心悦目的页面,这就需要你开动脑筋了,它是门艺术,设计的艺术。掌握原理是简单的,但设计的艺术不是那么容易学习的阿。
最后简单讲一下position
position可以设置为以下四个值
static:默认值,表示以正常流的方式排版元素。
absolute:将元素从正常流中抽出,并摆在页面指定的位置(由top、left、right、bottom属性指定),该元素不会对其他元素产生任何影响(这是与漂移元素的一个很大的不同)。
fixed:将元素从正常流中抽出,并摆在浏览器窗口指定的位置(由top、left、right、bottom属性指定),它使元素不随着页面的滚动而滚动,永远固定在浏览器的某个位置上。
relative:元素仍难是页面流的一部分,浏览器先以正常模式排定所有元素,在最后一刻,浏览器将该元素偏移一定的位置(由top、left、right、bottom属性指定)。该属性较少使用。
如果有好几个指定position的元素重叠,那么它们哪个在前哪个在后呢?z-index属性将来帮助你,该属性值越大越靠前。
好了,关于html与css就讲到这里了,从下篇开始将讲述Asp.net。我想基本的应用大家也都会,不会的也能找到一大叠的书本与资料,所以,我准备着重讲Asp.net的实现原理,并配合分析Asp.net的源代码,希望能让大家对Asp.net的本质的认识有所帮助。我将假设你掌握了OO(面向对象)的基本精髓,并掌握了一定的设计模式等。
<body>
<div id="header">
<h1>
这里是头部。</h1>
</div>
<div id="content">
<div id="leftbar">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
</div>
<div id="main">
<p>
这里是主区域。</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
</div>
</div>
<div id="footer">
<p>
这里是脚部。</p>
</div>
</body>#header, #footer, #content, #leftbar, #main
p
{}{
background-color: Orange;
}
这段html在浏览器中将显示如下:
![](http://images.cnblogs.com/cnblogs_com/jhh0111/origal.gif)
如果我们将其中的leftbar设置为float:left;width:20%,那么将是下面这个样子:
![](http://images.cnblogs.com/cnblogs_com/jhh0111/floated.gif)
以上就是float的原理。不过,在实际实践中,我们通常需要的是leftbar与main各自成一列,而不希望main的内容还流入到leftbar的下面。哈,这就需要你开动脑筋了,想想该怎么办?我们可以给main指定margin-left:20%,显示如下:
![](http://images.cnblogs.com/cnblogs_com/jhh0111/floatedMargin.gif)
从上图我们发现了一个问题,那就是leftbar突破了其父元素content的区域。是的,漂移元素不再受其父元素区域的限制,或者说漂移元素不会使其父元素的区域撑大。这导致footer的呈现不满足我们的需要。clear属性骑着白马来帮助我们了,我们给footer加上clear:left的属性试试。
![](http://images.cnblogs.com/cnblogs_com/jhh0111/clear.gif)
到此,你应该比较清楚float、clear排版的基本原理了吧。如何才能排出令人赏心悦目的页面,这就需要你开动脑筋了,它是门艺术,设计的艺术。掌握原理是简单的,但设计的艺术不是那么容易学习的阿。
最后简单讲一下position
position可以设置为以下四个值
static:默认值,表示以正常流的方式排版元素。
absolute:将元素从正常流中抽出,并摆在页面指定的位置(由top、left、right、bottom属性指定),该元素不会对其他元素产生任何影响(这是与漂移元素的一个很大的不同)。
fixed:将元素从正常流中抽出,并摆在浏览器窗口指定的位置(由top、left、right、bottom属性指定),它使元素不随着页面的滚动而滚动,永远固定在浏览器的某个位置上。
relative:元素仍难是页面流的一部分,浏览器先以正常模式排定所有元素,在最后一刻,浏览器将该元素偏移一定的位置(由top、left、right、bottom属性指定)。该属性较少使用。
如果有好几个指定position的元素重叠,那么它们哪个在前哪个在后呢?z-index属性将来帮助你,该属性值越大越靠前。
好了,关于html与css就讲到这里了,从下篇开始将讲述Asp.net。我想基本的应用大家也都会,不会的也能找到一大叠的书本与资料,所以,我准备着重讲Asp.net的实现原理,并配合分析Asp.net的源代码,希望能让大家对Asp.net的本质的认识有所帮助。我将假设你掌握了OO(面向对象)的基本精髓,并掌握了一定的设计模式等。
相关文章推荐
- webpack 在开发还是上线的时候都支持soucemap的功能 学习心得
- 前端学习心得-javascript设计模式与开发实践-命令封装模式
- web开发新手学习心得和目标计划
- Web开发:我希望得到的编程学习路线图心得
- 安卓开发学习心得-------Activity生命周期以及启动模式
- 安卓开发学习心得-------WebView的使用
- java web 开发学习心得体会
- Spring MVC + MyBatis+Maven 零基础搭建Web开发框架(注解模式哦)
- MyBatis学习总结(二)——SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
- 【学习笔记】Web开发中防止页面刷新后表单重复提交,表单Token设置示例
- JavaWeb开发模式1:JSP+JavaBean
- Web开发需要学习的方面
- web前端开发学习
- C#程序设计模式学习心得篇
- Web开发之四:前后端开发模式探讨
- web请求响应模式和项目开发名规范
- Cocoa Touch 入门记——《精通 iOS 开发》学习心得(1)
- Dango Web 开发指南 学习笔记 2
- 菜鸟学习设计模式的心得
- Web 前端开发学习之路(入门篇)