div的布局还真有些不容易掌握,其规律还摸不透,先死记硬背一些现象再说吧.
div是一个块级元素，默认情况下，默认情况下将占满父级容器的整行，同级的其他对象将在下一行显示。但是将某个div设置为float后，这个div本身会根据其中内容的需要而调整为内容需要的大小，其后的块级对象将浮动在它旁边显示，运行下面的html代码就可以看到效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#menu {
background-color:red;
float:left;
/*clear:both;*/
}
#content{
background-color:green;
}
#submenu {
/*background-color:blue;*/
}
</style>
</head>
<body>
<div id="menu">
<div id="submenu">菜单区</div>
</div>
<div id="content">
内容区
</div>
</body>
</html>
为了让content区能够在下一样显示,在浮动的div中设置了clear:both属性,显示结果没有任何变化,再试着将clear:both属性加入到表示content的div中,content区就在下一行显示了.看来,对于已经设置了float特性的对象不能再设置clear特性了.
如果我不是设置menu区的float属性，而是设置menu区内部的div区的float属性，其结果与直接设置外部的menu区的效果完全一样，这就令我非常困惑了，按理说，如果我没设置外部的menu区的float属性，这个menu区自己应该占满一行，其内部的div区再按float属性漂浮在menu区内部，可现在却不是这样的！我接着明确设置了menu区的宽度，这时在ie下看到了我期望的效果，即menu区占据了规定的宽度，其内部的div区按float属性漂浮在了menu区内部，并且content区换行显示了，但是，在firefox下运行的效果却很怪，我就不想在继续追究下去了，这应该是firefox的bug了。实验代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#menu {
width:200px;
background-color:red;
}
#content{
background-color:green;
/*clear:both;*/
}
#submenu {
background-color:blue;
float:right;
}
</style>
</head>
<body>
<div id="menu">
<div id="submenu">菜单区</div>
</div>
<div id="content">
内容区
</div>
</body>
</html>
分享到：
相关推荐
CSS+DIV布局实例是学习网页布局时不可或缺的一部分，它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式，实现灵活多变的设计效果。 CSS是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等...
虽然在提供的代码示例中没有直接体现响应式设计的特性，但在实际开发中，利用DIV布局实现响应式设计是非常常见的。通过媒体查询（Media Queries）和百分比单位等技术手段，可以让网页在不同设备上都能呈现出良好的...
9. **性能优化**：合理的div+css布局也应考虑性能，如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等，以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**：尽管现代浏览器对CSS的支持...
本教程将深入讲解CSS定位与div布局，这是创建复杂网页结构的关键技能。在第10课中，我们将详细探讨以下知识点： 1. **CSS盒模型**：理解CSS盒模型是掌握布局的基础。每个HTML元素都是一个矩形的盒子，包括内容区域...
在IT行业中，CSS（Cascading Style Sheets）和DIV元素是构建网页布局的重要工具。CSS是一种样式表语言，用于描述HTML或XML（包括各种XML方言，如SVG、MathML等）文档的呈现。而DIV（Division）是HTML中的一个通用...
7. **盒模型**：理解CSS盒模型是掌握Div布局的关键，它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，这些都会影响元素的实际尺寸。 8. **定位（Positioning）**：CSS的定位机制包括静态...
通过媒体查询（media queries）和其他技巧，我们可以根据设备特性调整布局，确保页面在不同设备上都能良好显示。 10. 实战应用：学习Div+CSS布局时，应结合实际项目进行练习，逐步熟悉并掌握各种布局技巧。这个...
9. **响应式设计（Responsive Design）**：利用媒体查询（Media Queries），我们可以根据设备的不同特性调整`div`布局，确保在各种屏幕尺寸下都能正常显示。 通过这个`div`布局示例，你可以学习到如何创建基本的...
接下来，我们将探讨如何用DIV来模仿iframe的特性。关键在于使用CSS的`overflow`属性来创建可滚动区域，并通过JavaScript实现内容的动态加载和更新。 1. **CSS布局**： - 创建一个主容器（例如，名为`container`的...
在"CSS详解—DIV网页样式与布局"的压缩包中，你将找到更多关于CSS和DIV布局的详细示例和教程，帮助你进一步掌握这些核心概念和技术。通过实践和学习，你将能够熟练地运用CSS和DIV构建出美观、功能完善的网页。
本话题将深入探讨CSS+DIV布局在网站前台中的应用，以及如何利用它们来创建高效、美观的网站结构。 首先，CSS是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的外观和格式。它的主要功能...
利用媒体查询（Media Queries）和灵活的布局技术（如Flexbox和Grid），可以根据设备特性调整布局和样式。 七、CSS预处理器和后处理器 预处理器如Sass、Less和Stylus允许编写更高级的CSS，如变量、嵌套规则、函数等...
《div+css网页标准版式布局大全》是一个深入讲解网页设计技术的重要资源，它涵盖了网页设计中的核心元素——div和css的应用，旨在帮助开发者构建出高效、美观且响应式的网页布局。在这个压缩包中，虽然没有提供具体...
2. 块级元素特性：Div是典型的块级元素，它默认占据一行，并可以调整宽度、高度、内边距和外边距，这使得它在构建布局时具有很高的灵活性。 3. 布局应用场景：Div常用于创建网页的主要区域，如头部、主体、侧栏和...
下面我们将深入探讨CSS+div布局的相关知识点。 一、CSS简介 CSS是一种样式表语言，用于描述HTML或XML（包括SVG、XHTML等）文档的呈现。它允许开发者将样式与结构分离，使得网页设计更加灵活和易于维护。CSS规则由...
- **响应式设计**：使用媒体查询等特性实现不同设备下的自适应布局。 ### Div + CSS 的结合使用 将`<div>`元素与CSS结合起来使用是现代Web开发中最常用的方法之一。这种方式不仅可以创建复杂的页面布局，还可以...
在"经典CSS+DIV布局模板"中，你可能会看到各种布局结构，如： - **一栏布局**：适用于内容较少或者主要内容居中的网站。 - **两栏布局**：通常分为侧边栏和主内容区，常见于博客和新闻网站。 - **三栏布局**：多...
以下是关于`DIV+CSS`布局的一些详细知识点： 1. **DIV元素**：`<div>`（division）是HTML中的一个通用容器元素，用于组织页面内容。它没有特定的语义，但可以添加类或ID属性以进行样式化或脚本操作。通过使用`div`...
CSS+DIV布局的优势在于其结构与表现相分离的特性，这使得网页代码更加简洁，更易于搜索引擎优化（SEO），也方便后期的维护和修改。 在CSS+DIV布局中，基本布局的种类主要包括固定宽度布局和宽度自适应布局这两种...