css2 理解

1. CSS 指层叠样式表 (Cascading Style Sheets)

理解：指的是一个元素的一个样式可能由多处定义，例如元素的颜色可能由多个样式表定义到，那么在选用这个样式的时候就要依据样式优先级来判断，大体参照就近原则选用样式，例如内联样式>内部样式>外部样式>浏览器默认样式。如果该样式都在内部或者外部样式，又或者内部和外部定义该元素的精确度不同，如果选用样式则要参考样式优先级来考虑，在以后回说道。

2. id选择器

理解:id可以看做元素的身份证，必须是唯一的。如果设置多个元素具有相同的id在浏览器中会报错，给这些id选择样式或者操作具有不可控性，所以要避免id重复，必要的时候可以加入id的前缀来防止重复。一个id可以定位一个元素。

3. class 选择器

理解：一个类表面该类下至少有一个元素，所以使用类表达式获取的元素是大于等于1个的，给类选择器赋值样式，则给拥有该类的所有元素均赋予了样式。

4. background-color

理解：可以理解为给这些元素（包含块级元素和内联元素）下增加了一层底片，元素在底片之上，底片的透明度为100%，元素的颜色覆盖背景的颜色。

5. background-image

理解：给元素上一层背景图片，可以给块级和内联元素上背景，背景覆盖元素覆盖的范围，如块级元素默认独占一行，则背景也独占一行，内联元素的背景的宽度和元素占有的宽度一致。默认背景图片是重复的，但如果元素宽度不够，则只显示部分背景图片。默认背景图片从元素占有空间的0、0位置渲染。

6. background-repeat

理解：背景平铺，可以设置该背景图片如何占满元素空间，如果是横向平铺，则但背景宽度不够的时候，在X轴方向重复渲染背景，如果是纵向平铺，则在Y轴高度不够的时候，背景在Y轴方向重复直至占满元素占有的空间。如果设置不平铺，则背景只占有元素中背景图片占有的空间，如果背景图片的空间大于元素的空间，则截取背景，默认从背景的0、0坐标来截取背景图片。

7. background-position

理解：背景的位置，如果是left top标识背景的left top的像素点和元素的left top的像素点排放一致，以此类推，可以设置为left bottom, right top, right bottom。当然也可以设置为数值，比如设置为50px 100px表示背景的左上角的元素点和元素占据空间的50 100的像素点重合，简单理解就是背景向右移动的50个像素，向下移动了100个像素。当然也可以设置为负值，例如设置为-50px -100px，则依旧可以理解将背景的0、0的位置与元素的-50px -100px像素放在一个位置，由于元素无-50px，则可以理解为背景被放到元素的左右为0px的位置，还继续向左放，可以理解为将背景向左移动了50个像素，-100px表示将背景向上移动了100个像素。

8. background-attachment

理解：背景粘连，表示背景是否是随着元素的滚动条的滚动而发生位置更改，可以理解为如果是设置为fixed则表示，表示一旦设置了背景，则背景和元素就被绑定在一起了，操作滚动条后元素看不见了，则元素占据的背景也看不见了。而scroll则表示将背景放置在可视窗口的某个位置，不和元素强绑定，就相当于背景在桌子上的某个位置，而调整滚动条相当于调整了桌布的位置，元素相对于背景发生了位移。

9. color

理解：文本颜色，只对文本有效，颜色会显示在背景颜色和背景图片之上。

10. text-align

理解：文本的对齐方式，其实该对齐方式不仅仅对文本有效，也对内联元素如input,img同样起作用，表示将块状元素下的直接内联元素对齐方式。对其下的块状元素无效，对其下的块状元素内的子元素（无论是块状元素还是内联元素）均无效。

11. text-decoration

理解：文字修饰，仅对文字有效，对图片无效。如果设置在块状元素上则表示对块状元素下的直接文本均设置此种修饰方式，设置在span等标签上则表示仅对该span内的文本起到修饰。

12. text-transform

理解：文本转换，可以设置为转换为大写和小写等，仅对英文有效

13. text-indent

理解：文本缩进，仅仅对文本有效。当设置为正值的时候，表示文本向右移动了位置，但其原先的位置依旧占据。设置为负值表示文本向左移动了位置。无论是使用正值还是负值均可以将文本移动到其外层容器之外。

14. direction

理解：文字的方向，ltr(left to right)或rtl，当设置为rtl的时候注意最后的标点符号被放置在最左边了。

15. line-height

理解：行高，表示文本一行的高度。文本在其占满行高。如果只有一行文本，且将文本的行高和容器的高度设置为相同的值，则文本垂直居中。

16. vertical-align

理解：文本垂直对齐方式，貌似不起作用。后续继续研究。

17. font-family

