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