CSS定位position属性的示例分析

发布时间:2022-03-02 09:49:05 作者:小新
来源:亿速云 阅读:96

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

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

  <divclass="wrap">

  <divclass="content">

  <h2>helloworld</h2>

  <h3>HELLOWORLD</h3>

  <h4>层叠样式表</h4>

  </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实现子元素垂直居中

  <divclass="wrap">

  <divclass=""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:autoauto;

  }


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

推荐阅读:
  1. CSS定位position属性示例
  2. CSS定位Position有几种属性

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css position

上一篇:css3中的动画属性有哪些

下一篇:CSS如何使用border-radius属性

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》