`

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

 
阅读更多

日期:2013-1-28  来源:GBin1.com

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

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

介绍

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

  • block
  • inline

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

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

<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来控制元素的显示:

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

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

查看在线调试

另外一些显示方式 

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

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

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

.....

总结

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

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

分享到:
评论

相关推荐

    CSS那些事儿:掌握网页样式与CSS布局核心技术-书签扫描版

    《CSS那些事儿:掌握网页样式与CSS布局核心技术》是一本深入探讨CSS技术的书籍,旨在帮助读者精通网页设计中的样式控制和布局构建。CSS(层叠样式表)是Web前端开发的重要组成部分,它使得网页内容呈现出丰富的视觉...

    百度新闻页面布局html+css

    首先,HTML(HyperText Markup Language)是网页内容的结构化语言,而CSS(Cascading Style Sheets)则是用于控制这些内容样式和布局的语言。在创建百度新闻页面布局时,我们需要结合两者,确保信息的呈现既美观又...

    div+css布局制作横向带箭头步骤流程样式

    在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`&lt;div&gt;`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...

    外国个性的DIV+CSS页面布局实例98个

    - "DIV+CSS":这是网页布局的主要技术,通过HTML的元素来结构化内容,然后用CSS来控制样式和布局,实现内容与表现的分离。 - "实例":表明这些是可操作的、实际的代码示例,可以直接查看或下载来学习和参考。 - "源...

    学习CSS必备 5日精通CSS EXE电子书.rar

    - 性能优化:了解如何减少HTTP请求、合理使用CSS Sprites、延迟加载和使用外部样式表等方法。 8. CSS案例分析: - 实战演练:通过实际项目案例,学习如何应用上述知识点解决具体问题。 这个5日精通CSS的电子书...

    css网站布局实录-2

    《CSS网站布局实录》第...这本书适合有一定HTML基础,希望深入了解和掌握CSS布局技巧的开发者阅读。通过学习,读者不仅可以提升CSS技能,还能了解到如何创建高效、可维护的CSS代码,从而提高网站的开发效率和用户体验。

    div+css页面布局,新手入门教材,2天学会div+css

    5. **CSS样式设置**:CSS用于控制网页的样式和布局,如设置宽度、高度、颜色、背景等属性。通过`id`选择器,可以对特定的`div`进行样式定义,如`#page-container`。 6. **网页布局**:常见的网页布局方法包括固定...

    Div+CSS布局大全

    《Div+CSS布局大全》是IT领域中关于网页布局技术的重要教材,主要涵盖了使用Div(HTML中的Division元素)和CSS(Cascading Style Sheets)进行网页设计和布局的各种技巧和方法。Div通常作为容器元素,用于组织网页...

    CSS 页面布局

    【CSS 页面布局】是网页设计的核心技术之一,用于控制网页元素的样式、排列和定位,使得网页内容呈现出美观且易用的布局。本教程全面系统地讲解了CSS在实际工作中的应用,旨在帮助学习者掌握CSS技能并顺利通过面试。...

    divcss布局模板

    在这个模板中,`div`元素被用来组织页面的结构,而`css`(层叠样式表)则用于定义这些`div`元素的样式、位置和布局。 在HTML中,`&lt;div&gt;`是一个通用的容器标签,可以包裹任何数量的其他HTML元素。通过给`div`添加ID...

    div+css布局制作箭头步骤流程样式 - div+css教程

    在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...

    Div+css页面布局资料(很好很强大)

    ### CSS盒子模型与Div+CSS页面布局 #### CSS盒子模型概览 在深入探讨Div+CSS页面布局前,我们首先需要了解CSS盒子模型的基本概念。...因此,掌握CSS盒子模型和Div+CSS布局技巧对于现代Web开发者来说至关重要。

    [变幻之美-DivCSS网页布局揭秘-案例实战篇](金峰) 源码+PDF

    《变幻之美:Div+CSS网页布局揭秘(案例实战篇)》适合从事网页设计、网站制作、Web程序开发、Web标准化的人员阅读和使用,还可作为高等院校相关专业的教学和参考用书,以及各类社会培训机构的培训用书。

    CSS Grid分屏布局:前端开发的新选择

    文章详细介绍了如何使用CSS Grid创建灵活、响应式的分屏布局,提供了实际的Vue.js组件示例和代码片段,帮助开发者快速理解和实现复杂的分屏界面设计。 1、核心内容: CSS Grid基础:解释CSS Grid的基本概念和优势。 ...

    简单的网页制作案例(DIV+CSS完成):室内设计.rar

    - CSS(层叠样式表)用于控制网页的样式和布局。在这个案例中,我们将学习如何定义颜色、字体、边距、填充等属性。 - `选择器`:CSS通过选择器来定位HTML元素,如类选择器 `.class` 或 ID 选择器 `#id`,案例中...

    DIV+CSS常用布局模板

    4. **CSS布局技巧**: - **盒模型**:理解CSS盒模型(content, padding, border, margin)对于计算元素尺寸至关重要。 - **定位机制**:了解静态、相对、绝对、固定定位,以及它们在布局中的应用场景。 - **浮动...

    css+div布局和css教程和css的api

    通过阅读《DIV+CSS布局大全.pdf》和解压后的《css2.0api.rar》文件,你可以获得更深入的理论知识和实际案例。而《css教程》则提供了学习路径和实践指导,帮助你逐步掌握CSS的各个方面。结合这些资源,无论是初学者...

    h5单页面上拉刷新下拉加载

    - `css`:CSS样式表,定义页面样式和动画效果。 综上所述,此项目通过JavaScript和CSS实现了H5页面的上拉刷新和下拉加载功能,同时结合了tab选项卡设计,提供了一种高效的浏览体验,用户可以在不同内容间切换,并...

    CSS属性、浏览器兼容与网页布局

    CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...

    css 加载动画特效

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义网页元素样式和布局的语言,它极大地丰富了网页的表现力。当我们谈论“CSS加载动画特效”时,我们指的是利用CSS来实现页面元素加载过程中的动态视觉效果...

Global site tag (gtag.js) - Google Analytics