css元素定位和布局

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

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

position 定义元素在页面的定位方式
left 指定元素和最近一个具有定位设置的父对象左边的距离
right 指定元素和最近一个具有定位设置的父对象右边的距离
top 指定元素和最近一个具有定位设置的父对象上边的距离
bottom 指定元素和最近一个具有定位设置的父对象下边的距离
z-index 设置元素的层叠顺序，仅在position属性为relative或者是absolute时有效
width 设置元素的框的宽
height 设置元素的框的高
overflow内容溢出控制
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>

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

二、布局

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

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

clear 指定元素不允许有浮动对象的边取值有none left right both
float 指定元素是否以及如何浮动，取值是none left right
clip 指定元素的可视区域，区域外的部分隐藏
overflow 指定元素的内容超过指定宽度和高度时的处理方式默认为visible（隐藏）
overflow-x超过宽度
overflow-y超过高度
display 指定元素如何显示
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) 编辑收藏举报

刷新页面返回顶部

css元素定位和布局

公告