理解：字体，仅对文本有效，可以连续设置多个字体，如果浏览器不支持一种字体可以使用下一种字体。可以设置一个英文的字体和一个中文的字体，如下所示：font-family:"Times New Roman", Times, serif;

18. font-size

理解：字体大小，可以设置为像素如20px，也可以设置为em ，表示相当于浏览器默认字体的比值，如加入浏览器的默认字体大小是16px，则1.5em表示1.5*16像素的大小。百比和em原理类似。

19. a

链接的样式，链接有四个伪样式，顺序设置不能乱，可以使用25. 

L(link)OV(visited)E  and  H(hover)A(active)TE来记忆

20. list-style-type

列表的样式，设置在ul元素上,表示对其下的所有的直接li元素设置列表样式,对子元素下li下的ul里面的li的样式无效。

22. list-style-image

列表的图片样式，设置在ul上，由于兼容性问题，可以通过同时设置列表的图片样式和背景图片来解决。

23. border-collapse

表格中table,tr,td默认没有边框，表格中tr,td,table中的边框均是空心边框，可以通过设置border-collapse:collpase将空心边框转换为实心的边框。

24. 表格的width 100%,表示表格占满其父容器的所有可用的空间

25. 表格中th设置宽度比例

示th占据table的宽度的比例，如果所有的值加起来不等于100%，则会计算各个th占据所有th的比例之和重新计算宽度.

26. 表格中td可以设置text-align:right;或者vertical-align:bottom;来确定文字的对齐方式

27. 盒子模型（着重讲解）

标准盒子模型：box-sizing: content-box;

标准盒模型的width组成：content（不包含 padding 和 border）比如：你给一个div的宽度设为200px，那这个div实际的宽度其实是200px再加上padding和border的值（和是大于等于200px的）。

ie盒子模型:border-box

width组成：content + 2 * padding + 2 * border

比如：你给一个div的宽度设为200px，那这个div内容的宽度其实只有200px减去 padding 和 border 的值。它实际宽度是小于或等于200px的。

所有盒子模型中总元素的宽高如下所示

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

28. outline

理解：外边线，外边线不占据元素的总宽高，如果元素的宽高和容器的宽高一致，则outline可能会跑到元素之外去

注意：

子元素设置宽高百分比，是相对于父元素可用空间来说的。例如子元素设置width:100%，heigh:100%;表示子元素占用父元素可用空间的100%，例如父元素宽200px，高100px,且父元素设置了padding:10px 20px 30px 40px,则表示该子元素宽度只能占据200- 20 - 40 = 160px,高只能占据 100 - 10 - 20 = 70px;

30. 文本溢出情况

例如我一个div设置宽度为200px，当该div中有一行很长的文本，则默认该文本会溢出div容器，在容器外显示，可以使用over-flow来处理溢出。

31. margin

理解:外边距,如两个连续的div，当下一个div使用margin-top后，如设置10px，则会向下移动10px，这样两个div就有了10个像素的间距，同理可以向左右，上下移动。但移动后原来占据的空间依旧占据。当下个元素设置margin-top为负值的时候，例如-10px，则下一个div向上移动10个像素，则会从下向上覆盖上一个div中10个像素。如果上一个div设置margin-bottom:20px,下一个div设置margin-top为50px,则发生了margin合并，两个元素中的margin值为50px,而非70px,占据的总高度为div1的高度+70px+div2的高度。加入该div中有子div,在子div中设置margin-top是相对于父div的上边框而言的，向下移动了若干个像素。但父div占据的总高度不变。内联元素如设置margin-top和margin-bottom无效，但设置margin-left和margin-right有效。如果某个div占据中间一块，同时设置了margin-left和margin-right则表示该div向左移动后再向右移动，如果包容该div的空间不足，则如何处理，没有试验，后续再试验。

32. padding

理解：内边距,div中设置padding会使得div中内容占据的总高度变高，因为div如果设置背景色，则背景色只能设置在该div的总内容区。div设置了padding表示其内的元素相对于该div的基线发生移动,如如果设置padding-top则是相对于上方的div的boder开始移动，同理可以设置padding-bottom,padding-right;padding-left，均是相对于div的四个border发生移动。其移动后原有空间不能输入内容。该div内部的div也可以设置padding的值，不会扩大父div占据的宽高，但有可能设置后跑到父div之外，显示不了了。

内联元素可以设置padding-left和padding-right;但无法设置padding-top和padding-bottom。padding 设置负值和设置为0的效果相同。

33. 隐藏一个元素

可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

34. 块状元素、内联元素、内联块状元素

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
内联块状元素可以和别的内联元素和内联块状元素在同一行，但兼容了块状元素的属性，可以设置宽高和内外边距

今天就写到这里了，其余的如定位和浮动等放在下一篇文章中讲解