布局常用的方法:①用float设计浮动布局:float默认值为none,可根据页面需要设置为左浮动left,或右浮动right;


CSS——浮动布局与定位布局


浏览器中效果:


CSS——浮动布局与定位布局

       因为 div 是区块元素,每个 div 独占一行,要想让三个 div 在同一行里显示,就需要给三个子元素设置浮动,但浮动会使元素脱离文档流,父元素高度崩塌,所以就要在父元素上清除浮动找回高度。

②利用position做定位布局: position 默认值为static,可根据页面需要设置为相对定位 relative 、绝对定位 absolute、固定定位 fixed

      与position一起使用的是四个坐标系统属性 top 、right 、 bottom 、left,可根据需要设置偏移值。

浏览器效果:


CSS——浮动布局与定位布局

效果与浮动定位相同。

补充:在定位布局中,绝对定位的元素,会相对于第一个 static 定位以外的祖先元素进行定位。



相关文章: