前端-盒子模型与元素显示类型

WhenYa

于 2022-08-19 23:50:47 发布

阅读量711

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/wwx1239021388/article/details/126433571

版权

盒子模型与元素显示类型

1. 盒子模型

css可以将HTML元素设置成一个个矩形盒子

盒子模型是网页设计中经常用到的一种思维模型，由四个部分构成，从内到外分别为内容区（content）、内边距（padding）、边框（border）和外边距（margin），CSS 为这四个部分提供了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

盒子模型-内容区域 content

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

hidden：表示隐藏溢出的部分；
visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；
scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；
auto：表示由浏览器决定如何处理溢出部分。

盒子模型-边框区域 border

使用 border 属性来设置边框，在内容和内边距的外面，用来包裹和分隔内容的

**边框三要素：**border: 1px solid red

**边框的粗细：**默认为3px
**边框的样式：**没有默认值，是必须要填的内容
**边框的颜色：**默认为黑色

边框的粗细和颜色都有默认值：

边框是环绕内容区和内边距的边界，我们可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

border-width border-style border-color 最多可以接受四个值

从上开始赋值，顺时针赋值，没有赋值到的就与对面相同

border-width: 20px 一个值设置上下左右，边框都是20px
border-width: 20px 40px 两个值分别设置上下和左右，上下边框是20px，左右边框是40px
border-width: 20px 30px 40px 上边框是20px，左右边框是30px，下边框是40px
border-width: 20px 30px 40px 50px 上右下左依次赋值

0px 表示这一边没有边框

单边框设置：border-left: 5px dashed red

边框线类型：

值	描述
none	默认：无边框。
solid	定义实线
dotted	点状边框
dashed	虚线
double	双线

盒子模型-内边距区域 padding

内边距是内容区和边框之间的空间

内边框的颜色是继承背景颜色

padding 也支持四个值

我们可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding来设置内容区各个方向上与边框之间的距离。

取值	示例	含义
一个值	`padding: 10px`	上下左右都设置为10px
两个值	`padding: 10px 20px`	上下设置为10px，左右设置为20px
三个值	`padding: 10px 20px 30px`	上设置为10px，左右设置为20px，下设置为30px
四个值	`padding: 10px 20px 30px 40px`	上设置为10px，右设置为20px，下设置为30px，左设置为40px