您的位置：首页 > 其它

内联元素和块级元素的定位区别

2014-10-10 21:36 281 查看
内联元素和块级元素的区别

内联元素——是没有宽和高的

1、 其大小是由自己本身的字体大小决定，若要进行上下对齐时，用行高（line-height）设置

2、还可以运用定位的方法进行设置：
float定位 （left、right）

postion定位（static、relative、absolute、fixed）

图片与文字对齐的方法：（在图片中定义）vertical-align：middle；

border-radius：属性值 ；（设置圆角，其值越大，更圆）

例如：border-bottom-right-raius：50px；（是将右下角进行圆角化）

<strong> </strong> 强调元素
<button> <button> 按钮元素

块级元素——有自定义的宽与高
其定位方法有很多种，方法如下：
1、
padding定位

2、
border定位

3、 float定位

4、 position定位

下面这个例子就是用来说明其区别
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.mian{
width: 300px;
height: 50px;
background-color: #faa;
text-align: center;
}
.mian-sp1,
.mian-sp2{
width: 100px;
height: 20px;
background-color: #eee;
/*margin-top: 100px;*/
/*float: left;*/

}
.mian-sp2{
background-color: #de1;
margin-top: 100000px;
/*margin-left: 10px;*/
/*line-height: 50px;*/

/*vertical-align: middle;*/
}
</style>
</head>
<body>
<div class="mian">
<!--  		<div class="mian-sp1">div1</div>
<div class="mian-sp2">div2</div> -->
<span class="mian-sp1">123</span>
<span class="mian-sp2">2345</span>
</div>
</body>
</html>


内联元素的结果：不管如何的设置margin或是padding都无效。



块级元素的结果：因为有宽和高，设置上面两个元素属性，会发生改变

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航