关于 CSS 的几点小技巧

标签：想说几点小技巧

---

1. 关于 div 居中

####有好几种方法可以居中:
<1> margin:0 auto;

这个是我最经常用的方法，在 div 的样式里面设置

margin:0 auto;

使得 div 左右相对父元素的距离自适应，从而使得 div 居中。

<2> text-align:center;

这一个

text-align:center;

主要应用于内层的 div ,即当有一个 div 里面包着另一个小的 div 的时候，我们可以在父级 div 的样式上加上这一句

text-align:center;

即子元素会在父元素中居中。当应用于 body 下的一个 div 时，此时需要在 body 的样式中添加

text-align:center;

但这两种情况都需要把 div 的 display 设置为 inline ,因为 text-align 是将父级元素的内容居中。

<3> position，top，left

这一种是定位居中，具体根据要根据你的整一个网页来设置它们的值。

2.关于 position

####我们经常会用到定位，很多人会对它很疑惑、觉得很乱，所以我想说一下定位：
position 属性有四个值，分别是 static 、absolute 、relative 和 fixed 。

<1> static

一般如果你自己没设置 position 的话， position 的值是被默认为 static 的。static 并没有定位，元素会出现在正常流中。

<2> absolute

absolute 是绝对定位，如果 div.absolute 设置了

position:absolute;

则该 div 会脱离文档流，而浮动在上面，而其余下的div等各种元素会往前移动覆盖掉原 div.absolute 在文档流的位置，然后对该 div.absolute 用

top：10px; 
left:20px;

进行定位定位时，这个 div.absolute 会一层层地往上级元素寻找上级元素的 css 中是否存在

position:absolut;

如果存在,则 div.absolute 就相对该上级元素下移 10px 、右移 20px ，如果没找到，那么就是相对 body 下移 10px 、右移 20px。

<3> relative

relative 是相对定位，相对它在原文档流中的位置进行移动，但是有一点，它原来文档流的位置不变，不会被其他元素覆盖掉。

<4> fixed

fixed 是固定定位，它是相对于浏览器窗口来定位的，我们应用它最多的是在网页的小广告上。

3. li 的横排

<1> display:inline-block;/display:inline;

这一种方法可以对 li 的横排在 ul 中进行更为简单的居中处理

<2> float:left;/float:right;

这一种对向左横排和向右横排来讲更加容易达到。

4. 背景图片垂直水平居中

在 css3 中有一个 background-position 的属性，要对背景图居中时，可以设置为

background-position:center center;

5. 对一般网页来说 css 有：

*{
    margin: 0px;
    padding: 0px;
}
html,body{
    width: 100%;
    height：100%；
}

6. button 的样式

button 会有一个默认的样式，可以用下面这一行代码去掉它的默认样式：

border: none;

Author：@EyesiM
本文有出错的，随时欢迎纠正喔，大家一起进步O(∩_∩)O