练习HTML和CSS过程中出现的问题

一:label标签报错

问题:
当for的值和name的值相同有报错。

解决:
通过查找资料，发现要与id相同。

总结:
1.label标签不会展示特殊效果，但当用户在 label 元素内点击文本时，就会触发相应的表单控件,以实现点击文字也能选中/取消radio或checkbox。
2.关联方式:
(1)显式关联
通过label标签的for属性与另一个表单控件关联，for的值为要关联元素的id。
(2)隐式关联
隐式关联是直接将表单控件放到label标签内，并且只能包含一个表单元素。

二.:last-child无效

问题:
用css选择器选择最后一个p标签，发现设置的属性无效。

解决:
检查代码发现最后一个p标签后面还有一个span标签，说明p标签并非子集里面的最后一个，想起老师上课时说过这一点。

总结:
1.el:last-child 的匹配规则是：
(1)查找 el 选择器匹配元素的所有同级元素（siblings）。
(2)在同级元素中查找最后一个元素。
(3)检验最后一个元素是否与选择器 el 匹配。

三.图片不显示

问题:
给图片重命名时中间添加了空格，按照输入的带空格的路径运行时，图片无法显示。

解决:
重新输入路径，选择跳出来的路径发现原本有空格的地方都变成了“％20”，对图片重新命名后，图片正常显示。

总结：
命名图片时要避免这样的命名方式，避开空格。

四.display属性
问题:
在练习display: inherit时，用了两个div嵌套，外层div设置为display : block，内层div为display: inherit ,发现看不出效果。

解决:
把外层div设置为display : inline-block ,再多加了一个内层div，两个内层div都设置为display: inherit，于是看出了效果。

总结:
(1)display:inline-block，结合了inline和block的特性于一身。即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。

(2)display:inherit，规定应该从父元素继承 display 属性的值，子div的display属性值继承了父元素的display属性值inline-block。