CSS3盒模型

最新推荐文章于 2024-07-23 14:51:29 发布

NUT_fireless

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量178

点赞数

分类专栏： css3 文章标签： css css3

本文链接：https://blog.csdn.net/NUT_fireless/article/details/106577313

版权

盒模型

在CSS3中使用display来定义盒的类型，分为block类型和inline类型。例如：div和p属于block类型，span和a属于inline类型。
例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
		div{background: green}
		span{background: red}
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div>在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
<span>在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</span>
</body>
</html>

在这里插入图片描述

inline-block类型

inline-block类型是CSS2.1中追加的一个盒类型。inline-block属于block的一种，但在显示时具有inline的特点。
例如：在div中分别将display设置为inline-block和inline后的效果相同。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
        div{background: green;}
        .div1{display: inline-block}
        .div2{display: inline}
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div class="div1">在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
<div class="div2">在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
</body>
</html>

在这里插入图片描述
当设置高度和宽度后：

<!D

最低0.47元/天解锁文章

NUT_fireless

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3盒模型

盒模型inline-block类型inline-tablelist-item类型run-in类型在CSS3中使用display来定义盒的类型，分为block类型和inline类型。例如：div和p属于block类型，span和a属于inline类型。例如：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>盒的基本类型</title&
复制链接

扫一扫

专栏目录