- 布局方式
-
文档流
-
浮动布局
属性:float
取值:left/right
特点:- 浮动元素按照浮动方向依次停靠在前一个元素的边缘,一旦设置浮动,就会脱离文档流,在文档中不占位,可以调整宽高。
- "文字"环绕效果:浮动元素不占位,后面正常元素向前占位,被浮动元素遮挡。但是浮动元素只会遮挡元素位置,不影响元素内容的显示,内容会围绕浮动元素周围显示。
- 浮动元素如果与行内或行内块元素显示时,见缝插针,允许共行显示
问题:
- 浮动元素不占位,后面正常元素向前占位,影响布局。解决:清除浮动
属性:clear
取值:left/right/both
使用:为正常元素添加clear属性,使其不受前面元素左浮或右浮的影响 - 子元素全部浮动,导致父元素高度为0,影响父元素自身背景及边框样式的显示,影响整体布局。
解决:- 内容确定时,可以给父元素固定高度(导航栏)
- 内容不确定时,可以为父元素设置overflow:hidden;(保留浮动元素的高度)
- 标准的清除浮动
在父元素的末尾手动添加空的子元素,设置clear:both;
-
定位布局
属性:position
取值:relative/absolute/fixed
使用:- 已定位元素:只有设置position属性,取值为relative/absolute/fixed,才能称为已定位元素
- 偏移属性:调整已定位元素显示位置
top:设置元素与参照物顶部的距离
left
right
bottom - 分类
- 相对定位relative
特点:相对定位的元素不会脱离文档流;参照元素在文档中的原始位置进行偏移 - 绝对定位absolute
特点:绝对定位的元素脱离文档流,不占位;参照离他最近的已定位的祖先元素进行偏移,没有的话,参照浏览器窗口的原点偏移
使用:父元素相对定位,子元素绝对定位 - 固定定位fixed
特点:固定定位的元素会脱离文档流;参照浏览器窗口进行定位;不跟随页面滚动而滚动 - 堆叠次序调整
- 已定位的元素与正常的元素发生堆叠,永远是已定位的元素在上方显示
- 同为已定位元素发生堆叠,看代码书写顺序,后来者居上
- 调整堆叠次序:
属性:z-index
取值:无单位的数值,值越大越靠上
注意:只能调整已定位元素的堆叠次序
- 相对定位relative
-
5布局方式2定位布局
最新推荐文章于 2021-11-28 21:22:53 发布