CSS定位

最新推荐文章于 2022-10-03 19:55:37 发布

jia-huan

最新推荐文章于 2022-10-03 19:55:37 发布

阅读量465

点赞数

分类专栏： H5 学习文章标签： css

本文链接：https://blog.csdn.net/cjh_android/article/details/51463893

版权

H5 学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本章内容

CSS定位——定位
CSS定位——浮动
CSS定位——浮动的应用

CSS定位

改变元素在页面上的位置

CSS定位机制

普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局

CSS定位属性

positon             把元素放在一个静态的、相对的、绝对的、或固定的位置中
top                 元素向上的偏移量
left                元素向左的偏移量
right               元素向右的偏移量
bottom              元素向下的偏移量
overflow            设置元素溢出其区域发生的事情
clip                设置元素显示的形状
vertical-align      设置元素垂直对齐方式
z-index             设置元素的堆叠顺序

CSS positon属性

static
relative
absolute
fixed

示例
html：

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

CSS:

#position1{
    width: 100px;
    height: 100px;
    background-color: coral;
    position:static;
    left: 100px;
    top: 100px;
}

position:static 效果

这里写图片描述

position:relative 效果

这里写图片描述

position:absolute 效果

这里写图片描述

position:fixed 效果

这里写图片描述

z-index

值越大，就在上面
示例：
html：

<body>
    <div id="position1"></div>
    <div id="position2"></div>
    <script>
        for(var i=0;i<100;i++){
            document.write(i+"<br/>");
        }
    </script>
</body>

CSS:

#position1{
    width: 100px;
    height: 100px;
    background-color: coral;
    position:fixed;
    left: 100px;
    top: 100px;
    z-index: 2;
}
#position2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position:fixed;
    left: 80px;
    top: 80px;
    z-index: 1;
}

效果：

这里写图片描述

如果变成第一个div 的值是1，第二个是2

这里写图片描述

CSS浮动

浮动

float属性可用的值：
    left:元素向左浮动
    right:元素向右浮动
    none:元素不浮动
    inherit:从父级继承浮动属性

　clear属性

去掉浮动属性(包括继承来的属性)
clear属性值：
    left、right:去掉元素向左、向右浮动
    both:左右两侧均去掉浮动
    inherit:从父级继承来clear的值

示例：
html:

<body>
        <div id="fd"></div>
        <div id="sd"></div>
        <div id="td"></div>
</body>

CSS:

#fd{
     width: 100px;
     height: 100px;
     background-color: aqua;
    float: left;
 }
#sd{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#td{
    width: 100px;
    height: 100px;
    background-color: brown;
}

效果：

这里写图片描述

可以看出，第二个div被第一个div遮住了，也就是说第一个div没有占位置
所有div 都是一样的float left效果：

这里写图片描述

当父div不足以包裹时：
html:

<body>
    <div id="container">
        <div id="fd"></div>
        <div id="sd"></div>
        <div id="td"></div>
    </div>
</body>

CSS:

#fd{
     width: 100px;
     height: 100px;
     background-color: aqua;
    float: left;
 }
#sd{
    float: left;
    width: 150px;
    height: 100px;
    background-color: blue;
}
#td{
    float: left;
    width: 100px;
    height: 100px;
    background-color: brown;
}
#container{
    width: 300px;
    height: 400px;
    background-color: darkgrey;
}

效果：

这里写图片描述

当宽高不同是：
CSS:

#fd{
     width: 100px;
     height: 150px;
     background-color: aqua;
    float: left;
 }
#sd{
    float: left;
    width: 150px;
    height: 100px;
    background-color: blue;
}
#td{
    float: left;
    width: 100px;
    height: 100px;
    background-color: brown;
}
#container{
    width: 300px;
    height: 300px;
    background-color: darkgrey;
}

效果：

这里写图片描述

去除浮动
html:

<body>
    <div id="container">
        <div id="fd"></div>
        <div id="sd"></div>
        <div id="td"></div>
        <div id="text">helloworld</div>
    </div>
</body>

去除浮动前效果：

这里写图片描述

去除浮动后：
CSS：

#fd{
     width: 100px;
     height: 150px;
     background-color: aqua;
    float: left;
 }
#sd{
    float: left;
    width: 150px;
    height: 100px;
    background-color: blue;
}
#td{
    float: left;
    width: 100px;
    height: 100px;
    background-color: brown;
}
#container{
    width: 300px;
    height: 300px;
    background-color: darkgrey;
}
#text{
    clear:both;
}

效果：

这里写图片描述

浮动的应用

html:

<body>
    <div id="div1">
        <ul>
            <li><img src="a.jpg"></li>
            <li><img src="b.jpg"></li>
            <li><img src="c.jpg"></li>
        </ul>
        <ul>
            <li><img src="d.jpg"></li>
            <li><img src="e.jpg"></li>
            <li><img src="f.jpg"></li>
        </ul>
        <ul>
            <li><img src="g.jpg"></li>
            <li><img src="h.jpg"></li>
            <li><img src="i.jpg"></li>
        </ul>
    </div>
</body>

CSS:

*{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;
}
#div1{
    width: 950px;
    height: auto;
    margin: 20px auto;
}
ul{
    width: 250px;
    float: left;
}

效果：

这里写图片描述

休息，休息一下！
这里写图片描述

jia-huan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS定位

本章内容CSS定位——定位CSS定位——浮动CSS定位——浮动的应用CSS定位CSS定位改变元素在页面上的位置CSS定位机制普通流：元素按照其在HTML中的位置顺序决定排布的过程浮动绝对布局CSS定位属性positon 把元素放在一个静态的、相对的、绝对的、或固定的位置中top 元素向上的偏移量left
复制链接

扫一扫