体验css03

《字词间距和文本缩进》

Letter-spacing：表示字间距。单位可以是px也可以是em；

Word-spacing：词间距；注释：实际上这个东西设置的就是空格的大小。

Text-indent：表示文本缩进； 一般的值是 2em表示缩进两个字。

总结：对于一段文本来讲如果文本内没有空格那么词间距是不会生效的。但是字间距在任何时候都会生效。

【CSS继承性和层叠性】

Css的键值对属性分为两大类文字控制属性和区块控制属性，然后由于所有的文字控制属性都是控制的内容，所以说所有文字控制属性都具备继承能力，简单的说就是你给父级写所有的子集也能生效。 但是由于所有的区块控制属性都是控制的自身所以区块控制属性不会继承。

《层叠性》

简单的说就是CSS先写的属性会被后写的属性覆盖掉，那么这个性质就叫CSS的层叠性。利用这个性质将来可以对项目中的某些CSS模板进行重写而不去修改它内部的代码。

【超链接的伪类】

简介：伪类表示一种状态，或者一种功能，它并不是默认的普通样式，它的样式必须在被触发以后才会生效。

a:hover  表示当鼠标移上超链接以后的样式；

在css中所有的伪类都是以冒号开头的。

a:visited 表示访问过的超链接样式  （现在这个伪类企业站几乎不用。你写个人站的时候尽量不要加除非遇到特殊需求）

【复合选择器的权重】

简介：复合选择器就是由多个基础选择器组成的复杂选择。在实际制作网站的过程当中由于网站比较复杂会产生大量的复合选择器，有的复合选择器会比较长。所以会产生复杂的权重问题。一定要注意复合选择器的权重和css的层叠性质无关。

注意事项：当选择器的权重相同的时候才会产生层叠性的关系后写的会覆盖先写的，但是当选择器的权重不同的时候肯定是权重更高的样式条会生效。

《复合选择器权重计算方法》

第一：你可以通过火狐直接审查元素来看 右侧css样式中最上面的就是权重最高的。

第二：自己计算的方法

互联网上的一个权重计算公式；

一个标签选择器 = 1克；

一个类选择器 = 1斤；

一个id选择器 = 1吨；

【溢出隐藏】

简介：这个属性非常重要，将来会经常用来调试css的兼容或者分区的一些高度计算错误都可以靠它来解决。

基本结构： overflow：hidden； 表示超出的尺寸会被修剪掉（隐藏）

它还有另外的一个值是auto；作用是可以让超出的地方自动添加一个滚动条。

注意事项：当你希望实现真正的溢出隐藏效果的时候千万切记一定要事先指定好固定的宽高。否则是不生效的。

【外边距塌陷】

简介：外边距确实有这样的一个现象就叫做外边距塌陷，发生情况当两个盒子的垂直外边距紧挨在一起的时候就会自动发生合并，合并的结果以最大的外边距为主不是相加。我们可以认为这是浏览器中存在的一个bug，而且只有垂直外边距才会发生，水平外间距不会发生此问题。

《解决方法》

外边距塌陷有两种情况一个是垂直排列的盒子上下外边距发生合并，这种情况不用解决，不会造成麻烦；

情况2：嵌套的盒子内部的盒子添加margin-top的时候会将外部的盒子带下来，产生外边距合并。 这种情况较多发生 解决方法  给外边的盒子添加overflow：hidden属性即可；（将内部的小盒子浮动有时候也可以解决）

【CSS属性整理】

文字控制类属性

属性名称

作用

备注

color

文本颜色

font-size

字号

Font-family

字体

Font-weight

文本加粗

值bold

Text-align

文本对齐方式

Text-decoration

文本装饰

值：underline，overline，line-through,下上中

Font-style

文本风格

Italic文本倾斜

Line-height***

行高

值跟容器一样大可以垂直居中

Text-indent

文本缩进

值2em

Letter-spacing

字间距

Word-spacing

词间距

控制空格的大小

区块控制属性

属性

作用

备注

width

宽

height

高

background

背景色

值：颜色 图片 平铺方式 水平位置 垂直位置 图片模式；

平铺方式：repeat，no-repeat,repeat-x,repeat-y

图片模式：fixed；

display

显示模式

Inline，block，inline-block

float

浮动对齐方式

只有左右,浮动的标签显示模式会自动转为行内块

border

边框

值：粗细 固态 颜色；

margin

外边距

有外边距塌陷的bug；

padding

内边距

Padding没有塌陷的毛病；

以上这3个属性都可以通过 top，left，right，bottom来单独设置某一个方向的距离

overflow

溢出隐藏

值：hidden，auto；

List-style

列表样式

值：none；