关闭

CSS中div布局position以及水平居中

1060人阅读 评论(0) 收藏 举报
分类:


CSS 有三种基本的定位机制:普通流、浮动(float)和定位(position),除非专门指定,否则所有框都在普通流中定位。

下面我们来看看position的定位机制。position 有四种属性,其含义如下:

static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative(相对定位)

表示元素框偏移某个距离,即可以位移,这个距离就是元素框未定位之前的原本站位,它原本所占的空间仍保留。

absolute(绝对定位)

表示元素框偏移某个距离,并且元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。即可以存在于任何位置。

fixed(固定定位)

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。即绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置,不论浏览器的视框怎么变化,其位置始终相对于视框不变。

由于static与fix比较简单且用的较少,故以下详细介绍relative与absolute的用法。

我们在写页面时经常会遇到如下问题,就是浏览器窗口大小变化时,div布局也就会出现混乱的局面,解决这类问题问题最好方法就是外层div设置relative布局,内层设置absolute布局,然后调试一下具体div的位置即可,现在来看下列,一个简单的登陆框:

<div style="position:relative;" width="100%" height="100%">

  <div style="position:absolute;" >
   <img src="StormsAndFloods/SRFTTFC/Audit/img/imag55.png" width="100%" height="100%"></img>
  </div>

  <div style="position:absolute;background-color:#C2D4D6;border:3px;border-color:black;border-radius:5px;;width:350px;height:220px;margin-top:18%;margin-left:50%;z-index:999;font-family:宋体;filter: alpha(opacity=80); opacity:0.8; ">
   <div style="margin-top:30px;position:absolute" >
    <table>
     <tr style="height:20px;">
      <td></td>
     </tr>
     <tr >
      <td style="width:100px;text-align:right"><b>用户名:</b></td>
      <td><input type="text" id="name" style="width:200px;"/></td>
     </tr>
    </table>
   </div>
   <div style="margin-top:90px;position:absolute" >
    <table>
     <tr >
      <td style="width:100px;text-align:right"><b>密&#160;码:</b></td>
      <td><input type="password" id="password" style="width:200px;"/></td>
     </tr>
    </table>
   </div>
   <div style="margin-top:130px;position:absolute" >
    <table>
     <tr >
      <td style="width:350px;text-align:center;cospan:2"><input type="submit" value="登录" style="width:70px;height:25px;background-color:#FFBA12;border:1px;border-color:gray;border-radius:3px;"/></td>
     </tr>
    </table>
  
   </div>
  </div>

 </div>

 那么问题来了,当我们的浏览器分辨率不同时,难免会出现div的不居中问题,利用text-align:center和margin:0 auto;即可以居浏览器的中间。注意是在body中设置text-align:center,把要居中的div设置属性margin:0 auto,如果是div,则是对于div居中。

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52270次
    • 积分:933
    • 等级:
    • 排名:千里之外
    • 原创:46篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论