CSS技巧荟萃:了解CSS页面布局和加载流程

标签: CSS Tips css 布局 | 发表时间:2013-01-29 03:54 | 作者:terry
出处:http://www.qianduan.net

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。

介绍

在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素:

  • block
  • inline

如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型。

inline类型的元素包括: img,span,a等,用来定义文字或者数据,通常显示方式是“同一行显示”。更具体的说就是,如果很多的inline类型的元素在同一行的时候,它们会显示在同一行,直到宽度不够显示了,再转到下一行。例如,如下代码:

1
<a href="http://gbtags.com">gbtags.com</a> is website for <span>geeks</span>

查看在线调试

相 反block类型的元素,例如,div,p或者HTML5中新的元素section,article和article的显示方式和inline类型都不一 样。它们都是典型的结构化的元素,可以包含inline类型的元素。浏览器处理block类型的元素,会在元素前后添加换行,这样你看到它们都是独立成行 显示的。当然,如果你修改它的缺省显示类型为inline,它就会按照inline元素的显示方式显示。

样式CSS

通常我们都是使用CSS来控制元素的显示:

1
2
3
sometag{   
  display:inline; /*当然你也可以设置为block,none等等支持的属性*/
}

虽然上面的属性中我们指定了显示类型,这同时也意味这其它相关的样式,例如,你可以指定显示类型为block的元素的宽和高,但是 inline类型的无法指定。padding(内边距)和margin(外边距)可以被应用到inline显示的元素,但是不会影响包含的元素。看看如下 例子:

查看在线调试

另外一些显示方式

除了inline和block类型的显示,这里还有一个inline-block的显示方式。如下图:

它显示的方式类似于inline,但是它相关的属性,例如,宽度,高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果,但是也有自己的问题。

其它的属性例如,list-item,顾名思义,显示的方式和列表元素类似。

1
2
3
4
<ul>   
  <li>元素1</li>   
  <li>元素2</li> 
</ul>

最后还有一个元素需要提一下就是”none”,这个属性可以让元素不显示,并且不占聚任何的document空间。 注意和“hidden”这个属性区别一下。

正常Document的加载流程

那 么什么是浏览器正常的加载流程呢?基本上浏览器按照它解析的顺序来显示内容,顶端的先加载,然后加载下面的内容。当大家开始做web设计的时候,可能都不 关心正常的document加载过程,而只醉心于各种不同的绚丽花哨的技巧,如果你能够正确的理解document加载,对于更好的帮助你理解web设计 绝对有利无弊。

做一个练习吧!

在这里我们将做一个简单的联系帮助你巩固你的学习,这里我们使用 HTML5 Shiv来帮助我们支持HTML5标签,使用 placekitten这个图片占位应用来生成图片。

HTML框架代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div>
        <h1>An Intro to Normal Document Flow.</h1>
        <figure>
            <img src="http://placekitten.com/g/100/200" alt="" />
            <img src="http://placekitten.com/g/160/200" alt="" />
            <img src="http://placekitten.com/g/220/200" alt="" />
            <img src="http://placekitten.com/g/180/200" alt="" />
            <img src="http://placekitten.com/g/240/200" alt="" />
            <img src="http://placekitten.com/g/130/200" alt="" />
        </figure>
        <article>
            <h2> 欢迎访问我的喵星人图片画廊</h2>
            <p>如果你也喜欢猫咪的话,来一起看看这些可爱的小生命吧!</p>
        </article>
    </div>
    <footer>
      <section>欢迎访问<a href="http://gbtags.com">gbtags.com</a></section>
    </footer>

CSS布局代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body{
  font-size:12px;
  font-family: Arial;
}
 
.container {
    width: 85%;
    margin:0 auto;
    background: #f2f2f2;
}
 
figure img {
    padding-left: 10px;
}
 
h1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #707070;
    padding: 10px;
    font-size:14px;
}
 
article {
    background: #505050;
    color: #f2f2f2;
    padding: 10px;
}
 
footer{
  width: 85%;
  margin:0 auto;
}
 
section{
  padding: 20px 0;
}

查看在线调试

总结

希望通过这篇文章的学习,大家能够更好的了解document的加载和布局,如果你有任何问题或者建议,请给我们留言,谢谢!

来源: CSS技巧荟萃:了解CSS页面布局和加载流程

相关 [css 技巧 css] 推荐:

10个非常不错的CSS技巧

- - CSDN博客Web前端推荐文章
在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观. 我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷. 设计模版和博客主题时,我经常“不断推敲和尝试CSS(Hit and Trial CSS ),我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美.

CSS技巧荟萃:了解CSS页面布局和加载流程

- - 前端观察
如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性. 在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式. 这里我们主要重点介绍两个类型的元素:. 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

响应式设计的5个CSS实用技巧

- - Web App Trend
正如我在教程 响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了. 现在我分享在编码时常用的五个CSS技巧并举例说明. 这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用.