块级元素和行内元素

行内(inline)元素的一些属性

并不是所有的属性对行内元素都能够生效

  1. 行内元素不会应用width属性，其长度是由内容撑开的
  2. 行内元素不会应用height属性，其高度也是由内容撑开的，但是高度可以通过line-height调节
  3. 行内元素的padding属性只用padding-left和padding-right生效，padding-top和padding-bottom会改变元素范围，但不会对其它元素造成影响
  4. 行内元素的margin属性只有margin-left和margin-right有效，margin-top和margin-bottom无效
  5. 行内元素的overflow属性无效，这个不用多说了
  6. 行内元素的vertical-align属性无效（height属性无效）

例子：把背景色去除了再比较，padding并没有影响布局。( 有10个1在其中，可以把span替换成div再看看，div的padding明显影响其他元素）

<!doctype html>
<html>
<head>
<style>

</style>

<meta charset="utf-8">
<title>OnMouseDown</title>
<body style="border:1px solid red;"onMouseDown="hello()">
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
<span style="background:red; border:5px solid blue; padding:50px;">aaa</span>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
</body>
</html>

div测试 display:inline

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <style>
 5 
 6 </style>
 7 
 8 <meta charset="utf-8">
 9 <title>OnMouseDown</title>
10 <body style="border:1px solid red;"onMouseDown="hello()">
11 1<br/>
12 1<br/>
13 1<br/>
14 1<br/>
15 1<br/>
16 <div style="
17 display:inline;
18 margin:100px;
19 background:red; border:5px solid blue; padding:20px;">aaa</div>
20 1<br/>
21 1<br/>
22 1<br/>
23 1<br/>
24 1<br/>
25 </body>
26 </html>
View Code
原生态div
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <style>
 5 
 6 </style>
 7 
 8 <meta charset="utf-8">
 9 <title>OnMouseDown</title>
10 <body style="border:1px solid red;"onMouseDown="hello()">
11 1<br/>
12 1<br/>
13 1<br/>
14 1<br/>
15 1<br/>
16 <div style="
17 margin:100px;
18 background:red; border:5px solid blue; padding:20px;">aaa</div>
19 1<br/>
20 1<br/>
21 1<br/>
22 1<br/>
23 1<br/>
24 </body>
25 </html>
View Code

 

 

原文：http://www.cnblogs.com/fu277/archive/2012/03/13/2393358.html

　　块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

　　行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

　　

　　块级元素可以设置width,height属性.

　　行内元素设置width,height属性无效.

　　块级元素即使设置了宽度,仍然是独占一行.

　　

　　块级元素可以设置margin和padding属性.

　　行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.

　　

　　块级元素对应于display:block.

　　行内元素对应于display:inline.

 

posted @ 2015-06-02 16:43  阿玛  阅读(135)  评论(0)    收藏  举报