个人笔记2020 6-6

最新推荐文章于 2022-08-13 20:28:20 发布

长安引梦。

最新推荐文章于 2022-08-13 20:28:20 发布

阅读量170

点赞数

分类专栏：个人笔记

本文链接：https://blog.csdn.net/lyxilu/article/details/106589409

版权

个人笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

盒类型

在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>

在这里插入图片描述
若利用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>

长安引梦。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人笔记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后效果一样...
复制链接

扫一扫