世界超算排行榜:太湖之光!

IT教程学习网

网站建设

web标准div+css与块模型讲解

文章来源:深腾网   作者:牛仔裤   浏览量:
  网站制作web标准div +css已是大势所趋,它打破了原来的表格布局跨入,避免重复嵌套,精简代码,提高网速的同时,便于网站页面维护,今天小编对此和大家探讨学习下。
  针对于初步学习制作网站的人来说,在会用web标准制作出常见的网站页面前,首先你必须要有一定的HTML、
CSS、TABLE表格布局基础,因为这是为WEB标准学习的很重要的一步,我也是一步步走过来的,深知过程当中的不易,下面我带大家再次熟悉掌握下这些,希望能给小同伴们提供帮助。

HTML标签

  首先HTML标签是以后建站常用到的,由尖括号与标签组成。它分为成对标签与单一标签。成对标签即是有开头标签<标签>和结尾标签</标签>;单一标签即在标签本身的结尾打上/来结束,这是html代码编写的规范,而且每一个标签都必须用小写。
如这些成对标签 :<head>{...}</head>           
             <body>{...}</body>
             <div>{...}</div>
             <span>{...}</span>
             <p>{...}</p>
             ......
单一标签:<img src="" />
          <br />.......

CSS样式

CSS分为外部样式 、内部样式 、行内样式 、导入样式,这里我们说下其中几种:
 
1、外部样式
<link href="layout.css" rel="stylesheet" type="text/css" />
这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。
2、内部样式
<head>
     <style>
     h2 { color:#f00;}
     </style>
</head>
这种形式是内部样式表,它是以<style>和</style>结尾,写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。
3、行内样式
<p style="font-size:18px;">内部样式</p>
这种在标签内以style标记的为行内样式,行内样式只针对标签内的元素有效,因其没有和内容相分离,所以不建议使用。

DIV块模型讲解

  Div用于布局,完成结构,划分不同的区块,精简代码,是web选择的能够正确使用标签,有一定的布局优点,能够提高灵活性,介于DIV的首标签和尾标签之间的内容都是用来构成这个块的,其中所包括的元素的特点由DIV标签的特点来控制介于;css是样式,则是用于控制div的排版布局,控制表现,避免重复嵌套,从而大大提高页面加载速度。
  他们之间是相互配合的。为什么呢,div+css的核心是“盒子模型”,而只有DIV这个标签能很好地诠释盒子模型的精髓,css来定义盒模型的方位、大小、边框、内外边距等等,将表现与内容别离。Div+css是使用块模型和CSS样式来代替表格达到更好的兼容性和搜索引擎的体验,要达到替代表格的目的就要使用float属于来使块进行浮动,表现出来的效果就和表格很相似。
  Div+css模型最重要的是理解盒装模型如下图。块的实际的宽度=块的宽度+边框宽度+外边距。块的实际高度=块的高度+边框高度+外边距。

css盒模型 

     今天通过小编的介绍,对于刚刚接触这块的朋友,有没有起到一定的作用,应该从起初的模糊混乱到现在的感觉懂一点点了吧没错,向着更好的方向发展吧,我是你们的好朋友牛仔裤,更多IT教程请来深腾网

分享到:

  • Copyright © 2014-2026 深腾网 版权所有:静岳互联网咨询工作室
  • 冀ICP备16020878-1