CSS显示模式

CSS显示模式

块元素

1. 独占一行
2. 高度，宽度，外边距以及内边距都能控制
3. 宽度默认是100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

行内元素

1. 一行可以显示多个
2. 宽高无法设置
3. 默认高度是本身内容的宽度
4. 行内元素只能容纳文本或行内元素

行内块元素

1. 宽高可调
2. 一行多个
3. 默认高度是本身内容的宽度

CSS模式转化

行内元素转块级元素：display: block;

块元素转化为行内元素：display：inline;

转化为行内块元素：display：inline-biock;

注意：单行文字垂直居中，让行高等于盒子的高度

CSS背景

背景图片：background-image：url（地址）

注意：会默认铺满盒子

背景平铺（就是会不会铺满整个盒子）

用background-repeat来实现

参数值	类型
repeat	背景图像在x和y方向都平铺
no-repeat	背景图像不平铺
repeat-x	背景图像在x方向上平铺
repeat-y	背景图像在y方向上平铺

注意：可以与背景颜色一起存在，背景颜色会被置于最底层

背景图片位置

用background-position属性来实现

left center等

为了让背景居中可以用background-position: center top;

背景位置-精确单位（background-position: x px y px;）

第一个参数一定对应x，第二个对应y

如果只写一个参数那就是x的值，y默认为垂直居中

背景位置-混合单位

background-position: 20px center

同样的第一个对应x的值，第二个对应y的值

背景固定

用background-attachment来实现

参数	作用
scroll	背景随对象内容滚动
fixed	背景图像固定

注意：默认值是scroll

背景属性的复合写法：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

背景颜色半透明

用 background: rgba（）; 来实现

background:rgba(0,0,0,0.3);

注意：

• "a"是alpha透明度的意思，取值在0到1之间
• 可以把0.3中的0省略掉，写出 .3
• 盒子的内容不受影响

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进值/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x，y坐标
background-attachment	背景固定	scroll/fixed
背景半透明	实现半透明	rgba（rgba代码）a为透明度