css中常用方法总结

1. CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进。
2. 在设计一个网页的时候，有时候为了让页面的可读性更好，更加美观；就会使用到letter-spacing属性；letter-spacing属性是增加（值为正）或减少（值为负）字符间距；也就是说当应用在英文时，就是增加或减少每个字母之间的间距，在中文文字中应用就是每个文字之间的间距。

例：

div.header h2 {
    letter-spacing: 30px;
    text-indent: 30px;
}

使每个字间距为30px,text-indent使得首字符缩进30px,(常用于居中对齐时，字符会向左移，所以用缩进对齐）。

3.当我们自己做布局时，要去掉浏览器自带的默认布局，此时可用如下代码

*{
    margin: 0px;
    padding: 0px;
}

4.圆形图片的设置
先将图片设置为正方形样式，再将border-radius调为100px(上下两个半圆组成一个圆）

div.header img{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: 10px;
}

5.CSS3中:nth-child伪类的实际用途

• :nth-child(n + 4)选取大于等于4的标签，其中"n"为整数
• :nth-child(-n + 4)选取小于等于4的标签
• :nth-child(3n + 1)自定义选取标签，3n+1表示“隔二取一”
• :last-child表示选取最后一个标签
• :nth-last-child(3)表示选取倒数第几个标签，3表示选取倒数第三个标签
• :nth-last-child(odd)表
• 示选取倒数的奇数标签，odd可为2n-1。
• :nth-last-child(even)表示选取倒数偶数标签，even可为2n。

6. text-decoration用法
   在CSS中，使用 text-decoration属性，可以在文本上方、下方、或中间添加装饰线
   text-decoration 取值：
   ◼ none:无装饰
   ◼ underline:下划线
   ◼ overline:上划线
   ◼ line-through:删除线
   默认情况下，文本都是没有装饰线的，但超链接是个例外，它默认就带有下划线。当然，可以把 text-decoration属性的值设置为 none，去掉超链接的下划线，当鼠标悬停后，再添加下划线，来提醒用户当前文本为链接文本。如

a {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}

7. display显示属性
   none:此元素不会被显示
   block:此元素显示为块级元素，此元素前后会带有换行
   inline:默认。此元素会被显示为内联元素，元素前后没有换行。
   inline-block:行内块元素。
8. box-shadow用法

img {
width: 100%;
/*说明：百分数值是相对于其父元素的 width 计算的*/
opacity: 0.8; /*不透明度0.8*/
}

初始：
图片不透明度0.8(透0.2)，阴影为浅灰色
鼠标移到上方：
图片不透明度为1(恢复正常)，阴影为深灰色

9. position 定位属性
   ◼ absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位，如果都没有，就是相对于body
   绝对定位是相对于已定位的第一个父元素进行定位，若无则相对于body
   • 用绝对定位,可以把一个元素放在页面任何位置，当窗口滚动时元素可能会被
   滚掉
   • 绝对定位使元素的位置与文档流无关，因此不占据空间
   • 绝对定位的元素可能和其他元素重叠

理解：绝对定位相对于第一个已定位(absolute或relative)父元素

10. 关于z-index 属性：指定一个元素的堆叠顺序
    z-index使用前提：元素一定是定位元素
    ◼ z-index 默认值是 0，其值可为正、负值
    ◼ z-index 值大的元素在前面（上面）
    ◼ z-index相当于定义了一个垂直显示区的z轴。如果为正数，则离用户
    更近，为负数则表示离用户更远。
    ◼ 没有指定z–index或者值相等，最后定位的元素将被显示在最前面
    ◼ 在无z-index参与的情况，有position的元素在前面