CSS 定位position属性详细介绍
导读： 首先，我们先写一个HTML文件，利用css实现多行内容垂直居中。 helloworld HELLOWORLD 层叠样式表 接下来我们使用css进行布局排版： .wrap{...
首先，我们先写一个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; }声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS 定位position属性详细介绍
本文地址： https://pptw.com/jishu/665209.html