【CSS3】的语法【十】

最新推荐文章于 2024-06-13 08:39:52 发布

Liana-Fany

最新推荐文章于 2024-06-13 08:39:52 发布

阅读量1.3k

点赞数 31

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/lianafany/article/details/137551498

版权

在这里插入图片描述

盒的基本类型

在CSS中，使用display属性来定义盒的类型。总体来说，CSS中的盒分为block类型与inline类型。例如，div元素与p元素属于block类型，span元素与a元素属于inline类型。
接下来，我们将block类型与inline类型做一个对比。用包含两个div元素与两个span元素。为了更容易辨别，我们将div元素的背景设定为绿色，将span元素的背景设定为橘色。从这个示例的运行结果我们可以看出，div元素所代表的block类型的元素的宽度占满了整个浏览器的宽度，而span元素所代表的inline类型的元素的宽度只等于其内容所在的宽度。另外，每一行中只允许容纳一个block类型的元素，但是可以并列容纳多个inline类型的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>将block类型与inline类型进行对比的示例</title>
</head>
<style type="text/css">
div
{
        background-color: #aaff00;
}
span
{
        background-color: #ffaa00
}
</style>
<body>
<div>div元素</div>
<div>div元素</div>
<span>span元素</span>
<span>span元素</span>
</body>
</html>

在样式代码中如果使用display属性，可以将div元素与span元素的类型进行互换，将div元素变成inline类型的元素，将span元素变成block类型的元素：

<style type="text/css">
div{
        background-color: #aaff00; 
        display:inline;
}
span
{        background-color: #ffaa00;
        display:block;
}
</style>

inline-block类型概述

inline-block类型是在CSS 2.1中追加的一个盒类型。目前为止，它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。
inline-block类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的特点。例如，在div元素的样式代码中将display属性设定为“inline-block”，则div元素在显示时与将div元素的display属性设定为“inline”后的显示效果相同。
例如：具有四个div元素，其中两个被指定为inline-block类型，背景为浅蓝色；另外两个被指定为inline类型，背景为绿色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="

最低0.47元/天解锁文章

Liana-Fany

关注

31
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS3】的语法【十】

inline-block类型是在CSS 2.1中追加的一个盒类型。目前为止，它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。inline-block类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的特点。例如，在div元素的样式代码中将display属性设定为“inline-block”，则div元素在显示时与将div元素的display属性设定为“inline”后的显示效果相同。
复制链接

扫一扫