css15--------定位,水平居中总结

脱流:

absolute,float,fixed定位时会脱离文档流

脱离文档流的元素,其display属性为inline-block,其内容自适应,可设置宽高


 定位:

position设置为absolute时,如果不设置top等属性,则默认在原来位置,该元素前面的元素不受影响(前面元素为absolute,relative则受影响),该元素后面的元素会依次从其原来位置定位,从而被其覆盖

position设置为absolute时,默认位置:前面元素没有postion,position=relative时,不变,前面元素是position=absolute,float时,重叠;

position设置为relative时,默认位置:

float定位时,不设置top等属性时,则默认在原来位置,该元素前面元素没有影响,后面元素会依次从其原来位置定位,从而被其覆盖

fixed定位时,不设置top等属性时,则默认在原来位置,该元素前面元素没有影响,后面元素会依次从其原来位置定位,从而被其覆盖

float定位时,如果后面元素为文档流,则依次显示,占用float元素的位置定位,其文本,图片内容不会被覆盖,会被挤到float元素周围,并漂浮出其父元素尺寸范围


水平居中:分为元素水平居中跟文本水平居中

文本的水平居中比较简单:设置text-align为center;

元素水平居中

1:margin  auto只能用于 定宽,块状元素,如果display属性为inline-block,inline,则无效;

2:text-align center可以用于元素类型为inline或者inline-block类型,float,absolute等浮动后,对其父元素设置会无效;


2垂直居中

vertical-align只对元素中拥有valign属性的元素起作用,例如表格中的td,th,caption,而span,div等元素是没有align特性的,所以对其不起作用

原文地址:https://www.cnblogs.com/kaililikai/p/5792153.html