网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

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

日期:2013-11-22  来源:攀枝花惠康网络公司

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

如不美观你开发web相关应用或者网站的话,必定知道CSS对于页面结构的主要性。在本篇CSS技巧中我们将介绍页面加载的流程来辅佐你更好的实现页面结构。

介绍

在我们起头正式的介绍页面流程前,我们需要简单体味几种分歧类型的html元素,以及它们的缺省显示体例。这里我们首要重点介绍两个类型的元素:

  • block
  • inline

在这里我们将做一个简单的联系辅佐你巩固你的进修,这里我们使用HTML5 Shiv来辅佐我们撑持HTML5标签,使用placekitten这个图片占位应用来生成图片。

CSS技巧荟萃:体味CSS页面结构和加载流程

如不美观巨匠关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,可是模拟仍是遵循这里我们介绍的显示类型。

1  

查看在线调试

总结

查看在线调试

相 反block类型的元素,例如,div,p或者HTML5中新的元素section,article和article的显示体例和inline类型都纷歧 样。它们都是典型的结构化的元素,可以包含inline类型的元素。浏览器措置block类型的元素,会在元素前后添加换行,这样你看到它们都是自力成行 显示的。当然,如不美观你改削它的缺省显示类型为inline,它就会按照inline元素的显示体例显示。

样式CSS

凡是我们都是使用CSS来节制元素的显示:

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

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

查看在线调试

此外一些显示体例

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

正常Document的加载流程

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

它显示的体例近似于inline,可是它相关的属性,例如,宽度,高度还有padding/margin等等遵循于block显示类型的轨则。inline-block可以辅佐我们实现近似float元素的效不美观,可是也有自己的问题。

inline类型的元素搜罗: img,span,a等,用来界说文字或者数据,凡是显示体例是“统一行显示”。更具体的说就是,如不美观良多的inline类型的元素在统一行的时辰,它们会显示在统一行,直到宽度不够显示了,再转到下一行。例如,如下代码:

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

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

1234 <ul>     <li>元素1</li>     &ltgt; </ul>

那 么什么是浏览器正常的加载流程呢?根基上浏览器按照它解析的挨次来显示内容,顶端的先加载,然后加载下面的内容。当巨匠起头做web设计的时辰,可能都不 关心正常的document加载过程,而只醉心于各类分歧的灿艳花哨的技巧,如不美观你能够正确的理解document加载,对于更好的辅佐你理解web设计 绝对有利无弊。

做一个操练吧!

HTML框架代码如下:

123456789101112131415161718     <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</;</section>    </footer>

CSS结构代码:

123456789101112131415161718192021222324252627282930313233343536 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;    padding10px
;} footer{  width: 85%;  margin:0 auto;} section{  padding: 20px 0;}

但愿经由过程这篇文章的进修,巨匠能够更好的体味document的加载和结构,如不美观你有任何问题或者建议,请给我们留言,感谢!

来历:CSS技巧荟萃:体味CSS页面结构和加载流程

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。

客服热线:tel(谢先生)  客服QQ:1323605005  
服务邮箱:yewubu@huikon.com(售前咨询)  jishubu@huikon.com(技术部)  shouhou@huikon.com(售后服务)
公司地址:四川省攀枝花市
邮编:617200