> For the complete documentation index, see [llms.txt](https://yangsx95.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yangsx95.gitbook.io/notes/front-end/css.md).
# CSS
## background
### background-color
背景颜色属性
#### 表示颜色的三种方法
1. `background-color:red;`
2. `background-color: rgb(255,0,0);`
3. 十六进制表示法`background-color: #ff0000;` 2的8次方为256 刚好可以使用16进制代替RGB表示颜色
4. 十六进制表示法，简写：
```
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
```
### background-image
背景图片设置， `background-image:url(images/wuyifan.jpg);`
url：uniform resouces locator 统一资源定位
CSS除了浮动，还有一个对应的属性定位。
CSS有三种定位，这三种定位再页面中各有用途，也可以配合使用。
## 定位
### 相对定位
`position:relative`
相对对位，是盒子相对于原始位置的位置改变。
我定义了三个不浮动的盒子，每个盒子的大小为 `80px x 80px`，我将第二个盒子进行相对定位，定位代码如下：
```html
相对定位
```
效果：
我们看到，
1. 我们设置的明明是 `top: 40px; left: 40px;` 但是盒子并没有向左上方移动，恰恰相反，盒子却朝右上角移动。这也是一个很令人无语的现象，暂时体会不到设计者的心意。所以，我们要注意： **`top` 是向下移动， `bottom` 向上移动， `left` 向左移动， `right` 向右移动**。
2. 我们可以看到第二个盒子的没有脱离文档流（他原来的位置仍然占一行），所以 **相对定位不会使元素脱离文档流**
3. 因为相对定位没有脱离文档流，所以，他 **移动后的会留下一片空白**。
4. 给box2设置margin发现， **margin仍然作用在box2原来的位置上**，这是因为 **相对布局并不是真正的让元素的位置发生了改变，只是浏览器的渲染机制将盒子绘制到别的位置了而已。**
### 作用
因为相对定位会留下"坑"，所以，相对定位和其他定位相比，用处很小。主要用于微调元素和做绝对定位的参考。
下面来说一下绝对定位：
### 绝对定位
`position:absolute`
相对定位是相对于原来的位置的改变，绝对定位则是将浏览器左上角或页面左上角作为原点，进行位置的变换。
#### 绝对定位会脱离标准流
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
```html
相对定位
```
```
只能看到两个盒子，中间的盒子脱离了文档流，第三个盒子代替了第二个盒子的位置。第二个盒子浮动在第三个盒子上方。所以我们只能看到两个盒子。
```
### 绝对定位的参考点
绝对定位有四个属性，top、bottom、left、right，用来准确定位。这四个属性各有各的用途。top属性和bottom属性虽然都是用来定位的，但是二者之间仍然有一定的区别。
1. top
蓝色区域为页面。这里不再用代码演示。
2. bottom
如果使用bottom的话，则定位的参考点，就会变为 **浏览器首屏窗口尺寸，对应页面的左下角**
有下面者一段代码，box0盒子距离浏览器底边的距离为100px，距离左边距离为150px
```css
.box0{
width: 50px;
height: 50px;
background-color: #000;
position: absolute;
bottom: 100px;
left: 150px;
}
```
效果：
当我缩放浏览器后，发现：
3. left和right属性
left和right属性的定位，要依据参考点，
如果是top、left 则定位点为页面的左上角
而如果是top、right 则定位点为页面的右上角
bottom、left 定位点为浏览器首屏的左下角
bottom、right 定位点为浏览器首屏的右下角
4. 当上层元素也是定位的元素，那么，就会以上层元素作为参考点。上层元素不仅仅指父元素。
> 注意，上层元素的任何定位方式，都可以作为参考点
5. 绝对定位会无视父容器的padding
6. 绝对定位后，盒子如何居中？
因为绝对定位后，元素脱离了文档流，所有 `margin:0 auto` 就会失效，我们可以使用绝对定位的方式，使元素居中
```css
position: absolute;
left: 50%;
top: 0;
margin-left: width/2; /*宽度的一半*/
```
### 固定定位
`position:fixed`
固定定位是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置始终不变。使用和其他盒子类似，这里不再演示
> IE6不兼容
### 清除定位
static 即标准流的定位方式。
```css
position: static;
```
### z-index
设置页面的高度，高度高的，压住高度低的。
只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
z-index值没有单位，就是一个正整数。默认的z-index值是0。
如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
如果父元素的高度大，那么他的子元素的高度也大。从父现象。
```css
z-index: 988;
```
## margin
margin代表外边距，是CSS常用的属性之一，和Android中的外边距有类似的效果。
### margin塌陷现象
在CSS标准流中除了 [\[CSS\]CSS浮动float详解（一）：标准文档流](http://blog.csdn.net/xf616510229/article/details/53670746) 说的那些奇葩的规则外，还有一个mdzz的规则，(可能是宝宝太嫩，体会不到这样设计的目的)，那就是margin塌陷现象。
**标准文档流中，竖直方向的margin不叠加，以较大的为准。**
什么意思呢？
```html
test
```
如上代码，我们在浏览器上绘制两个块级元素，设置一个下边距为100px，另一个上边距为200px，两个元素之间的间距应该为300px，但是神奇的事情出现了：
从上图我们可以看出，这两个元素之间的间距只有200px。
这就是所谓的margin塌陷现象！！（这不是没事找事儿吗）
**脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！**
### 盒子居中
margin中有两个属性，
```
1margin-left: auto; /*左边距自定设置*/
margin-right: auto; /*右边距自定设置*/
```
`margin-left:auto` 将左边距自动设定，默认会占用左侧所有的位置为边距：
而 同时设置 `1margin-left: auto;` 与 `margin-right: auto;` 会使元素居中，这是因为空白会被两侧平均分配。
可以简写为 `margin:0 auto`
### magin的奇葩现象
**margin元素的初衷是用来表示兄弟元素之间的边距，而不是用来表示父子元素之间的边距，padding通常用来表示父子之间的边距。**
有如下代码：
```html
test
```
效果如下：
我们看到，我们设置内部的div `margin-top:20px`，希望div2距离div1有20px的间隔，结果div1也跟着margin了。
我们给div1加一个边框，然后又正常了！
之所以出现这个状况主要是因为margin在改变间距时，实际上改变的是整个行，使用 `margin-top:20px;` 是将整个行侠义20px，所以就造成了这个效果，但是为什么加上边框后就可以了？谁设计的！出来，宝宝保证不打死你！
#### 脱离文档流后
脱离文档流后，这种坑爹的效果就消失了，和margin的塌陷现象相同。
### 建议
所以，我们在表示父子的间距时，要尽量使用父元素的padding来表示子元素的外边距。
能不用margin就不用margin ，属性太坑！