`
angowang
  • 浏览: 5136 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

css的浮动

    博客分类：
  • css
 
阅读更多

1.浮动的标签：脱离文档流的标签元素；

2.css的float属性和position属性都可以让标签元素浮动起来；

3.示例：

float示例一：

具有float属性的标签脱离文档流，其原本的位置被紧接着的元素占有

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxLeft {
                width: 400px;
                height: 400px;
                background: red;

                float: left;
            }
            .boxRight {
                width: 400px;
                height: 400px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div class="boxLeft"></div>
        <div class="boxRight"><div>
    </body>
</html>

float示例二：

子标签具有float属性，为防止子元素内容溢出，父元素添加overflow：auto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxParent {
                width: 400px;
                background: red;
                overflow: auto;
                zoom: 1;
            }
            img {
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="boxParent">
            <img src="http://www.learnlayout.com/images/ilta.png" />
        </div>
    </body>
</html>

float示例三：

避免紧接着的元素占用有float属性元素的原本位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxLeft {
                width: 400px;
                height: 400px;
                background: red;
                float: left;
            }
            .boxRight {
                width: 400px;
                height: 400px;
                background: green;
                clear: left;
            }
        </style>
    </head>
    <body>
        <div class="boxLeft"></div>
        <div class="boxRight"><div>
    </body>
</html>

position示例一：

position的relative相对于其原本应占有的位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .box {
                width: 400px;
                height: 400px;
                background: red;
                position: relative;
                top: 50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

position示例二：

position的absolute是相对于父元素的relative以上属性

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxOutside {
                width: 400px;
                height: 400px;
                background: red;
                position: relative;
            }
            .boxInside {
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                bottom: 0px;
                right: 0px;
            }
        </style>
    </head>
    <body>
        <div class="boxOutside">
            <div class="boxInside"><div>
        </div>
    </body>
</html>

position示例三：

position的fixed相对于浏览器的窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .box {
                width: 400px;
                height: 400px;
                background: red;
                position: fixed;
                right: 0px;
                bottom: 0px;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

分享到：
| css3的阴影、透明和动画
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics