CSS---再谈行内元素和块级元素

如果采用w3c盒子模型，即加上文档声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子(ie盒子模型的content包括border和padding。)，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

 

以下为亲测

宽高：不可通过width和height属性改变其大小

外边距：左右外边距有效，会忽略上下外边距

内边距：可以设置，但和上下相邻的元素可能会发生重叠

（firefox中的截图）

但是如果行内元素设为浮动后，上述一切设置（width/height、margin、padding）均有效，换句话说就是可以设置宽高和内外边距了。

<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#outer{
			width: 300px;
			height: 100px;
			background: red;
		}
		span{
			background: #ccc;
			width: 400px;
			height: 300px;
			margin: 10px;
			padding: 10px;
		}
		#inner{
			background: blue;
			width: 100px;
			height: 50px;
		}
	</style>
</head>
<body>
	<div id="outer">
		<span>this is a span.</span>
		<span>this is a span.</span>
		<div id="inner">this is a div.</div>
		<span>this is a span.</span>

	</div>
</body>
</html>

 

总结

块级元素和行内元素区别

  1. 行内元素同一行水平排列。
  2. 块级元素各占据一行，垂直方向排列。
  3. 块级元素可以包含行内元素和块级元素。但行内元素不能包含块级元素。
  4. 行内元素与块级元素属性的不同，主要是盒模型属性上。
  5. 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。

如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。

posted @ 2016-04-27 09:54  框框A  阅读(392)  评论(0)    收藏  举报