网页制作基础教程(七)--DIV盒子

  • 编辑时间: 2011-05-15
  • 浏览量: loading
  • 作者: 段亮

很多人在学习网页制作过程中,总是认为学网页制作就是在学DreamWeaver工具,其实你们错了,而且错的很离谱。学习网页制作是学html标签和div+css,并不是学DW之类的工具。如果说我们会div+css,我们可以用记事本也能写网页,你们相信吗?DW只是一个辅助我们开发的工具,能对我们的开发起到事半功倍的效果。新手推荐使用:EditPlus 3工具

那么有又人问了,什么是DIV呢?下面由笔者跟大家一起解释下什么是DIV以及在DIV盒子中涉及到的知识点:

一、什么是DIV

DIV:你可以理解成一个装东西的盒子,一个网页由:无数的盒子和CSS样式组成。

二、内边距

内边距:是指盒子内容与盒子边框的距离,简称内边距(padding);padding:10px 10px 10px 10px;表示为这个元素的内边距上、下、左、右的距离为10像素。我们可以简写成:padding:10px;还有一个需要注意的是:这里排列的顺序是:上、右、下、左,而不是我们正常认为的上、下、左、右。

三、外边距

外边距:是指整个盒子与外界的距离,简称外边距(margin);margin:10px 5px 10px 5px;表示这个元素的外边距为:上、下为10像素,左右为5像素。我们可以简写成:margin:10px 5px;

整体效果如下:


总结:在网页布局的时候,我们需要注意的是什么时候用padding,什么时候用margin。在能少用margin的情况下,最好少用。每天坚持学一点,知识是慢慢累积的。相信不久的将来,你会感谢现在努力学习的你.--以上纯属个人意见。

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客