CSS盒子模型及属性

最新推荐文章于 2024-10-13 22:11:37 发布

11是只幼稚鬼

最新推荐文章于 2024-10-13 22:11:37 发布

阅读量1.1k

点赞数 32

CC 4.0 BY-SA版权

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/m0_62055970/article/details/125871723

本文详细介绍了CSS盒子模型，包括内容区、内边距、边框、外边距以及元素的宽度和高度。内容区是存放网页元素的地方，可以包含文本和图像等。内边距通过padding属性调整，边框可通过border属性设置样式、宽度和颜色。外边距margin用于元素间的间距。CSS盒子模型对于网页布局至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.内容区/页面元素(content）

2.内边距(padding)属性

3.边框(boder)属性

4.外边距（margin)属性

5.元素的宽度和高度

6.布局属性

CSS盒子模型：

CSS盒子模型，又称为框模型，包含元素内容（content）、内边距（padding）、边框（border)、外边距（margin）几个元素，如下图所示：

1. 内容区/网页元素(content)

内容区是整个盒⼦模型的中⼼，其中存放了⽹⻚的主要元素，这些元素可以是文本、图像等。

内容区有 width 、 height 、 overflow 三个属性。其中 width 和 height 属性⽤来指定盒子内容区域的宽度和高度。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        div{
        background-color:pink;
        width: 100px;
        height: 100px; 
           }
    </style>
<dody> 
    <div>玫红的玫瑰胡与森绿的薄荷岛，好像都没有办法拒绝。</div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div>   
</body>
</html>

运行结果：

在普通盒⼦模型中，如果内容过多，超出部分会在盒⼦外显示

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        div{
        background-color:pink;
        width: 100px;
        height: 100px; 
           }
    </style>
<dody> 
    <div>玫红的玫瑰胡与森绿的薄荷岛，好像都没有办法拒绝。
         生活充满阳光和希望，小麦和玫瑰永不衰亡。
    </div>