css的使用

最近发现css遗忘了很多，原因在于平时很少用到一些样式，现记录一些平时工作中使用频率比较少的属性以备查看。因为本身就知道这些属性，只不过用的少而已，所以不会太详细的记录，只是记录大概的意思，一看就能了解。

1.文本属性

text-indent

首行文本缩进，针对于块级元素，text-indent 可以使用所有长度单位，包括百分比值。百分比是相对于父级元素设置的。

text-align：justify

文本对齐属性值中有个justify是两端对齐，之前用的比较多的是center，right，left较多。

word-spacing

默认值normal相当于设置为0，

letter-spacing 

字母间隔，与word-spacing相比字母间隔修改的是字符或字母之间的间隔。

text-transform

处理文本的大小写，默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。capitalize 只对每个单词的首字母大写。

text-decoration

underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

2.定位与浮动

css三种定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有的框都在普通流中定位，而普通流中的元素位置由元素在html中的位置决定。

2.1定位的position属性

static

元素框正常生成，块级元素生成一个矩形框，作为文档流的一部份；行内元素则创建一个或则多个行框置于其父元素中。

relative

绝对定位：元素偏移某个距离，而这个偏移是相对于元素本身，且原占有的空间仍在。

在这里突然想起来visibility和display的区别，两者都会隐藏元素，但是有区别，visibility：hidden仍然占用以前的空间，而display：none不在文档流中。

absolute

相对定位：元素脱离了文档流，可以形成层叠的效果（z-index属性值越大该层越在上），相对于父级元素的定位，如果父级没有定位则再往上找定位的元素直至body元素。所以一般使用absolute定位时会使用relative来配合使用。

fixed

固定定位：这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

浮动元素之后可以使用top,left,right,bottom来定义偏移的距离

2.2浮动float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动也会脱离文档流，所以文档流中的元素表现的像浮动元素不存在一样

使用浮动之后一定要记得在后面清理浮动，可以给浮动元素的父元素设置高度，后续元素使用clear属性清除浮动

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有