深度了解盒子模型的原理以及结构

本文详细介绍了CSS中的盒子模型,包括定义、W3C盒模型的组成部分,如内容(content)、内边距(padding)、边框(border)和外边距(margin)。通过代码示例和图例,阐述了如何设置单边和缩写方式,帮助读者理解和掌握网页布局中的盒子模型概念。

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

为了使我们充分理解div+css模型的定位功能,就是利用盒子模型这样的布局方式代替了传统的表格布局方式。盒子模型是在学习div+css布局方式中必须要学会的一个模型,通过这个模型你就可以明白网页中div和div之间的相对位置是如何布局的。今天我们就来学习一下盒子模型!

一、盒子模型的定义是什么呢?

盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成一个个盒子。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中,可以拿红酒来对比,红酒=内容,内边距=盒子中的填充物,边框=盒子的厚度,外边距=两个红酒之间的距离。

通常我们设置的宽和高是指“红酒”content的宽度,一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。

代码示例:

< head lang="en">

< title>认识盒子< /title>

< style>

div{

border:2px soild red;

height:50px;

background-color:pink;

}

< /style>

< /head>

< body>

< div>尚学堂</ div>

< /body>

图例为:


二、W3C盒模型

盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成。

对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距

border边框

border属性设置一个元素的边框,它有三个要素:宽、样式、颜色,统称“边框三要素”。

三要素书写时一般按照如下顺序:

border:宽度、样式、颜色

border:1px solid red;

不过不按照此顺序来写依然能正常显示。

div{border:red soild 2px;}

border-style设置边框的样式,有五种常用样式可选

点状 dotted

实线 solid

双线 double(需要最起码设置为3像素,不然显示不下)

虚线 dashed

无边框 none

三、内边距(padding)

元素的内边距在边框和内容之间,控制该区域最简单的属性是padding属性。

CSS padding属性定义元素边框与元素内容之间的空白区域。

单边设置为:

padding-top/right/bottom/left:value;

value可取值为像素,百分比,但不能为负数

内边距的缩写:

padding:value(四个方向相同);

padding:value(上下) value(左右);

padding:value(上) value(左右) value(下);

padding:value(上) value(右) value(下) value(左);

四、外边距(margin)

围绕在元素边框的空白区域就是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位、百分数值甚至负值。

单边设置为:

margin-top/right/bottom/left:vlaue;

value可取值为像素,%,auto,负值

外边距的缩写:

margin:value(四个方向相同);

margin:value(上下) value(左右);

margin:value(上) value(左右) value(下);

margin:value(上) value(右) value(下) value(左);

码字不易,且看且珍惜!

value(上下) value(左右);

margin:value(上) value(左右) value(下);

margin:value(上) value(右) value(下) value(左);

码字不易,且看且珍惜!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值