css-背景-盒子模型-背景大小

背景
background-color 背景颜色
十六进制
rgb
rgba a的取值0-1
background-image 背景图片
url 位置 加""会有提示,不加没有提示
background-repeat 背景图片是否平铺满
no-repeat 不平铺满
repeat-x 在x轴平铺满
repeat-y 在y轴平铺满
repeat 平铺满
background-position 背景图片位置
left right center top bottom 方向位置,只写一个的话,另一个默认是center
x,y 精确位置,第一个值必须是x轴
混合单位 第一个值必须是x轴
background-attachment 背景图片是否随鼠标滚轮滚动
scroll
fixed 图片会按照浏览器的位置进行调整,不是特别好用,定位在页面,不随着页面滚动
复合写法
background-color,background-image,repeat,fixed,position
background-size
精确值
宽高
只设置一个,高auto
百分比
父盒子的宽高计算百分比
只设置一个,高auto
contain
图片完全显示
盒子部分空白
cover
盒子全被盖住
图片有可能显示不安全
盒子模型
外边距
边框
border
border-width 边框宽度
1px 四条边
1px 2px 上下,左右
1px 2px 3px 上,左右,下
1px 2px 3px 4px 上,下,左,右
border-style
solid 实线
dashed 虚线
dotted 点线
border-color
复合写法 border-width border-style border-color
border-top
内边距
内容 width,height
背景大小
background-size
300px 可以设置数字+px, 宽高, 如果只设置一个, 按照宽度进行原图片比例缩放
50% 百分比时, 按照父元素的宽高进行计算, 设置一个百分比时, 宽度按照父元素宽度计算, 高度等比例缩放
contain cantain 图片按照原比例缩放, 当有一边和父元素边框相接时, 停止缩放 可能会造成盒子有空白区域
cover 图片按照原比例进行缩放, 当盒子完全被盖住时停止 图片可能显示不完全