提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS 定位position属性细致引见(附示例)【css教程】,position

媒介:在运用css给页面举行排版美化的过程当中,常常会用到pposition属性。那末,接下来我们就细致引见一下position属性。

引荐视频教程:css视频教程

起首,我们先写一个HTML文件,应用css完成多行内容垂直居中。

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

接下来我们运用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完成子元素垂直居中

<div class="wrap">
    <div class=""content></div>
</div>
.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属性细致引见(附示例)的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS 定位position属性细致引见(附示例)【css教程】,position"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线