中国易维网
专业网站建设公司 [客户登录] [会员注册]
中国易维网
中国易维网
中国易维网
中国易维网
宜维新闻

网页设计中CSS定位方法的使用作者:中国易维网 来源:www.51eway.com 更新时间:2015-09-11 13:41

   CSS中有三种基本的定位机制,分别是普通流、浮动和定位。除非专门指定,否则所有框都在普通流中定位。这些概念控制在页面上安排和显示元素的方式,形成CSS的基本布局。本文就介绍一下网页设计中CSS定位方法的使用。

 
 
网页设计中CSS定位方法的使用
  视觉可视化模型:p、h1、div等元素常常被称为块级元素。这就意味着这些元素显示为一块内容。即“块框”。与之相反,strong和span等元素称为行内元素,因为它们的内容显示在行中,即“行内框”。
 
  行内框在一行中的水平位置,可以使用水平填充、边框和空白边距设置它们之间的水平间距,但是垂直填充、边框和空白边距不影响行内框的高度。
 
  由于一行形成的水平框称为行框,行框的高度足以容纳它包含的所有行内框,设置行高可以增加这个框的高度。
 
  块级框从上到下一个接一个地排列,框之间的垂直距离由框的垂直空白边距离也就是margin值计算出来。
 
  可以使用display属性改变生成的框的类型.通过将display属性设为block,可以让行内元素转化为块级元素。还可以将display属性设none.让生成的元素根本没有框,也就是这个框及其所有内容就不显示了,不占用文档中的空间。
 
  浮动定位float:还有一种定位模型为浮动模型。浮动的框可以左右移动,直到它外边缘碰到包含框或另一个浮动框的边缘。因为浮动根不在文档的普通流中,所以文档流中的块框表现得就像浮动框不存在一样。
 
  position定位:position定位与float一样.也是CSS排版中非常重要的概念。Position的字面意思是指定块的位置,即块相对子其父块的位置或者相对于它自身应该在的位置。position属性值有以下几种:
 
  absolute:绝对定位,将对象从文档流中拖出.通过width、height、left、right、top、bottom等属性与margin,padding、border进行绝对定位,绝对定位的元素可以有边界,但这些边界不压缩。而其层叠通过z-index属性定义。
 
  fixed:悬浮,使元素固定在屏幕的某个位置,其包含块是可视区域本身.因此它不随滚动条的滚动而滚动。
 
  relative:相对定位,对象不可层叠,依据left, right、top, bottom等属性在正常文档流中偏移位置。
 
  static:静态(默认),无特殊定位。
上海宜维网站建设公司优势

宜维新闻

企业网站开发费用报价单
其它资讯
上海宜维网站建设公司增值服务

网站建设热点资讯

建网站软件有哪些?最新网页制作软件大全联系我们页面设计 网站单页制作案例

 最新网站上线通告

2015.08.10 / O.X.S.网站成功上线!

2015.07.28 / 伊贝丝网站成功上线 !

2015.06.29 / 上海凯洲投资管理有限公司网站成功上线!

2015.06.18 / 上海嘟咔茶饮连锁网站成功上线!

2015.06.05 / 上海楷晟装饰有限公司网站成功上线!

2015.05.28 / 上海佰裕装饰工程有限公司网站成功上线!

O.X.S.网站成功上线
伊贝丝网站成功上线
上海凯洲投资管理有限公司网站成功上线
上海嘟咔茶饮连锁网站成功上线
上海楷晟装饰有限公司网站成功上线
上海佰裕装饰工程有限公司网站成功上线


上海网站建设专业服务公司-上海宜维网络科技公司【中国易维网】-全方位网站建设方案,众多500强企业、集团公司的网站建设专家。

营业执照注册证号:310115000564952
信产部登记备案号:沪ICP备12011991号
2010-2018©中国易维网 版权所有 严禁复制 [ 责任声明 ]

沪公网安备 31011202001038号