`

DIV与CSS

    博客分类：
  • HTML
CSSHTML 
阅读更多

盒子模型

　　盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。

１、盒子模型的概念

　　所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置。
　　一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这４个部分组成。

 

border、padding、margin属性

　　border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。
　　border主要有３个属性，分别是color（颜色）、 width（粗细）、 style（样式）。

下面示例：

<html>
	<head>
		<title>Test div</title>
		<style type="text/css">
		<!--
		div{
			background-color: #FFFFCC;
			border-color:#000000;
			border-width:6px;
			padding:20px;
			margin:10px;
		}
		-->
		</style>
	</head>
	<body>
	<div style="border-style:double">The border-style of dashed	</div>
	<div style="border-style:groove">The border-style of dashed	</div>
	<div style="border-style:dashed">The border-style of dashed	</div>
	</body>
</html>

 

效果：

 其它内容请参见：http://www.sxszjzx.com/~c17/2009-1ja/2009-1web/files/17-3/17-3.html

分享到：
| DispatchAction 和DynaValidateActionForm ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV与CSS网页标准化布局

    DIV与CSS布局的核心思想在于，将网页内容的结构与样式分离，从而提高代码的可读性和可维护性，同时也优化了搜索引擎的索引效率。 在DIV与CSS布局中，DIV元素用于构建网页的结构框架，它是一个块级元素，可以包含...

    让你轻松掌握div与css之道

    总而言之，《2天驾驭DIV+CSS》教程全面覆盖了div和CSS的基础与进阶知识，通过学习，你不仅能够快速掌握这两项技术，还能提升你的Web开发能力，使你能在Web开发领域游刃有余。无论是为了个人兴趣还是职业发展，这都是...

    基于div与css的登录窗口

    在网页设计中，`div` 和 `CSS` 是构建页面布局和样式的重要工具。`div` 元素是HTML中的一个块级元素，通常用来组织和分隔页面内容，而CSS（Cascading Style Sheets）则负责定义这些元素的外观和布局。本教程将深入...

    DIV与CSS网页

    DIV+CSS制作网页，能布局良好的的页面，使得网页更专业美观大方

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    一款div+css做的网站

    这款网站的构建采用了经典的前端布局技术——div+css，这是一种在网页设计中广泛使用的方法，旨在实现结构与表现的分离，提高页面的可维护性和可扩展性。Div（Division）是HTML中的一个容器元素，常用于组织和划分...

    用DIV与CSS设计易于改版的WEB信息网页

    CSS将网页上的内容和格式分开控制，能够简化网页的格式代码．但目前网页布局多用表格、层等，CSS元素多是嵌入到HTML标记中使用，不能自如地改变网页的...介绍通过使用HTML的DIV标记和CSS设计易于改版的信息网页的方法

    Div+CSS网页样式与布局从入门到精通

    《Div+CSS网页样式与布局从入门到精通》是一本深度解析网页设计核心技术的教程。Div+CSS作为现代网页布局的主要方式，是每一位前端开发者必须掌握的基础技能。本教程旨在帮助初学者快速理解并熟练运用Div+CSS进行...

    电子科技产品div+css全套企业网页模板

    1. Div与CSS基础： - Div（Division）是HTML中的一个区块元素，常用来组织网页结构，通过CSS控制其样式和位置。 - CSS（Cascading Style Sheets）是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种...

    DIV与CSS网页制作

    DIV+CSS的基本知识点及使用技巧，非常方便实用课件及实例PPT

    Table转div+css工具

    CSS允许我们将样式与结构分离，提高了页面的可读性，降低了代码冗余，并使网页适应不同设备的显示需求。 Table2CSS3.0.0这个工具的出现，使得开发者能够快速地将旧有的Table结构转换为Div+CSS结构，减少了手动重构...

    经典DIV+CSS模板 经典DIV+CSS模板

    描述中的关键词如"div+css"、"web标准"、"div+css布局"、"div+css实例"、"div+css模板"揭示了这些模板遵循Web开发的最佳实践，旨在实现结构与表现的分离，提高网页的可维护性和可访问性。Web标准通常指的是W3C制定的...

    div+css布局大全

    9. **性能优化**：合理的div+css布局也应考虑性能，如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等，以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**：尽管现代浏览器对CSS的支持...

    初学者使用div和css误区

    - **易于维护**：CSS与HTML分离的设计理念，使得样式修改更加简单，无需大量修改HTML结构。 ### 2. DIV过度使用与标签的合理选择 过度依赖div标签构建页面结构，可能导致HTML结构过于复杂，增加理解难度。合理使用...

    DIVCSS.rar_DIV CSS

    标题“DIVCSS.rar_DIV CSS”以及描述中的“专业培训公司内部用，DIV+CSS培训资料”明确指出，这个压缩包包含的是关于网页布局技术DIV+CSS的专业教学资源，特别是PPT形式的讲义或教程。在这个领域，了解并掌握DIV+CSS...

    div css 基础教材

    **CSS与Div的基础教程** 在网页设计中，`Div`（Division）和`CSS`（Cascading Style Sheets）是构建网页布局的核心元素。本文将深入讲解这两个概念，以及它们如何协同工作，帮助新手快速入门网页制作。 1. **Div...

    div+css手册

    CSS，即Cascading Style Sheets，是用于控制网页表现的语言，允许开发者将样式信息与内容分离。这意味着你可以更改整个网站的外观而无需修改每个单独的HTML文件。CSS2.0是CSS的第二个主要版本，引入了许多关键特性，...

    div+css案例，网页设计

    本文将深入探讨Div+CSS的基础概念，以及如何通过它们来构建网页。 Div（层）是HTML中的一个块级元素，全称为“division”，用于对网页内容进行分组和布局。它可以包含其他HTML元素，并可以通过CSS（层叠样式表）...

    2天驾驭DIV+CSS(全新发布2.0.2版本).pdf

    DIV与CSS的结合使用，使得网页设计更具灵活性和可维护性。 在书中，作者首先会介绍HTML和CSS的基础知识，包括HTML标签的基本语法、CSS的选择器、属性以及值的用法。然后，会详细讲解如何使用CSS来控制DIV的布局，如...

    div+css入门资料

    3. **Div与CSS结合**：演示如何将CSS应用于Div元素，实现内容与样式的分离，提高代码的可读性和复用性。 4. **布局实践**：通过多个小练习，让读者熟悉如何使用Div和CSS创建常见网页布局，如导航栏、页脚、内容区域...

Magicbox
Global site tag (gtag.js) - Google Analytics