盒模型及属性

wp2023090222

码龄3年

关注

原创最新推荐文章于 2026-08-23 19:16:04 发布 796 阅读 GEO检测

头歌OpenGauss数据库 - 单表查询答案本关任务：用SELECT语句检索数据表中指定字段的数据；用SELECT语句检索数据表中所有字段的数据。为了完成本关任务，你需要掌握： 1.如何获取数据表中指定字段的数据；2.如何获取数据表中的所有数据。阅读详情

盒模型是指：html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。

盒模型的属性

1、边框

一般用于分隔不同的元素，边框的外围即为元素的最外围。边框是围绕元素内容和内边距的一条或多条线。border属性允许规定元素边框的宽度、颜色和样式。

边框样式
none	无边框，与任何指定的border-width值无关
dotted	边框为点线
dashed	边框为短线
solid	边框为实线
double	边框为双线，两条单线与其间隔的和等于指定的border-width 值
groove	根据 border-color的值画 3D凹槽
ridge	根据border-color的值画菱形边框
inset	根据border-color的值画 3D凹边
outset	根据border-color的值画 3D凸边

<head>
    <style>
        #div1{
            border: 2px black solid;
        }
        #div2{
            border: 2px red solid;
        }
    </style>
</head>
<body>
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
</body>

2、外边距和内边距

外边距（margin）即盒子与盒子的边距，内边距（padding）即盒子内的元素和盒子之间的边距。

外边距属性
margin-top :length \| auto	上外边距
margin-right :length \| auto	右外边距（可以是负值）
margin-bottom :length \| auto	下外边距
margin-left :length \| auto	左外边距（可以是负值）
margin:length \| auto	外边距

内边距属性与外边距属性相同，这里就不列举了。但是各种元素盒子属性的默认值不尽相同，具体区别如下：

(1)大部分html元素的盒子属性(margin、padding)默认值都为0。

(2)有少数html元素的盒子属性(margin、padding)在浏览器解析时的默认值不为0。例如<body>、<p>、<ul>、<li>、<form >标签等,有时有必要先设置它们的这些属性为0。

(3)<input>元素的边框属性默认不为0,可以设置为0,达到美化输入框和按钮的目的。

<head>
    <style>
        #div1{
            border: 2px black solid;
            margin: 200px;
            padding: 20px;
        }
        #div2{
            border: 2px red solid;
            margin: 10px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
</body>

3、盒子的大小

一般我们通过定义盒子的宽度和高度去定义盒子的大小。

<head>
    <style>
        #div1{
            border: 2px black solid;
            margin: 200px;
            padding: 20px;
            width: 200px;
            height: 50px;
        }
        #div2{
            border: 2px red solid;
            margin: 10px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
</body>