html之浮动和定位

最新推荐文章于 2024-03-01 08:45:11 发布

weixin_30809173

最新推荐文章于 2024-03-01 08:45:11 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liu-ya/p/9356746.html

浮动float

可以让原本不能同时显示在一行的元素显示在一行，

定位position

可以让元素位置更精确
分为以下几类
. 绝对定位：absolute脱离文档流，相对自己定位
. 相对定位relative :不脱离文档流，相对文档定位
. 固定定位fiex --相对窗口定位
. 静态定位static

特别情况
定位有父级的时候

父级：相对定位
子级：绝对定位
那么一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对父级定位
说明内联元素有定位，就支持宽高了
例如：

html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             * 定位有父级的时候
             * 父级：相对定位
             * 子级：绝对定位
             * 一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对父级定位
             * 内联元素有定位，就支持宽高
             */
            #div1{
                width: 500px;
                height: 400px;
                background: yellow;
                position: relative;
                
            }
            #div2{
                width: 200px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 100px;
                top: 100px;
                
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                
            </div>
        </div>
    </body>
</html>

结果如下，子级元素就会随父级元素移动

溢出overflow

有三种格式

hidden
scroll
auto
例如2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;height: 100px;
                border:1px solid:#000;
                /*overflow:auto;*/
                overflow: scroll;
                /*
                 * overflow
                 * hidden
                 * scroll
                 * auto
                 */
                
            }
            </style>
    </head>
    <body>
        <div>
            反馈共和国看见回复的咖啡馆的房间返回接电话航空港经济法东莞市方式红府火锅
        </div>
    </body>
</html>

结果会隐藏多出的部分出现下拉条，