CSS中的固定布局和相对布局
来源:互联网 发布:python电影推荐系统 编辑:程序博客网 时间:2024/05/16 12:54
在讲固定布局和相对布局之前先回顾一下流动布局、冻结布局以及绝对布局
流动布局,不在流中,但是浮动元素的边界会影响内联元素的流动,分左浮动和右浮动,注意要配合宽度width属性一起使用
冻结布局: body下弄个div容器,嵌套所有内容,然后给这个容器设定宽度和左右margin设置成auto
绝对布局: 不在流中,真的会被其它块元素完全忽视,注意其位置是相对于父元素而言
固定布局不在流中,会被其它元素完全忽视,与绝对布局不同的是其相对于窗口,因此不管你怎么拖拉浏览器的滚动条,固定布局元素始终会在屏幕的某个位置不动
position: fixed; top: 300px; left: 120px;
下面是固定布局的一个demo截图(可以清楚看到固定布局不在流中)
相对布局依然在流中,只是在最终现实整个页面前,相对自己现在的位置向左或向右偏移一些像素
position: relative; right: 120px;
下面是相对布局的demo截图(可以清楚看出相对布局元素依然还在流中):
FR:海涛高软(QQ技术交流群:386476712)
1 0
- CSS中的固定布局和相对布局
- 响应式布局中的CSS相对量
- 响应式布局中的CSS相对量
- CSS固定宽度布局
- css设计案例 float 布局和相对布局的应用
- 绝对布局和相对布局
- 相对布局和线形布局
- 相对布局和网格布局
- Android中的相对布局
- Android中的相对布局
- 固定宽度CSS版式布局
- DIV+CSS固定页面布局
- HTML+CSS div固定布局
- 【CSS布局.2】绝对定位和相对定位
- CSS网页布局教程:绝对定位和相对定位
- CSS教程:相对、绝对定位及布局和浮动
- CSS教程:相对、绝对定位及布局和浮动
- CSS网页布局教程:绝对定位和相对定位
- core_animation_lesson3
- core_animation_lesson4
- boost::bind会返回一个函数对象,它内部保存了数据的拷贝
- 深度学习之caffe代码框架
- Java中equals和==的区别
- CSS中的固定布局和相对布局
- 关于IE兼容,发布后变成了IE9(浏览器IE9兼容模式,文档IE7标准模式)
- CSS Positioning(定位)
- 枚举类
- Oracle视图view
- Ubuntu学习笔记一
- POJ - 2584(二分匹配入门)
- codeforces723AThe New Year: Meeting Friends+水题
- 矩阵快速幂入门 + 求Fibonacci数列