行内元素:html中的大多数是行内元素
块元素:主要的块元素有p,div
-----------------------------------
当浏览器开始渲染 HTML 文档,它从窗口的顶端开始,经过整个文档内容的过程中,分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定,否则浏览器垂直扩展文档来容纳全部的内容。[color=red]每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界,然后换到下一行垂直渲染。[/color]即标准流。
CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。块元素对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧。
块元素:主要的块元素有p,div
-----------------------------------
当浏览器开始渲染 HTML 文档,它从窗口的顶端开始,经过整个文档内容的过程中,分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定,否则浏览器垂直扩展文档来容纳全部的内容。[color=red]每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界,然后换到下一行垂直渲染。[/color]即标准流。
CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。块元素对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧。
<style>
body {
text-align: center;
font-size: 12px;
border: 1px solid red;
}
#parent {
width: 920px;
height: 200px;
margin-right: auto;
margin-left: auto;
}
#div1 {
width: 300px;
height: 200px;
background-color: white;
float: left;
border: 1px dashed blue;
text-align: left;
}
#div2 {
width: 300px;
height: 200px;
background-color: white;
float: left;
border: 1px dashed blue;
text-align: center;
margin-left: 10px;
margin-right: 10px;
margin-left: 10px;
}
#div3 {
width: 300px;
height: 200px;
background-color: white;
float: left;
border: 1px dashed blue;
text-align: right;
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
</head>
<body>
<div id="parent">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
</body>
</html>