CSS中如何使用position定位属性-创新互联
CSS 中如何使用position定位属性,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联建站成立于2013年,是专业互联网技术服务公司,拥有项目成都网站制作、成都网站设计、外贸营销网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元汝南做网站,已为上家服务,为汝南各地企业和个人服务,联系电话:18980820575首先,我们先写一个HTML文件,利用css实现多行内容垂直居中。
hello world
HELLO WORLD
层叠样式表
接下来我们使用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: auto auto;}
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联网站建设公司,的支持。
本文标题:CSS中如何使用position定位属性-创新互联
文章分享:http://scyanting.com/article/hchid.html