CSS定位position属性的示例分析

这篇文章主要为大家展示了“CSS定位position属性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS定位position属性的示例分析”这篇文章吧。

站在用户的角度思考问题,与客户深入沟通,找到乌达网站设计与乌达网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:做网站、成都做网站、企业官网、英文网站、手机端网站、网站推广、空间域名、网站空间、企业邮箱。业务覆盖乌达地区。

首先,我们先写一个HTML文件,利用css实现多行内容垂直居中。

helloworld

HELLOWORLD

层叠样式表

接下来我们使用css进行布局排版:

.wrap{

width:100%;

height:400px;

display:table;

}

.content{

display:table-cell;

vertical-align:table;

text-align:center;

}

position属性:

一、静态定位/常规定位/自然定位static

作用:使元素定位于自然流中

特点:

1、忽略top、bottom、left、right或者z-index声明

2、两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的

3、具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大到占满剩余宽度,造成的效果就是这个块水平居中

二、相对定位relative

作用:使元素成为可定位的祖先元素

特点:

1、可以使用top/right/bottom/left/z-index进行相对定位,相对元素在自然流中的位置

2、相对定位的元素在自然流中的位置会被保留

3、任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位

4、可以使浮动元素发生偏移(解决两个浮动元素设置t/r/b/l无效的问题),并控制它们的堆叠顺序

三、绝对定位absolute

作用:使元素脱离自然流

特点:

1、脱离自然流

2、设置尺寸的百分比比的是最近可定位的祖先元素

3、lrtb如果设置为0,它将对齐到最近可定位祖先元素的各边(衍生水平垂直居中妙计)

4、如果没有最近可定位祖先元素,会认作为可定位祖先元素

5、z-index可以控制堆叠顺序

四、固定定位fixed

作用:和绝对定位作用相似

特点:

1、相对于浏览器视口定位

2、固定定位元素不会随着视口滚动而滚动

3、继承absolue的特点

利用position实现子元素垂直居中

.wrap{

width:200px;

height:200px;

background:blue;

position:relative;

}

.content{

width:100px;

height:100px;

background:red;

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:autoauto;

}

以上是“CSS定位position属性的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页题目:CSS定位position属性的示例分析
网页URL:http://myzitong.com/article/ppehjh.html

其他资讯