css盒子模型

这次笔记内容主要为css盒子模型的制作。

一、什么是盒子模型

盒子模型是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

二、盒子模型相关属性

1.边框属性（border)

• 边框样式（border-style）

**格式：**border-style:上边[右边 下边 左边];

**属性：**solid（单实线）、dashed（虚线）、dotted（点线）、double（双实线）

• 边框宽度（border-width）

**格式：**border-width:上边[右边 下边 左边];

属性设置：一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左（单位为px）

• 边框颜色（border-color）

**格式：**border-color:上边[右边 下边 左边];

**派生属性：**border-top-colors、border-right-colors、border-bottom-colors、border-left-colors

• 综合设置边框

**格式：**border:宽度 样式 颜色

• 圆角边框（border-radius）

**格式：**border-radius:参数1/参数2（参数1表示圆角的水平半径，参数2表示圆角的垂直半径，用/隔开）

• 图片边框（border-image）

简写属性。用于设置border-image-source、border-image-slice、 border-image-width、border-image-outset以及border-image-repeat等属性

**属性：**source图片路径、slice指定边框图像顶部右侧底部左侧内偏移量、width边框宽度、outset边框背景向盒子外部延伸的距离、repeat背景图片的平铺方式

2.边距属性

• padding内边距（填充）

padding-top:上内边距;padding-right:右内边距;padding-bottom:下内边距;padding-left:左内边距;padding:上内边距 [右内边距下内边距 左内边距];

• margin外边距

margin-top:上外边距;margin-right:右外边距;margin-bottom:下外边距;margin-left:左外边距;margin:上外边距 [右外边距下外边距 左外边距];

• box-shadow阴影

**格式：**box-shadow:像素值1像素值2像素值3像素值4颜色值 阴影类型；

像素值1	表示元素水平阴影位置，可以为负值（必选属性）。
像素值2	表示元素垂直阴影位置，可以为负值（必选属性）。
像素值3	阴影模糊半径（可选属性）。
像素值4	阴影扩展半径，不能为负值（可选属性）。
颜色值	阴影颜色（可选属性）。
阴影类型	内阴影（inset）/外阴影（默认）（可选属性）。

• box-sizing

定义盒子高宽度是否包含元素的内边距和外边距

**格式：**box-sizing:content-box/border-box；

属性：

1.content-box定义width和height时，不包含border和padding

2. border-box定义width和height时，border和padding的参数值被包含在width和height之内

3.背景属性

• background-color背景颜色

默认值为transparent即背景透明，也可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。

• background-image背景图片
• 背景图片不透明度的设置

1.RGBA模式

格式：rgba(r,g,b,alpha) 在RGB基础上加了不透明度参数

• 2.opacity属性

格式：opacity：opacityValue;能使任何元素呈现出透明效果

• 背景图像平铺

**属性：**repeat：沿水平和竖直两个方向平铺（默认值）

​ no-repeat：不平铺（图像位于元素的左上角，只显示一个，且以元素左上角为基准点显示）

​ repeat-x：只沿水平方向平铺

​ repeat-y：只沿竖直方向平铺

• background-attachment背景图像固定

**属性：**scroll：图像随页面元素一起滚动（默认值）

​ fixed：图像固定在屏幕上，不随页面元素滚动。

• background-size背景图像大小

**格式：**background-size:属性值1 属性值2;

属性值	说 明
像素值	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；
百分比	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；
cover	把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；
contain	把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；

• background-origin设置背景显示区域

改变以左上角为基准点的定位方式，自行定义背景图片的相对位置

**格式：**background-origin:属性值；

**属性：**padding-box：背景图像相对于内边距区域来定位。

​ border-box：背景图像相对于边框来定位。

​ content-box：背景图像相对于内容框来定位。

• background-clip设置背景图像的裁剪区域

**格式：**background-clip:属性值;

**属性：**border-box：默认值，从边框区域向外裁剪背景。

​ padding-box：从内边距区域向外裁剪背景。

​ content-box：从内容区域向外裁剪背景。

• 设置多重背景图像

通过background-image、background-repeat、background-position和background-size等属性提供多个属性值来实现多重背景图像效果，各属性值之间用逗号隔开。

• 背景复合属性

**格式：**background:background-color，background-image，background-repeat ，background-attachment，background-position，background-size，background-clip，background-origin;

4.渐变属性

• 线性渐变：沿着一条直线按顺序过渡到结束颜色

  **格式：**background-image:linear-gradient(渐变角度,颜色值1,颜色值2…,颜色值n);

• 径向渐变

• 重复渐变

  格式：

  重复线性渐变：background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2…,颜色值n);

  重复径向渐变：background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…,颜色值n);

本文地址：https://blog.csdn.net/hxtxsdcxy/article/details/109356406