CSS小知识

1.行高无单位

　　line-height：2  此种写法表示行高为文字大小的两倍，即文字大小为16px,行高则为32px

2.文字风格

　　font-style：italic/oblique/normal

　　共有三种属性值，italic：斜体字，oblique：倾斜的文字，normal：正常

　　italic和oblique在视觉上效果一样

3.首行缩进（text-indent）

　　1.可以取负值

　　2.只对第一行起作用　　

4.文字间距

　　letter-spacing:控制字间距

　　word-spacing：控制英文单词间距

5.设置小型大写字母

　　font-variant:small-caps

6.CSS列表属性

　　list-style-type：disc（实心圆）/circle(空圆)/square(方块)/none

　　注意：可以使用图片

　　list-style-image：url（图片路径）

7.设置固定的背景图像(background-attachment)

　　属性值有：scroll  默认值。背景图像会随着页面其余部分的滚动而移动。

　　　　　　　fixed 当页面的其余部分滚动时，背景图像不会移动。

　　　　　　　inherit 规定应该从父元素继承 background-attachment 属性的设置。

8.float:none和clear:both的区别

　　float:none是指当前元素无浮动，而clear:both是指清除浮动元素对当前元素的影响

　　clear的属性值如下

　　　　none : 　允许两边都可以有浮动对象
　　　　both : 　不允许有浮动对象
　　　　left : 　不允许左边有浮动对象
　　　　right : 　不允许右边有浮动对象

9.内联元素

　　1.内联元素的margin和padding不影响元素的line-height

　　2.内联元素的margin-left和margin可以正常使用，但是margin-top和margin-bottom不能正常使用

10.盒模型

　　1.margin和padding都可以写负值

11.元素设置float相当于给元素添加了display:block属性

12.基线对齐

　　vertical-align对块元素是不起作用的

13.padding-top , padding-bottom , margin-top , margin-bottom百分比问题

　　当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

转载于:https://www.cnblogs.com/suihang/p/11171470.html