css元素定位和布局

一、定位
          模型和定位是密不可分的,就像买了家具,要找地方放家具一样,要不然没地方放,放到人家家里面,是没有意义的。

          下面就介绍一下定位的属性:

  1. position  定义元素在页面的定位方式
  2. left           指定元素和最近一个具有定位设置的父对象左边的距离
  3. right       指定元素和最近一个具有定位设置的父对象右边的距离
  4. top          指定元素和最近一个具有定位设置的父对象上边的距离
  5. bottom   指定元素和最近一个具有定位设置的父对象下边的距离  
  6. z-index   设置元素的层叠顺序,仅在position属性为relative或者是absolute时有效
  7. width      设置元素的框的宽 
  8. height    设置元素的框的高
  9. overflow内容溢出控制
  10. clip         剪切

前六个是定位,后四个是设置区块,或对其中内容进行控制

下面主要先说一下position的属性absolute 、relative(相对的)、static (静态的)、fixed(固定的)

下面是一个absolute的例子 top和left的作用很简单的体现出来了、

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cssTest</title>
    <style type="text/css">
        #box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
    </style>
</head>
<body>
<div id="box">我顶部距离是100  左边是200
</div>
</body>
</html>


下面是一个relative的例子 主要是相对上级模型块content的位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cssTest</title>
    <style type="text/css">
        #box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
        #content1{ position:relative;top:100px;left:200px; background-color:Blue;}
    </style>
</head>
<body>
<div id="box">我顶部距离是100  左边是200
<p id="content1">relative测试</p>
</div>
</body>
</html>


下面是一个fixed的例子 主要是浏览器窗口的位置可以制作悬浮广告

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cssTest</title>
    <style type="text/css">
        #box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
        #content1{ position:relative;top:100px;left:200px; background-color:Blue;}
        #content2{ position:fixed;top:100px;left:200px; background-color:Blue;}
    </style>
</head>
<body>
<div id="box">我顶部距离是100  左边是200
<p id="content1">relative测试</p>
</div>
<p id="content2">fixed测试可以做悬浮广告</p>
</body>
</html>

其他几个属性暂时不说了,等有时间的话补上。。。。


二、布局

布局和定位的作用有点类似,都是将模型块放置到一个地方

布局的操作主要是如何安排、排列、和改变区块的显示位置、同时处理邻里纠纷(设置两个相邻块的间距)布局的主要属性如下:

 

  1. clear 指定元素不允许有浮动对象的边 取值有none left right both
  2. float 指定元素是否以及如何浮动,取值是none left right     
  3. clip   指定元素的可视区域,区域外的部分隐藏
  4. overflow 指定元素的内容超过指定宽度和高度时的处理方式 默认为visible(隐藏)
  5. overflow-x超过宽度
  6. overflow-y超过高度
  7. display 指定元素如何显示
  8. visibility 指定是否显示元素

看一下属性就感觉很多是要用到的,在此主要是float和clare的用法,float主要是流向某个地方 clear主要是不让某个方向流向,

<head>
    <title>cssTest</title>
    <style type="text/css">
          .news {
          background-color: gray;
          border: solid 1px black;
          }
        .news img { float: left;  }
        .news p { float: right; }
        .clear { clear:right; }
    </style>
</head>
<body>
<div class="news">
<img src="news-pic.jpg" /><div class="clear">candnndnnd</div>
<p>some text</p>
</div>
</body>
</html>

试着把上述clear属性改成both left right 看看其效果

   其他的有时间补上

 
 

posted @ 2012-05-17 00:20  haiziguo  阅读(424)  评论(0编辑  收藏  举报