来谈谈：CSS教程:经由过程实例进修和了解CSS盒模子

这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+CSS+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了
网页制造WEB文章简介：盒模子次要界说四个地区：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。
自从1996年CSS1的推出，W3C构造就倡议把一切网页上的对像都放在一个盒（box）中，计划师能够经由过程创立界说来把持这个盒的属性，这些对像包含段落、列表、题目、图片和层<div>。
盒模子次要界说四个地区：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。
关于初学者，常常会弄不分明margin，padding之间的条理、干系和互相影响。上面我们一同看一个实例，以便于加深了解。

登录/注册后可看大图

上面我们一同来剖析一下这个例子。
XHTML代码
<divid="left">这里是内容，工具中的内容到工具边沿的间隔是PADDING。宽为270像素，高为175像素，因为周围的边框宽度是3像素，以是宽和高要加6像素，即宽276像素，高181像素。</div>
<divid="right"></div>
CSS代码
#left{
float:left;
margin-right:67px;
width:230px;
height:145px;
font-size:14px;
line-height:24px;
padding:30px0040px;
border:3px#000solid;
background:url(img1.jpg)#DE9no-repeatcenter;
}
#right{
float:left;
width:128px;
height:128px;
background:url(img2.jpg);
}
这段代码体现的就是图中的效果。上面我们来剖析一下各属性的感化及用法。
1、margin：指边框之外的空缺地区，用于设置页边距或工具与工具之间的间隔。30px0040px分离代表上、右、下、左（顺时针）四个边距。假如四边都一样，能够简写成margin:10px，如许代表margin:10px10px10px10px。假如上边距和下边距相称，右边距和右侧距相称时，能够简写成margin:5px10px，如许代表margin:5px10px5px10px。也能够分离界说，如margin-top，指定上边距。右、下、左分离是margin-right、margin-bottom、margin-left。当值为0时能够省略单元。如：margin:05px同等于margin:0px5px。
2、padding：指工具的边沿到内容之间的空缺地区，界说及写法和margin不异。必要注重的是，为padding界说值的同时，也会响应增年夜工具的宽高。若有一个Div，宽为100px，当界说了内容距左、右侧距都是10px（摆布加一同是20px），此时Div的全体宽度就会是120px，假如要保持原100px，则要减失落20px，即80px。
#exp{padding:010px;width:100px}，此时<divid="exp"></div>的宽度就是120px。
#exp{padding:010px;width:80px}，此时<divid="exp"></div>的宽度就是100px。
3、border：指工具的边框，用于设置边框的粗细、色彩及款式。如border-top:2px#000solid，代表层的上边框是2像素的玄色直线。border-left:1px#f00dotted，代表右侧框是1像素的白色虚线。假如边框周围的款式一样，能够简写成border:1px#000solid。
border:none代表没有边框，经常使用于设置如图片等默许带边框的元素。
4、background：设置工具的背景款式。此属性是一个切合属性，由多少个分歧背景款式属性的值构成。云云例中，url(img1.jpg)代表背景图片，不添默许为none；#DE9代表背景色彩，不添默许为通明；no-repeat代表不让背景图片平展，不添默许为平展；center代表背景图片居中显现，不添默许为从左上角入手下手显现。
5、line-height：界说工具的行高。假如界说的行高和工具的高度不异，则笔墨垂直居中显现（只合用于笔墨只要一行的情形下）。
在这里有需要提到的一个准绳，就是帮助的，只起润色感化的图片只管用背景处置。这里的“帮助图片”是指那些不是内容的一部分，仅仅用于润色、距离、提示的图片。
本文是匡助用户增强对CSS盒模子的了解，至于文中所触及到的属性，假如您没有完整了解也没有干系，我们会在后续的文章中具体先容CSS的各属性。

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。