CSS系列1-块级元素VS行内元素

最新推荐文章于 2024-08-24 18:49:13 发布

a_302

最新推荐文章于 2024-08-24 18:49:13 发布

阅读量549

点赞数

分类专栏：漫漫艰辛路文章标签： web前端开发 css

本文链接：https://blog.csdn.net/a_302/article/details/43090547

版权

漫漫艰辛路专栏收录该内容

13 篇文章 0 订阅

订阅专栏

原文地址：http://blog.csdn.net/sykent/article/details/7738408

1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列，都是同一行的，水平方向排列；

每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效，margin上下无效

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<style type="text/css">
		div{
			width: 200px;
			height:30px;
			line-height:20px;
			margin: 10px 10px 10px 10px;
			padding: 10px 10px 10px 10px;
			border:3px solid grey;
			background-color: pink;
		}
		span{
			width: 200px;
			height:30px;
			line-height:20px;
			margin: 10px 10px 10px 10px;
			padding: 10px 10px 10px 10px;
			border:3px solid white;
			background-color: green;
		}
	</style>
</head>
<body>
	<div>我是div</div>
	<div>我是div</div>
	<div><span>我是嵌在div里的span</span></div>
	<div><span>我是嵌在div里的span</span></div>
	<div>我是div</div><div>我是div</div>
        <span>我是span</span>
	<span>我是span</span>
	<span><div>我是嵌在span里的div</div></span>
	<span><div>我是嵌在span里的div</div></span>
	<span>我是span</span><span>我是span</span>
</body>
</html>

如图所示

4. 行内元素与块级元素可以通过设定display属性相互转换

<!DOCTYPE html>
<html lang="zh-CN">


<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">
    body {
        background-color: #000;
    }
    div {
        width: 200px;
        height: 30px;
        line-height: 20px;
        margin: 10px;
        padding: 10px;
        border: 3px solid grey;
        background-color: pink;
    }
    
    span {
        width: 200px;
        height: 30px;
        line-height: 20px;
        margin: 10px;
        padding: 10px;
        border: 3px solid white;
        background-color: green;
    }


    .inline {
        display: inline;
    }


    .block {
        display: block;
    }
    </style>
</head>


<body>
    <div>div123</div>
    <div>div123</div>
    <div class="inline">display:inline</div>
    <div class="inline">display:inline</div>
    <div>div123</div>
    <div>div123</div>
    <span>span456</span>
    <span>span456</span>
    <span class="block">dispaly:block</span>
    <span class="block">dispaly:block</span>
    <span>span456</span>
    <span>span456</span>
</body>


</html>

结果如图