志达IT
做快乐程序员

css设置文字位置(css的定位方式)

css设置文字位置

办法1:运用text-align特点设置字体的方位
text-align特点指定元素文本的水平对齐方式。
语法:
text-align:left|right|center|justify
text-align参数值与说明:
left:左对齐
right:右对齐
center:居中
justify:两头对齐(不推荐运用,通常大部分浏览器不运用)
示例:
p{
text-align:left;/*方位居左*/
text-align:center;/*方位居中*/
text-align:right;/*方位居右*/
}
办法2:运用position特点设置字体方位
position特点规则元素的定位类型。当设置的值为absolute、relative、fixed时,能够运用top、right、bottom、left特点来进行定位。
p{
position:fixed;/*相对于浏览器窗口定位*/
left:100px;/*间隔浏览器左面100px*/
top:200px;/*间隔浏览器上边200px*/css
}
办法3:运用padding、margin特点设置字体方位
margin特点设置一个元素一切外边距的宽度,或许设置各边上外边距的宽度。
padding特点设置元素一切内边距的宽度,或许分别设置各边上内边距的宽度。
行内非替换元素上设置的内边距不会影响行高核算;因而,假如一个元素既有内边距又有背景,从视觉上看或许会延伸到其他行,有或许还会与其他内容堆叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
示例:
p{
margin:100px200px;/*文字间隔上下有100px外边距间隔左右有200外边距*/
padding:100px200px;/*文字间隔上下有100px内边距间隔左右有200内边距*/

css的定位方式

CSS中的定位运用来布局的熟练应用对页面美化有很好的帮助,css有4种定位方式,别离为:静态定位,相对定位,肯定定位,固定定位,定位有不同的参数,例如:left、right、top、bottom、z-index等。
1、静态定位(static)
一般的标签元素不加任何定位特点都归于静态定位,在页面的最底层归于规范流。
2、肯定定位(absolute)
肯定定位的元素从文档流中拖出,运用left、right、top、bottom等特点相对于其最接近的一个最有定位设置的父级元素进行肯定定位,假如元素的父级没有设置定位特点,则根据body元素左上角作为参考进行定位。肯定定位元素可层叠,层叠次序可经过z-index特点控制,z-index值为无单位的整数,大的在上面,能够有负值。
肯定定位的定位办法:假如它的父元素设置了除static之外的定位,比如position:relative或position:absolute及position:fixed,那么它就会相对于它的父元从来定位,方位经过left,top,right,bottom特点来规定,假如它的父元素没有设置定位,那么就得看它父元素的父元素是否有设置定位,假如还是没有就继续向更高层的先人元素类推,总归它的定位就是相对于设置了除static定位之外的定位的第一个先人元素,假如所有的先人元素都没有以上三种定位中的其间一种定位,那么它就会相对于文档body来定位(并非相对于浏览器窗口,相对于窗口定位的是fixed)。
将class=”two”的p定位到距离的顶部和左侧别离50px的方位。会改动其他元素的布局,不会在此元素原本方位留下空白。
css1
3、相对定位(relative)
相对定位元素不可层叠,根据left、right、top、bottom等特点在正常文档流中偏移自身方位。同样能够用z-index分层设计。
将class=”two”的p定位到距离它原本方位的顶部和左侧别离50px的方位。不会改动其他元素的布局,会在此元素原本方位留下空白。
4、固定定位(fixed)
固定定位与肯定定位相似,但它是相对于浏览器窗口定位,而且不会随着翻滚条进行翻滚。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏,不需运用margin、border、padding。
5、肯定定位vs相对定位
肯定定位如同把不同元素安排到了一栋楼的不同楼层(除首层,文本流放在首层),它们之间互不影响;相对定位元素在首层,与文本流一起存放,它们之间互相影响。
被设置了肯定定位的元素,在文档流中是不占有空间的,假如某元素设置了肯定定位,那么它在文档流中的方位会被删去,它浮了起来,其实设置了相对定位也会让元素浮起来,但它们的不同点在于,相对定位不会删去它本身在文档流中占有的空间,其他元素不能够占有该空间,而肯定定位则会删去掉该元素在文档流中的方位,使其完全从文档流中抽了出来,其他元素能够占有其空间,能够经过z-index来设置它们的堆叠次序。

赞(0)
未经允许不得转载:志达IT网站 » css设置文字位置(css的定位方式)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

志达IT网站 每天分享编程和互联网的IT技术博客

登录/注册联系我们