css中常用方法总结

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进。在设计一个网页的时候，有时候为了让页面的可读性更好，更加美观；就会使用到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。 text-decoration用法 在CSS中，使用 text-decoration属性，可以在文本上方、下方、或中间添加装饰线 text-decoration 取值： ◼ none:无装饰 ◼ underline:下划线 ◼ overline:上划线 ◼ line-through:删除线 默认情况下，文本都是没有装饰线的，但超链接是个例外，它默认就带有下划线。当然，可以把 text-decoration属性的值设置为 none，去掉超链接的下划线，当鼠标悬停后，再添加下划线，来提醒用户当前文本为链接文本。如 a { text-decoration: none; } a:hover { text-decoration: underline; } display显示属性 none:此元素不会被显示 block:此元素显示为块级元素，此元素前后会带有换行 inline:默认。此元素会被显示为内联元素，元素前后没有换行。 inline-block:行内块元素。box-shadow用法 img { width: 100%; /*说明：百分数值是相对于其父元素的 width 计算的*/ opacity: 0.8; /*不透明度0.8*/ }

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

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

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

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