CSS定位(position)：相对定位resition、绝对定位absolute和fixed
resition基于文档流的位置，原文档流位置保留
absolute基于父元素，脱离文档流，原文档流位置不保留
fixed基于浏览器窗口，脱离文档流，原文档流位置不保留
边框：
边框border的样式：
none：没有边框 solid：实线边框 dashed：破折线边框 dotted：圆点线边框
double：双线边框 groove：槽线边框 ridge：脊线边框
inset：使元素内容具有内嵌效果的边框 outset：使元素内容具有外凸效果的边框
使用 border-radius 属性可以设置圆角边框：
border-radius：长度值或百分数 四条边角
border-top-left-radius：长度值或百分数 左上边角
border-top-right-radius：长度值或百分数 右上边角
border-bottom-left-radius：长度值或百分数 左下边角
border-bottom-right-radius：长度值或百分数 右下边角
设置圆角矩形：div { border: 10px solid red; border-radius: 10px; }
四条边分别设置：div { border: 10px solid red; border-radius: 10px 20px 30px 40px; }(上右下左)
背景
| background-color | 背景的颜色 |
| background-image | none或url，背景图片 |
| background-repeat | 样式名称，背景图片的平铺样式 |
| background-size | 长度值，背景图像的尺寸 |
| background-position | 位置坐标，背景图像的位置 |
| background-attachment | 滚动方式，背景图片的滚动 |
| background-clip | 裁剪方式，背景图片的裁剪 |
| background-origin | 位置坐标，背景图片起始点 |
| background | 复合值，背景图片简写方式 |
background-color：
颜色值 设置背景颜色为指定色
transparent 设置背景颜色为透明色
background-image：
none：取消背景图片的设置
url：通过 URL 设置背景图片
background-repeat：
repeat-x：水平方向平铺图像
repeat-y：垂直方向平铺图像
repeat：水平和垂直方向同时平铺图像
no-repeat：禁止平铺图像
background-position：
top/bottom：将背景图片定位到元素顶部/底部
left/right：将背景图片定位到元素左部/右部
center 将背景图片定位到元素中部
长度值 使用长度值偏移图片的位置：background-position:10px 20px;(10px为向左偏移量，20px为向上偏移量)
百分数 使用百分数偏移图片的位置
background-size：
auto：默认值，图像以本尺寸显示
cover：等比例缩放图像，使图像至少覆盖容器，但有可能超出容器
contain：等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合
长度值：CSS 长度值，如 px、em，有两个数值，第一个为长度，第二个为高度
百分数：一个百分数，如56%,背景图片会占用总容器的容量大小
background-attachment：
scroll：默认值，背景固定在元素上，会随着内 容一起滚动
fixed：背景固定在视窗上，内容滚动时背景不动：会导致背景产生水印效果，拖动滚动条而背景不动。
background-origin：
border-box：在元素盒子内部绘制背景，背景绘制时会包含边框在内。
padding-box：在内边距盒子内部绘制背景，默认值，背景绘制时不会包含边框。
content-box：在内容盒子内部绘制背景，背景绘制时不包含边框和内边距，只包含内容部分。
background-clip：
border-box：在元素盒子内部裁剪背景，默认值，背景绘制时会裁剪边框之外的内容(可以认为不裁剪)
padding-box：在内边距盒子内部裁剪背景，背景绘制时会裁剪掉边框内的背景。
content-box：在内容黑子内部裁剪背景，背景绘制时会裁剪掉边框和内边距的背景，只保留内容部分背景
background：
符合顺序：color image repeat attachment position/size origin clip
颜色，背景图片，平铺方式，是否滚动，位置定位，背景尺寸，绘制背景，裁剪背景
同时有背景定位和背景尺寸时两个数据之间要用“/”隔开，其他用空格隔开
- 本文固定链接: https://www.qingheluo.com/cssbiankuangyubeijing/
- 转载请注明: qingheluo 于 清河洛 发表
