css常用单位

px

pixel像素点,最常用的单位

%

percent百分比,经常用到

em

element,1em等于元素字体的尺寸

rem

rem=root element,rem等于根元素字体的尺寸

vw

viewport width,可视区域宽度的1%

vh

viewport height,可视区域高度的1%

vmin

vw与vh中较小的那一个作为单位

vmax

vw与vh中较大的那一个作为单位

较不常用的单位

cm:centimetre厘米

mm:millimeter毫米

pt:points(12pt=16px)

pc:picas(1pc=12pt)

in:inch(1in=96px)

ch:1ch=”0″的宽度

ex:1ex=当前字体的x-height

Pseudo elements伪元素与Pseudo classes伪类

伪类和伪元素用于css选择器,利用他们使css更灵活。

常见的伪元素

::after

::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content属性描述。

::before

与after相对应,相当于被选中元素的第一个子元素。

::selection

将用户选择的内容作为伪元素。

::first-letter

选中第一个字符作为伪元素。但只能用于块级元素,并且第一个字符前不能有图片或内联表格。

::first-line

选中第一行作为伪元素,只能用于块级元素(行内元素也用不着这个说法…)。


Read more

css定位中top的逻辑

top参考的元素是有定位属性的最近的祖先元素,也就是说:不给某个祖先元素设置position的话,top参考的是整个page。

<view style="top:200px">
  <view style="position:absolute;top:10%">o</view>
</view>
<!--这段代码将会在距离页面顶端10%的地方展示字母'o'-->
<view style="position:absolute;top:200px">
  <view style="position:absolute;top:10%">o</view>
</view>
<!--这段代码将会在距离页面顶端10%+200px的地方展示字母'o'-->