css怎么控制字体的位置?

html-css014

css怎么控制字体的位置?,第1张

控制字体位置可以用padding

margin

text-indent

单位可以是px

em

%

(em是根据你设置的字体大小设定的,假如你设置字体为12px,那么2em就是24px。

%是根据父容器的宽度或高度决定的。

margin-left:automargin-right:auto(左右自动对齐)。position:absolute(绝对定位)

CSS中的position property一共有四种:

postion: static

postion: relative

position: fixed

position: absolute

如果设置div为static postion, div的位置将不受top,right,left,button等变量的影响,而是按照正常的页面布局进行排版。例:

div.static {

        position: static

        border: 3px solid #8AC007

    }

如果设置div为relative position, 其变量的值将会使div的位置相对其正常(default)位置进行移动。例:

div.relative {

        position: relative

        left: 30px

        border: 3px solid #8AC007

    }

如果设置div为fixed position, div将会被固定在窗口的固定位置。也就是说无论你如何上下移动页面, div在屏幕上显示的位置始终不变。

div.fixed {

        position: fixed

        bottom: 0

        right: 0

        width: 300px

        border: 3px solid #8AC007

    }

如果设置div为absolute position, div将会相对于其最近的position ancestor定位。absolute position是可以随页面移动而移动在屏幕上的位置的。

div.absolute {

        position: absolute

        top: 80px

        right: 0

        width: 200px

        height: 100px

        border: 3px solid #8AC007

    }

以上CSS你可以放到自己的网页应用里试一下,区别就很明显了。

参考资料:http://www.w3schools.com/css/css_positioning.asp

利用padding填充,margin边界float去设置对齐的方式,给你一个例子就能看懂啦http://www.w3.org/1999/xhtml"></A> test 左侧栏 右侧栏本页面是我刚做的,在ie6,ie7,firefox,opera下测试均是自动适应满屏。无论是多少分辨率。 一般页面body一定要设margin:0因为浏览器默认是有值给他的。没有设成0就不能100%满屏。 这里用了百分比来设定宽度和高度,是因为每个浏览器的宽度和高度有些差别。如果都设成像素就不能在所有浏览器里都满屏。 leftbar,rightbar里设float:left是为了让层浮动并横向向左排列。 再外面加wrapper是为了更好的控制里面的栏目。如果哪天栏目要是想变窄或者像增高,就只要改这里的宽度和高度就行了,而不必再去动里面的两个层。 当然这里你也可以设成宽度是像素的形式。一般我设1003宽,在1024*768下。高度很少去定义,因为浏览器装插件和没装高度差别比较大。