经过不断的摸索和尝试,我终于对列表元素的大多数CSS属性有了实际的操作心得,这些心得一定要动手操作才会真正明白并运用,所以记录在此作为一个知识文档启发未来的我以少走弯路。
- 总原则是列表这个概念本身所指的部分并不包括列表符号(即列表的list-style-type属性,指列表每一条文字部分前面的数字、文字或图形符号);
- 列表元素的宽度和高度就是列表文字部分的宽度和高度,根据总原则,应不包括列表符号所占的页面宽度和高度;
- 列表的padding是文字部分即列表内容与列表边框的距离,适当加大左边的padding才可以显示列表符号,极端的例子是如果左边的padding即padding-left的值为零则完全遮蔽了列表符号,并让文字内容紧靠边框,这也证明了总原则的正确性;
- margin属性和其他容器元素一样,是列表与相邻元素的距离。
另外关于容器元素水平居中及其内容的垂直居中方法,做到以下几步就可以实现了:
- 容器水平居中:将该容器元素的margin-left和margin-right属性都设置为auto即可;
- 单行内容垂直居中:将该元素的定位height和文字line-height属性设置为同样的值,并辅以将定位overflow设置为hidden即可;