盒子模型的布局

最新推荐文章于 2022-09-10 20:31:47 发布

鬼琦

最新推荐文章于 2022-09-10 20:31:47 发布

阅读量938

点赞数 1

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_55770237/article/details/116133987

版权

本文介绍了CSS3中的盒子模型，包括内容区、内边距、边框和外边距的概念及设置方法。内容区的大小由width和height决定，边框通过border-width、border-color和border-style设置。内边距padding影响盒子大小，外边距margin不影响盒子大小但影响位置。边框和内边距的设置会影响盒子的总尺寸，而外边距则用于调整元素间的相对位置。

摘要由CSDN通过智能技术生成

盒子模型的布局

一、盒子模型概念

css将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。也可以称为盒模型、盒子模型、框模型（box model）。
每一个盒子都由几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）

二、边框（border）

1、内容区（content）：元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width 和 height 两个属性来设置
width：设置内容区的宽度
heigth：设置内容区的高度

2、边框（border）：边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响整个盒子的大小，要设置边框，需要至少设置三个样式：
边框的宽度：border-width
边框的颜色：border-color
边框的样式：border-style
①边框的宽度： border-width可以用来指定四个方向的边框的宽度。
值的情况：
四个值：上࿰

最低0.47元/天解锁文章