css笔记03

CSS定位详解
最新推荐文章于 2025-05-10 16:22:55 发布
转载最新推荐文章于 2025-05-10 16:22:55 发布 · 85 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/686991/blog/349177
为什么80%的码农都做不了架构师？>>>
5.css定位
<html>
    <head>
        <title>CSS定位</title>
        <style type="text/css">
            #parent{
                border:1px solid red;
                width:500px;
                height:100px;
                /* margin:80px; */
                /* position:absolute; */
                position:relative;
                left:80px;
            }
            
            #child{
                border:1px solid blue;
                width:150px;
                height:150px;
                /* position:absolute,relative;
                relative相对定位是针对父类的
                absolute绝对定位是针对浏览器(
                    针对上一级的父元素中position为absolute定位的)而言的
                    如果上一级父元素不是absolute,则参照body
                    当被设置absolute之后,原有空间释放给其他元素 .
                relative针对父元素进行定位,而且空间会一直被占用,即使被移动到其他位置 
                使用建议: 尽量使用relative进行文本位置的移动,所以如果要为容器
                设置里面的文本,可以如下处理: 
                  */
                /* position:relative; */
                /*bottom:0px;*/
                left:10px;
                top:10px;
                position:absolute;
            }
            
            #c2{
                border:1px solid blue;
                width:150px;
                height:150px;
            }
            #c1{
                border:1px solid blue;
                width:150px;
                height:150px;
                position:absolute;
                top:20px;
            }
            #rock_star{
                padding:30px;
                list-style:none;
            }
            #rock_star li{
                border:1px solid red;
                width:130px;
                height:40px;
                text-align:center;
            }
            #rock_star li span{
                position:relative;
                top:15px;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="c1">ddddc2</div>
            <div id="child">
                Hello box model
            </div>
            <div id="c2">cc2</div>
        </div>
        <ul id="rock_star">
            <li><span>窦唯</span></li>
            <li><span>张楚</span></li>
            <li><span>何勇</span></li>
            <li><span>周云蓬</span></li>
        </ul>
    </body>
</html>

<html>
    <head>
        <title>CSS定位演示</title>
        <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        ul.topic_show{
            list-style:none;/*去掉文字前的黑点 */
            width:240px;
            border:1px solid #999;
        }
        ul.topic_show h3{
            height:30px;
            background:#111155;
            color:#fff;
            font-size:14px;
        }
        
        ul.topic_show h3 span{
            position:relative;
            left:10px;
            top:8px;
        }
        
        ul.topic_show li{
            /* padding:9px 0px; */
            height:30px;
            /* border:1px solid red; */
            font-size:12px;
            color:#555;
            /* 背景会默认完成填充,重复性的  */
            background:url("../img/point.png") no-repeat;
            /* 背景第一个值是左右距离,第二个上下 */
            background-position:10px 8px;
        }
        ul.topic_show li span{
            position:relative;
            top:7px;
            left:20px;
        }
        
        </style>
    </head>
    <body>
    <div style="margin:50px;">
        <ul class="topic_show">
            <h3><span>公告通知</span></h3>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
        </ul>
        <ul class="topic_show">
            <h3><span>公告通知</span></h3>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
            <li><span>关于xxxxxxxxxxxxxxx的通知</span></li>
        </ul>
    </div>
    </body>
</html>
转载于:https://my.oschina.net/686991/blog/349177