css易混笔记

1.利用方位名词top bottom 来改变背景图片位置

background-position: left top; 默认的是左上角
background-position: bottom right; 方位名词没有顺序，谁写在前面都可以
background-position: center center;  第一个是水平第二个是垂直
background-position: left;如果方位名词只写一个，另一个默认为center

2.精确单位

第一值一定是x坐标 第二值一定是y坐标

3.background-attachment:scroll | fixed

参数：scroll：背景图片是随对象内容滚动
      fixed：背景图像固定

4.背景简写

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

5.背景半透明

background-color:rgba(0,0,0,0.5);
最后一个参数是alpha透明度，取值范围是0-1之间
背景透明是指盒子背景半透明，盒子里面的内容不受影响
可以给文字和边框透明 都用rgba的格式来写

6.背景图片缩放，大小设置

background-size:100px; 尽量改变一个值，可以写百分数
background-size: cover; 等比例缩放，填满容器，剪裁超出部分。
background-size: contain; 图片进行等比例缩放，如果图片高度或宽度
有一个和盒子一样大，就不在缩放了。

7.多背景

设置多背景，每个背景图（url()）用逗号隔开。为了避免背景色将背景图
盖上，背景色一般定义在最后一组。
background:url() no-repeat scroll,url() no-repeat scroll pink;

8.凹凸文字效果

text-shadow:水平距离 垂直距离 模糊距离 阴影颜色；
凸起文字：往上，往左是白色，往下往右是黑色
text-shadow:1px 1px 1px #000,-1px -1px 1px #fff;
凹下文字：与凸起相反，（在网页中坐标往上是负，往左是负）
text-shadow:1px 1px 1px #fff,-1px -1px 1px #000;

9.css三大特性

层叠性：就近原则
继承性：子元素继承父元素的样式（text-,font-,line-,color属性）
继承后的权重为（0，0，0，0）

10.盒子模型

（1）盒子边框：border: border-width || border-style || border-color
注意设置的时候要设置边框样式通常用 solid 为单实线(默认值为none 没有边框)
border:0; 没有边框
边框综合设置：border:四边宽度 四边样式 四边颜色；
border-collapse:collapse; 表示合并边框
（2）圆角边框
border-radius:左上角 右上角 右下角 左下角；
boeder-radius: 50%; 圆
border-radius:100px 0px; 两个参数是对角线的方式

11.内边距

内容距离盒子的距离
padding: 20px; 上下左右都是
padding;10px 20px 30px; 上10 左右 20 下 30
padding: 10px 30px; 上下10px 左右30px
四个值：顺时针 上右下左