小白笔记——css盒子模型

最新推荐文章于 2022-08-08 16:02:33 发布

原创最新推荐文章于 2022-08-08 16:02:33 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文深入讲解CSS盒子模型，包括外边距(margin)、边框(border)、内边距(padding)及内容(content)等核心属性，并探讨不同属性的设置方法及其对布局的影响。

盒子模型

//图

盒子模型可以说是布局重中之重了，是布局的基础。css盒子模型可以看做一个盒子，用来装HTML元素，它包括它包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性。

内边距

padding属性可以控制内边距。也就是内容到盒子边框的距离。

合写属性：
在这里插入图片描述
分写属性：

边框

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式边框颜色。

 border : border-width || border-style || border-color; 
 border:1px solid red;(合写)
 /*四条边分开设置*/
 boder-top:1px solid red;
 ...

可以分开设置：
在这里插入图片描述
边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

以上常用，更多可以查询css手册。

外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
代码写法与padding属性一致。
在这里插入图片描述

盒子的大小

盒子的大小由width（宽）和height（高）来设置。盒子的宽高包含了content，padding，border三部分，，，不包含margin！
用代码来表现就是

盒子实际宽度 = border-left + padding-left + width + padding-right + border-right
盒子实际高度 = border-top + padding-top + height + padding-bottom + border-bottom

盒子的一些其他属性

盒子圆角：border-radius：属性值；
盒子阴影：box-shadow: h-shadow（必须） v-shadow（必须） blur spread color inset;

&日常
在这里插入图片描述

以上是默认的盒子模型content-box。
css3中还有一种盒子模型，通过box-sizing:border-box;来使用。它的盒子实际宽高就是width和height，添加padding和border不会影响盒子大小。