1.内边距
1. 什么是内边距:
内容区域与边框之间的距离
特点:会扩大元素边框所占用的区域。
2. 语法:
padding:value;
单边设置:
padding-top/right/bottom/left:value;
取值:
1. 单位可以为:px
2. 单位可以为:%
3. 简洁写法:
padding:value;四个方向的内边距
padding:v1 v2; v1上下 v2左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
4. 特殊处理:
对行内元素和行内块元素设置内边距(上下)时,
只会影响自己,并不会影响到其他元素;
命令显示图:
网页示例图:
2. box-sizing
作用:
重新指定元素框模型的计算模式
元素边框内占地区域=左右边框+左右内边距
+width
1. content-box:
默认值,采用默认计算模式即内边距以及边框会 累加到元素的尺寸中。
2. border-Box:
元素的尺寸 会包含边框和内边距 。
3. 背景属性
1. 背景颜色,背景图像
2. 背景颜色:
属性: background-color
取值: 任意合法颜色 或 transparent
注意: 背景颜色会填充到元素的内容区域、内边距区域以及边框区域
3. 背景图像:
作用:以图像作为元素的背景
属性: background-image
取值:url(背景图像路径)
4. 背景重复:
属性: background-repeat
取值:
1. repeat
默认值,水平垂直方向都平铺
2. repeat-x
仅在水平方向平铺
3. repeat-y
仅在垂直方向平铺
4. no-repeat
不平铺
5. 背景图片尺寸:
属性:background-size
取值:
1. value1 value2
制定背景图像的宽度和高度,px为单位
2. value1% value2%
采用当前元素的宽和高的百分比作为背景图像大小
3. cover
覆盖
将背景图等比放大,知道背景图完全覆盖到元素的所有区域为止
4. contain
包含
将背景图等比放大,直到背景图像的下边或右边有一个边缘碰到元素为止
6. 背景图片固定:
属性: background-attachment
取值:
1. scroll
滚动,默认值,背景图会随着文档而滚动
2. fixed
固定,背景图不会随着页面文档而发生滚动,一直保持在可视化区域中的
固定位置处
7. 背景图片定位:
作用:改变背景图像在元素中的默认位置
属性:background-position
取值:
1. x y
x:背景图水平偏移距离,取值为正,
向右偏移,取值为负,向左偏移
2. x% y%
0% 0%:背景图在元素左上角
100% 100% : 背景图在元素右下角
50% 50%: 背景图在元素的中间
3. 关键字
x: left / center / right
y : top / center / bottom
background-position:center;/*水平和垂直都在中间位置处*/
background-position:left top;/*背景图在左上方 */
background-position:top right;/*背景图在右上方*/
命令显示图:
网页示例图:
8. CSS Sprites:( 雪碧图,精灵图)
作用:
将一些小的的背景图,合并到大的背景当中去,
以便实现减少服务器端的请求次数
步骤:
1. 根据要看的图像大小,创建一个元素
2. 将"雪碧图"作为元素的背景图,再通过背景
图像位置实线位置偏移,将用户要看的图像,
显示在元素中。
**在ps中的快捷键:**
Ctrl + ‘+’:放大图像
Ctrl + ‘-’:缩小图像
Ctrl + ‘D’:取消选区(虚线框)
9. 背景属性:
属性: background
取值: color url() repeat attachment
position;
注意: 如果不设置其中的某个值,将采用默认值。