基于CSS_DIV盒子模型合理使用-网站小论文.docxVIP

基于CSS_DIV的盒子模型合理使用XXX天津市大学软件学院摘 要盒子模型是CSS技术中一个非常重要的概念。掌握盒子模型的原理和使用方法可以极大地丰富 HTML元素的表现效果．同时对HTML文档的布局也会起到很大的作用。本文深入介绍了CSS盒子模型的结构及在网页制作中的应用。 关键词盒子模型；HTML布局；DIV+CSSBased on the rational use of CSS_DIV box modelXXXTianjin university software institute AbstractPick to box model is a very important concept in the CSS technology. To master the principle and using method of the box model can greatly enrich the HTML element performance effect. At the same time for the layout of the HTML document will also play a big role. This paper introduces the CSS deeply box model structure and its application in web production..Key wordsbox model; HTML layout; DIV+CSS1.CSS盒模型简介盒子模型是CSS控制页面时的一个很重要概念，所有页面中的元素都可以看成是一个盒子，传统的表格排版是通过大小不一样的表格和表格嵌套来排版网页内容的，改用CSS后，就是通过CSS定义大小不一的盒子和盒子嵌套来编排网页。这种方式代码简洁，更新方便，能兼容更多的浏览器。盒子里的东西到盒子边框的距离我们称之为填充，盒子本身的边框为border，盒子本身的边框为border，盒子外边框外和其他盒子之间的边界margin。如图1所示：图 1 CSS盒子模型2.常用的CSS布局属性2.1内容区(content)内容区是盒子模型的 中心，它呈现了盒子的主要信息内容。这些内容可以是文本、图片等多种类型。内容区有三个属性wi dt h、 hei g ht和 ov er f l ow。使用wi dt h和hei ght属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法当overflow属性值为 hi dden时,溢出部分将不可见；为visible时， 溢出的内容信息可见。当为auto时，将由浏览器决定如何处理溢出部分。填充( padding) 填充是内容区和边框之间的空间。填充的属性有五种，即padding-top、padding—bottom、padding-left、padding-right以及综合了以上四种方向的快捷填充属性padding。2.2边框(border)边框是环绕内容区和填充的边界。边框的属性有border -style、border -width和border -color以及综合了以上三 类属性的快捷边框属性border。border -style属性是边框最重要的属性。如果没有指定边框样式，其他的边框属性都会被忽略。边框将不存在。CSS规定了dotted( 点线 )、dashed(虚线 )、solid( 实线)等九种边框样式。使用border -width属性可以指定边框的宽度,其属性值可以是长度计量值，也可以是 CSS规定的t hi n、medium和thick。使用border -co l or属性可以为边框指定相应的颜色，其属性值可以是 RGB值，也可以是 CSS规定的17个颜色名。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设 置，如border：2px solid-green或 border—top—style：solid、border—left—color：red等 。设置盒子背景色属性时，在IE中背景不会 延伸到边框区域，但在FF等标准浏览中， 背景颜色可以延伸到边框区域，特别是单边 框设置为点线或虚线时能看到效果。 2.3空白边（margin) 空白边位于盒子的最外围，是添加在边框外周围的空间空白边使盒子之间不会紧凑地连接在一起，是CSS布局的一 个重要手段。空白边的属性有五种，即 mar gin-top、margin-bottom、margin-left、margin—right以及综合了以上四种方向的快捷空白边属性 margin。其具体的设置和使用与填充属性类似。对于两个相邻的(水平或垂直