CSS笔记

1.替换与非替换元素

1

2.在HTML中, inline不能继承block. 简而言之, inline不能嵌套在block中. 而CSS可以通过display 就无所谓了

3.#(ID名)唯一的一个原因, 或者说是与.(类名)的区别

2

4.ID名和类名对大小写的要求

3

5.通过多个属性选择器来筛选

4

6.对input等其他元素也可以使用伪类. :hover :focus :active之类

5

7.伪类的注意点(改变布局

6

8.修改特定语言的样式(少)

7

9.不要选择互斥的伪类选择器

8

10.关于:first-letter和:first-line

9 10

11.伪元素在选择器中的位置

11

12.选择器特殊性(权重)

12

13.内联样式的特殊性(权重)

13

14.!important与特殊性的关系

14

15.0继承性和无继承性

15

16.CSS2.1的层叠规则

16

17.权重顺序

17

18.a标签LVHA的变种

18

19.a标签LVHA的原因

19

20.a标签LVHA串联的写法

20

21.关于像素的计算

21

22.em的值相对于谁的问题

22 23

23.通用字体系列(serif和sans-serif).

24 25

24.font-size的继承

26

25.font属性的注意点

27

26.font属性的另一注意点

28

27.text-indent属性

29

28.text-indent值为百分比

30

29.text-indent的继承性

31

30.text-align的使用

32

31.text-align=justify的问题

33

32.关于line-height

34

33.line-height的举例说明

35

34.line-height缩放因子(数字)

36

35.至少在line-height中, 缩放因子的用处为, 使后代的继承结果始终为缩放因子 * 元素本身(而不是父元素)的font-size. 相当于继承与本身font-size的 比例 . 当带em等单位或者%时, 继承单纯只是计算后的值. 总而言之. 使用缩放比例易于控制(根据元素本身高度得出结果).

36.补充:line-height. 对于行内元素.会撑起同行其他文本的行高.

37.垂直居中的问题

37

38.vertical-align: base-line的问题

38

39.vertical-align: sub | super的问题

39

40.vertical-align: bottom的问题

40

和baseline的区别是. bottom为行内框底部与行框底部. 而baseline是基线(类似五线谱, 通常比基线要高), text-bottom是文字底部.

41.vertical-align与行高

41

42.word(letter)-spacing和text-align:justify的问题

42

43.text-decoration多种样式设置的问题

43

44.text-decoration !无法继承!, 但确实会为子元素增加装饰. 按照标准来, 因为无法继承所以为子元素添加text-decoration:none也是无济于事的. 而某些浏览器可能不会遵守标准.

44

45.可以选择覆盖来视觉上削弱这种影响. 但感觉效果其实不怎么样.

45

46.word-space属性:对空白字符的处理

46

47.关于边框不设置颜色时的情景.以及背景色与边框内边距.

47

48.水平格式化的七大属性:border,padding,margin- left,right以及width. 关于值设置为auto的问题

48

49.水平格式化的一个问题.

49

50.margin:0 auto 与 text-align:center

50

51.水平格式化多个auto的问题

51

52.子元素7个水平属性的总和不能大于父元素的width

52

53.当子元素7个水平属性的总和超过了父元素的width

53

54.左外边距为负的问题

54

55.替换元素width为auto的情况

55

56.正常流(文档流)块级元素margin-top(bottom)为auto

56

57.垂直属性 margin-top(bottom)会重叠

57

58.垂直属性 margin-top(bottom)在父元素设置border属性后, margin属性会被包括在border内(与57.的联系)

58

59.外边距为负值怎么合并的情况

59

60.外边距为负值, margin-bottom为负会产生奇怪的现象.后面的元素被上拉.

60

61.负外边距的实例

61

行内:

62.em框

62

63.内容区

63

64.行间距

64

65.行内框

65

66.行框

66

67.注意点

67

68.一行各部分的高度

68

69.行内的背景色由于内边距而过大

69

70.行内替换元素的line-height(与vertical-align)

70

71.替换元素会增加行框的高度, 但不影响line-height值

71

72.对替换元素设置负外边距可以?

72

73.图再次说明替换元素的外边距到内容框是一个整体

73

74.替换元素与基线对齐的情况

74 74-1 74-2

75.display不会改变元素的本质.

75

76.display: run-in

76

77.display: run-in的注意点

77

78.display:run-in的注意点

78

79.margin的百分比相对于父元素的width

79

80.margin百分比相对于父元素的width的一些问题

80

81.对行内非替换元素使用margin-top(bottom)

81

82.影响只包含文本的行的行间距的属性

82

83.任何元素都可以运用背景图片

83

84.背景图片和背景色

84

85.background-position百分比的情形

85

86.background-attachment: fixed的一个现象.  (exp:https://meyerweb.com/eric/css/edge/complexspiral/glassy.html)

86

87.float以后对元素的影响.

87

88.! float的规则 !

89.浮动元素的外边距为负

89

90.浮动元素与内容相重叠

90

91.应用clear属性的元素的外边距.

91

92.应用clear属性的元素的外边距的实例

92

93.要确定的为浮动元素与应用clear的元素指定距离, 可以为浮动元素添加外边距

93

94.应用position属性元素的包含块.

94

95.min(max)-width(height)

95

96.clip属性

96

97.visibility属性

97

98.对一个元素同时使用top, bottom, left, right.

98

99.除bottom外的属性(top, left, right)设置为auto

99

100.非替换元素(定位)的宽度与水平放置

100

101.如果left, right和margin-left(right)以及width的值的和不足包含块的width则改变right来满足. 如果有一个值为auto, 则改变此值来满足.

102.替换元素(定位)的宽度与水平放置与非替换元素大体相同

102

103.z-index属性适用于定位元素

103

104.父元素以及子元素的z-index

104

105.应用position:relative的元素top(left)与bottom(right)的问题

105

106.内部表格元素的外边距无效

106

107.display:***与表格元素的联系

107

108.表格元素行样式在列样式上面

108

109.::before和::after的注意点

109

110.::before和::after在应用某些属性下的效果

110

111.::before(after) attr(属性)

112.input外面的篮框就是轮廓!可以自定义, 他不占用文档流. 可以用来作强调的样式