CSS居中和定位

元素的定位属性:主要包括定位模式和边偏移

定位模式:

在CSS中,position属性用于定义元素的定位模式,其基本语法为:

选择器{position: 属性值}

position属性的常用值:

static             自动定位,流式布局(默认方式)

relative         相对定位,相对于其原文档流的位置进行定位。而且不影响其他元素的布局

absolute      绝对定位,相对于其上一个已经定位的父元素进行定位

fixed           固定定位,相对于浏览器窗口进行定位


z-index       取值范围可到9000,作用为改变重叠定位元素的堆叠顺序。

常见布局案例:

圣杯布局


双飞翼布局


CSS背景



background-position属性设置:

关键字设置      top、center、bottom和left、center、right组合使用

%设置            x%,y%    水平位置和垂直位置 从0%~100%,  如果仅设置一个值,另外一个值为50%

xpos ypos      单位为像素,可与%混合使用

background合写顺序:背景颜色,背景图地址,平铺设置,背景图滚动,背景图位置

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

背景综合练习1


背景综合练习2


兼容IE6/7的inline-block方式:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1 92
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,108评论 0 5
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,509评论 0 5
  • 二 什么是大家?且看莎翁《罗米欧与朱丽叶》中的这段文字:“啊,吵吵闹闹的相爱,亲亲热热的怨恨! 啊,无中生有的一切...
    路岗阅读 377评论 0 1
  • ???????????????????????????????????????
    毛阿莫123314阅读 250评论 0 0