盒的基本类型

盒的基本类型   display定义盒的类型  主要是block和inline类型

body内容：

<h1>盒的基本类型</h1>
<div>display定义盒的类型  主要是block和inline类型</div>
<span>display定义盒的类型  主要是block和inline类型</span>
</body>
style:
<style>
    div{
        background-color: lightgreen;
    }
    span{
        background-color: #e4faa8;
    }
</style>
结果： 
1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
        /*div{
            background-color: lightgreen;
        }
        span{
            background-color: #e4faa8;
        }*/
        div{
            background-color: #ff4b55;
            display: inline-block;
        }
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div>display定义盒的类型  主要是block和inline类型</div>
<span>display定义盒的类型  主要是block和inline类型</span>
</body>
</html>
2然后继续
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
        /*div{
            background-color: lightgreen;
        }
        span{
            background-color: #e4faa8;
        }*/
        div{
            background-color: #ff4b55;
            display:inline;
        }
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div>display定义盒的类型  主要是block和inline类型</div>
<span>display定义盒的类型  主要是block和inline类型</span>
</body>
</html>
得出结论 div的display属性设置成inline和inline-block 运行的结果是一样的不会分行  但是你不设置属性div的display属性默认的是block block叫做块 块会单独占一行 inline表示内联，会排满浏览器的一行才会换行
3inline-block类型 设置宽高后
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
        /*div{
            background-color: lightgreen;
        }
        span{
            background-color: #e4faa8;
        }*/
        div{
            background-color: #ff4b55;
            width: 50px;
            height: 50px;
        }
        .div1{display: inline-block}
        .div2{display: inline}
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div class="div1">inline-block类型 设置宽高后 文字会溢出</div>
<div class="div2">inline类型inline类型inline类型</div>
<span>span是内联的 </span>
</body>
</html> 
分享知识，分享快乐！希望中国站在编程之巅！
               ----融水公子
公众微信号：rsgz520
360图书馆馆号：rsgz002.360doc.com

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。