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
- 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