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 于 清河洛 发表