css盒子模型

Expl0itBug

已于 2025-02-13 16:29:37 修改

阅读量413

点赞数 4

文章标签： css 前端

于 2024-07-12 02:07:12 首次发布

本文链接：https://blog.youkuaiyun.com/2302_78449782/article/details/140365874

版权

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

外边距+边框+内边距+元素本身大小

margin

margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

复合写法

一个值：上下左右

两个值：上下，左右

三个值：上，左右，下

四个值：上，右。下。左

margin:100px 200px 300px 400px

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

padding

表示盒子的内边距（填充）。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

border

表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。

box-shadow：

inset：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。

offset-x, offset-y：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。