码迷,mamicode.com
首页 > Web开发 > 详细

css 内联与块

时间:2016-05-16 00:04:46      阅读:337      评论:0      收藏:0      [点我收藏+]

标签:

内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素。

如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了。

1
<span style="width:100px;height:100px;display:block;"></span>

 

margin可以控制内联和块级元素的间距,而不光是内联元素。

主要注意他们之间的转换问题,如块级元素加float属性会变为内联元素。

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

 

display使用的最多属性值为:block(块级元素),inline(内联元素),inline-block(内联块元素)

通俗易懂的说:

块级元素(block):可以设置宽高,margin,padding值等;

1
2
<div>我是块级元素DIV!</div>
<p>我是块级元素P!</p>

上面的显示的结果:

1
2
我是块级元素DIV!
我是块级元素P!

内联元素(inline):不可以设置宽高,margin,padding值等;

1
2
<span>我是内联元素SPAN!</span>
<em>我是内联元素EM!</em>

上面显示的结果(会在一排显示,这时你设置的宽高,margin,padding值都不起作用):

1
我是内联元素SPAN!我是内联元素EM!

内联块元素(inline-block):可以设置宽高,margin,padding值

1
2
<span>我是内联元素SPAN!</span>
<em>我是内联元素EM!</em>

css:

1
span,em { padding0 5pxdisplay: inline-block;}

上面显示的效果会在一排,但是同时宽高,margin,padding值也起作用;

1
 我是内联元素SPAN!  我是内联元素EM!

css 内联与块

标签:

原文地址:http://www.cnblogs.com/allensun-193/p/5496611.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!