CSS 元素定位的方式

一、元素的显示方式

1.块级元素

——换行显示

——若不设width，则默认继承包含元素的宽度

2.内联元素

——紧接着上一个元素显示

——未设width，不换行显示

——如果设置了width，宽度够则同一行显示，不够则换行显示

 

二、position属性

1.static：普通流，元素的默认位置

2.relative：相对于元素本身的默认位置进行定位

——在周围元素看来，使用该属性值的元素还是在其普通流的位置，不管它怎么偏移

——可用偏移属性 left、right、top、bottom

——当其子元素需要按absolute定位时，其position必须设为relative且没有偏移

3.absolute：相对其包含元素的矩形边界进行偏移

——该属性值的元素会脱离普通流存在，不影响其他元素的位置（直接忽略它所占的空间）

——可用偏移属性 left、right、top、bottom

4.fixed：相对浏览器窗口进行偏移

——不影响周围元素的位置

 

三、float属性

1.属性值：left、right

2.浮动元素应该设置width属性，否则浮动元素会占满包含元素的整个宽度

3.盒子内有多个浮动元素排列，盒子的高度会影响后面元素的排列