重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS页面布局和加载流程介绍

这篇文章主要介绍“CSS页面布局和加载流程介绍”,在日常操作中,相信很多人在CSS页面布局和加载流程介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS页面布局和加载流程介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站建设、成都做网站、江州网络推广、微信小程序、江州网络营销、江州企业策划、江州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供江州建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com

介绍

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

block

inline

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

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

gbtags.com is website for geeks

查看在线调试

相反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,顾名思义,显示的方式和列表元素类似。

          
  • 元素1
  •       
  • 元素2
  •   

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

正常Document的加载流程

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

做一个练习吧

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

HTML框架代码如下:

     

An Intro to Normal Document Flow.

                                                                     
         

 欢迎访问我的喵星人图片画廊

         

如果你也喜欢猫咪的话,来一起看看这些可爱的小生命吧!

     
 
 
   
欢迎访问gbtags.com
 

CSS布局代码:

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; }

查看在线调试

到此,关于“CSS页面布局和加载流程介绍”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


分享文章:CSS页面布局和加载流程介绍
转载源于:http://cqcxhl.com/article/jepejd.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP