块与内联

最新推荐文章于 2022-02-19 23:31:13 发布

honeyws

最新推荐文章于 2022-02-19 23:31:13 发布

阅读量236

点赞数

分类专栏： Web前端基础文章标签：块与内联

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102975646

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

块特点
1，独占一行
块标签的特点是独占一行，当设置两个div标签时，可以发现默认为上下排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块与内联</title>
</head>
<body>
    <div>愿世间美好与你相遇</div>
    <div>此时已莺飞草长 爱的人在路上</div>
</body>
</html>

2.支持所有样式，任何样式添加到块标签上都会起作用，包块盒子模型中的所有属性。
3.不设置宽时，其宽等于父标签的宽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块与内联</title>
    <style>
        #box1{background: red; color: rosybrown;}
        #box2{width: 300px; height: 100px;
            background: royalblue; color: seagreen;}
        #box3{background: blue;}    
    </style>
</head>
<body>
    <div id="box1">愿世间美好与你相遇</div>
    <div id="box2">
        <div id="box3">此时已莺飞草长 爱的人在路上</div>
    </div>
</body>
</html>

不写宽，只设置内边距时，宽等于父标签减去子标签的内边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块与内联</title>
    <style>
        #box1{width: 300px; height: 100px;
         background: red; color: royalblue;}
        #box2{background: blue; padding-left: 50px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"> 此时已莺飞草长</div>
    </div>
</body>
</html>

内联特点
在一行显示
当两个span标签时，可以发现默认为显示在一行左右排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块与内联</title>
</head>
<body>
    <span>草长莺飞</span>
    <span>世间美好</span>
</body>
</html>

不支持宽高，在margin和padding也有一些问题
span标签不支持高，即当给span标签设置宽高时，不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块与内联</title>
    <style>
        #box1{width: 100px; height: 100px; background: blue;
        color: brown;}
        #box2{width: 100px; height: 100px; background: brown;
        color: white;}
    </style>
</head>
<body>
    <span id="box1">世间美好</span>
    <span id="box2">草长莺飞</span>
</body>
</html>

当把两行定义span标签的代码写到一行时，空隙会消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块与内联</title>
    <style>
         #box1{width: 100px; height: 100px; background: yellow; color: white;}
         #box2{width: 100px; height: 100px; background: yellow; color: white;}
    </style>
</head>
<body>
    <span id="box1">草长莺飞</span><span id="box2">世间美好</span>
</body>
</html>