css-块元素跟行元素-HTML教程-爱易网页

css-块元素跟行元素

日期：2014-05-17　浏览次数：20700 次

css-块元素和行元素
行内元素：html中的大多数是行内元素
块元素：主要的块元素有p，div

-----------------------------------

当浏览器开始渲染 HTML 文档，它从窗口的顶端开始，经过整个文档内容的过程中，分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定，否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界，然后换到下一行垂直渲染。即标准流。

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

css-块元素跟行元素

相关资料更多>

推荐阅读更多>