关于CSS3定位和浮动的解析-css教程-PHP中文网

关于CSS3定位和浮动的解析

不言

发布： 2018-06-20 17:44:14

原创

2954人浏览过

这篇文章主要为大家详细介绍了css3定位和浮动的概念，以及实例代码讲解css3定位和浮动的使用方法，感兴趣的小伙伴们可以参考一下

本文为大家分享CSS3定位和浮动的基础概念，与使用方法，供大家参考，具体内容如下

一、定位

1、 css定位：

改变元素在页面上的位置

立即学习“前端免费学习笔记（深入）”；

2、 css定位机制：

普通流：

浮动：

绝对布局：

3、 css定位的属性:

position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素显示的对其方式
z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序，越大越在上方/

position的属性
static 静态的（默认）
relative 相对布局（默认的）
absolute 绝对布局（和其他的标签无关联）
fixed 固定的（不会随着页面的滚动而动）

实例代码：

ECTouch移动商城系统

ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有

查看详情

<body>   
    <p id="position1"></p>   
    <p id="position2"></p>   
    <script>   
        for (var i=0;i<100;i++){   
            document.write(i+"<br/>")   
        }   
    </script>   
</body>   
#position1{   
    width: 100px;   
    height: 100px;   
    background-color: blue;   
    position: relative;   
    left: 20px;   
    top: 20px;   
    /*用来设置元素的堆叠顺序，越大越在上方*/
    z-index: 2;   
}#position2{   
    width: 100px;   
    height: 100px;   
    background-color: red;   
    position: relative;   
    left: 30px;   
    top: 10px;   
    z-index: 1;   
}

登录后复制

二、浮动

float属性可用的值:
left/right/none/inherit: 向左、右，不浮动，从父级继承。
* float

1.浮动后，脱离正常流，在浮动流中排列。任何元素都是作为块元素来显示，可设置宽高，内容撑开宽度。
2.很多浮动块在一起的时候，他们总是找与自己最近的、浮动方向相同的块来确定自己的位置，如果被迫换行，则以这个最近的元素的高度为基准起新行

clear属性：去掉浮动属性（包括继承来的）
意思和上面对应的一样

需要清浮动的情况：

子标签浮动后，父标签的高度无法被撑开，所以需要清浮动；
新加入的标签，希望不受之前浮动元素的影响，则需要清浮动；

1.clear:both; height:0; overflow:hidden;
2.overflow:hidden; 触发layout 常用于清楚内浮动；
3.after 伪对象：给当前对象设置
.aa:after {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
想办法触发ie6的layout渲染机制，靠运气解决了很多bug，zoom：1可以触发！！！
inline-block对内块对外行；
4.父标签一起浮动；
5.position:absolute；清除浮动

display
display：block 以块元素显示；
display：none 内容消失，不占空间；
display：inline 以行内元素显示，可解决IE6的双倍BUG；
display：inline-block 对内块，对外行。

visibility：none
隐藏，但是依旧占用空间，影响布局

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！