CSS定位

最新推荐文章于 2025-07-17 20:57:17 发布

转载最新推荐文章于 2025-07-17 20:57:17 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lipeng0824/p/4394353.html

1：CSS定位

　　position：

absolute 绝对布局不占位置而且margin左右设为auto没用
realtive 相对布局占位置 margin左右设为auto有用
fixed 不占位置但是会固定在浏览器的一个位置而且margin左右设为auto没用前三个都可以使用偏移量
static 其他属性z-index 偏移量会没用

 <style type="text/css">
     #div1{
         height: 100px;
         width: 500px;
         background-color: blue;
         position: fixed;
         border-radius: 20px;
         z-index: 2;
   }
     #div2{
         height: 100px;
         width: 500px;
         left: 50px;
         top: 50px;
         background-color: red;
         position: fixed;
         border-radius: 20px;
         z-index: 0;
   }
     #div3{
         height: 100px;
         width: 500px;
         left: 100px;
         top: 80px;
         background-color: yellow;
         position: fixed;
         border-radius: 20px;
         z-index: 1;
     }

    </style>

CSS

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
    for(var i = 0;i < 100 ;i++ ){
        document.write(i + "<br />");}
</script>

HTML

效果：

2：CSS浮动

<div id="continer">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    LIPENGLIPENGLIPENG
</div>

HTNL

  <style type="text/css">
     #div1{
         height: 100px;
         width: 50px;
         background-color: blue;
         border-radius: 20px;
         float: left;
   }
     #div2{
         height: 100px;
         width: 100px;
         background-color: red;
         border-radius: 20px;
         float: left;
   }
     #div3{
         height: 100px;
         width: 100px;
         background-color: yellow;
         border-radius: 20px;
         float: left;
     }
    #continer{
        height: 300px;
        width: 240px;
        background-color:gray;
        border-radius: 20px;
        float: left;
    }
    </style>

CSS

效果：

3：浮动的应用

    <style type="text/css">
     #div1{
         height: auto;
         width: 500px;
         margin: 100px auto;
    }
    li {
        list-style: none;
}
    ul{
        width: 25px;
        float: left;
     }
    </style>

CSS

<div id="div1">
    <ul>
        <li><img src="img/1.jpg" title="1"></li>
        <li><img src="img/2.jpg"  title="2"></li>
        <li><img src="img/3.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/6.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/7.jpg"></li>
        <li><img src="img/8.jpg"></li>
        <li><img src="img/9.jpg"></li>
    </ul>
</div>

HTML

转载于:https://www.cnblogs.com/lipeng0824/p/4394353.html