CSS盒子模型及属性

最新推荐文章于 2023-03-16 11:36:04 发布

11是只幼稚鬼

最新推荐文章于 2023-03-16 11:36:04 发布

阅读量1k

点赞数 32

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_62055970/article/details/125871723

版权

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