css元素定位和布局
2012-05-17 00:20
302 查看
一、定位
模型和定位是密不可分的,就像买了家具,要找地方放家具一样,要不然没地方放,放到人家家里面,是没有意义的。
下面就介绍一下定位的属性:
position 定义元素在页面的定位方式
left 指定元素和最近一个具有定位设置的父对象左边的距离
right 指定元素和最近一个具有定位设置的父对象右边的距离
top 指定元素和最近一个具有定位设置的父对象上边的距离
bottom 指定元素和最近一个具有定位设置的父对象下边的距离
z-index 设置元素的层叠顺序,仅在position属性为relative或者是absolute时有效
width 设置元素的框的宽
height 设置元素的框的高
overflow内容溢出控制
clip 剪切
前六个是定位,后四个是设置区块,或对其中内容进行控制
下面主要先说一下position的属性absolute 、relative(相对的)、static (静态的)、fixed(固定的)
下面是一个absolute的例子 top和left的作用很简单的体现出来了、
下面是一个relative的例子 主要是相对上级模型块content的位置
下面是一个fixed的例子 主要是浏览器窗口的位置可以制作悬浮广告
其他几个属性暂时不说了,等有时间的话补上。。。。
二、布局
布局和定位的作用有点类似,都是将模型块放置到一个地方
布局的操作主要是如何安排、排列、和改变区块的显示位置、同时处理邻里纠纷(设置两个相邻块的间距)布局的主要属性如下:
clear 指定元素不允许有浮动对象的边 取值有none left right both
float 指定元素是否以及如何浮动,取值是none left right
clip 指定元素的可视区域,区域外的部分隐藏
overflow 指定元素的内容超过指定宽度和高度时的处理方式 默认为visible(隐藏)
overflow-x超过宽度
overflow-y超过高度
display 指定元素如何显示
visibility 指定是否显示元素
看一下属性就感觉很多是要用到的,在此主要是float和clare的用法,float主要是流向某个地方 clear主要是不让某个方向流向,
试着把上述clear属性改成both left right 看看其效果
其他的有时间补上
模型和定位是密不可分的,就像买了家具,要找地方放家具一样,要不然没地方放,放到人家家里面,是没有意义的。
下面就介绍一下定位的属性:
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 看看其效果
其他的有时间补上
相关文章推荐
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
- css布局:父元素相对定位,子元素绝对定位
- css元素定位和布局
- CSS布局--子元素margin-top 改变父元素定位的问题
- CSS布局——元素浮动与定位篇
- Css元素布局定位
- CSS布局定位[转]
- CSS实现定位元素居中的方法
- 使用CSS布局定位属性轻松实现优美站点布局
- CSS ——浮动与定位元素
- CSS元素定位
- CSS布局 块级元素及内联元素
- CSS元素定位6-10课
- CSS中position的absolute如何相对于父元素的位置进行定位
- CSS中绝对定位对子元素height的影响
- RobotFramework测试问题三:元素不能定位问题二(css 伪元素)
- CSS分栏布局的方法:绝对定位和浮动
- css基础 出现层叠的两个绝对定位元素 使用z-index属性设置层叠顺序
- CSS --clip绝对定位元素的裁剪(隐藏该元素)
- Selenium-CSS页面元素定位