个人笔记2020 6-6

盒类型

在CSS3中使用display属性来定义盒的类型,总体来说盒分为block和inline类型。比如div元素和p元素就属于block类型,span和a属于inline类型。
两者区别如下(以div和span为例):
在这里插入图片描述

1.inline-block类型

inline-block盒类型属于block盒的一种,但是在显示时具有inline类型盒的特点
例如:如果在div元素中分别将display设置为inline-block和inline后效果一样
代码及效果如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            display:inline-block;
            background-color: #41db50;
        }
        .div2{
            display:inline;
            background-color: #41db50;
        }
        
    </style>
</head>
<body>
    <div class="div1">div1盒模型</div>
    <div class="div2">div2盒模型</div>
</body>

在这里插入图片描述

2.利用inline-block执行分列显示

在CSS2.1之前如果需要一行中并列多个元素就需要float等属性,这样会让样式变的复杂,而CSS2.1追加的inline-block能让此变的简单。
若用float属性 代码及效果图如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            width:100px;
            height:100px;
            background-color: red;
            float:left;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: green;
            float:left;        }
        .div3 {
            width: 200px;
            height: 200px;
            background-color: brown;
            clear:both;
            float:left;

        }

    </style>
</head>
<body>
    <div class="div1">div1盒模型</div>
    <div class="div2">div2盒模型</div>
    <div class="div3">div3盒模型</div>
</body>
</html>

个人笔记2020 6-6_第1张图片
若利用inline-block 代码应变为如下:

<style>
        .div1{
            width:100px;
            height:100px;
            background-color: red;
            display:inline-block;
        }
        .div2{
            width: 100px;
            height: 100px;
            margin:-5px;
            background-color: green;
            display:inline-block;   
        }
        .div3 {
            width: 200px;
            height: 200px;
            background-color: brown;
         
        }

    </style>

你可能感兴趣的:(个人笔记)