学习笔记1

CSS背景定位

background-position 属性：控制图片的位置。

格式：

background-position ：水平方向(left center right)，垂直方向(top center bottom);

具体取值：

background-position:100px 100px; (可负数 px一定要写)

background-position:center top;(图片居中显示重要内容 浏览器没有横拉)

背景属性缩写格式:

background:背景颜色 背景图片 平铺方式 关联方式 定位方式;   background属性里面任何一个属性都可以被省略

 平铺方式：repeat，no-repeat

关联方式：accachment; 默认scroll 随着滚动条而滚动，fixed 不会随的滚动条滚动而滚动。

背景图片和插入图片的区别：

1.背景图片只是一个装饰 并不会占用位置，而插入图片会。

2.背景图片有定位属性(position) 插入图片没有比较不好控制图片的位置。

3.插入图片的语义比背景图片强。

CSS精灵图

一重图像合成技术，减少请求的次数，降压服务器压力，配合背景图片和背景定位来使用。

border边框

环绕在标签宽度和高度的线条

格式：连写 border:变宽高度 边框样式 边框颜色，样式不能省略 省略之后看不到边框 颜色默认黑色 

分别设置四条边的边框 border-left,top,right,bottom

快捷键：bd+  border:1px solid #000;

连写：border-color 上 右 下 左

            border-width 上 右 下 左

    border-style   上 右 下 左

---

用边框做一个倒三角

width:0px;

height:0px;

border-color:red green blue orange;

border-style:solid;

border-width:20px;

边框内边距：padding

边框与内容之间的距离

非连写

padding-top,padding-right,padding-bottom,padding-left

连写

padding: 上 右 下 左;

设置内边框后宽度高度会发生变化

给标签设置内边距之后，内边距也会有背景颜色。

外边距：margin

标签和标签的距离

非连写

margin-top,margin-right,margin-bottom,margin-left

连写

margin: 上 右 下 左;

外边距的部分没有背景颜色

margin在默认布局垂直方向上 外边距不会叠加 会出现合并 谁的外边距大就应用谁的外边距。