CSS学习15之定位

最新推荐文章于 2024-11-10 14:10:27 发布

小黑神zxs

最新推荐文章于 2024-11-10 14:10:27 发布

阅读量174

点赞数

分类专栏： CSS3详解文章标签：学习 css3 idea html 前端

本文链接：https://blog.csdn.net/ZXS1002/article/details/123377174

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

display 属性

display 属性是用于控制布局的最重要的 CSS 属性。
display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

浮动和清除浮动

CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

定位

position 属性规定应用于元素的定位方法的类型
定位分为相对定位和绝对定位

示例

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qq会员官网头部栏</title>
    <style>
        body,a,div{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        body{
            background-image: url("images/bg.png");
            background-repeat: no-repeat;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #app{
            position: relative;
            width: 100%;
            height: 150px;
            background: #282424;
            overflow: hidden;
        }
        #logo{
            position: fixed;
            display: inline-block;
            float: left;
        }
        #login{
            position: relative;
            display: inline-block;
            right: -400px;
            top: 60px;
            border: 2px yellow solid;
            border-radius: 45px;
        }
        #login a{
            text-align: center;
            font: 20px bold;
            line-height: 40px;
            display: inline-block;
            width: 80px;
            height: 40px;
            color: yellow;
        }
        #login:hover{
            background: #939331;
        }
        #register{
            position: relative;
            display: inline-block;
            border: 2px yellow solid;
            border-radius: 45px;
            right: -450px;
            top: 60px;
            background: #939331;
        }
        #register a{
            text-align: center;
            font: 20px bold;
            line-height: 40px;
            display: inline-block;
            width: 200px;
            height: 40px;
            color: yellow;
        }
        #list{
            position: relative;
            display: inline-block;
            width: 600px;
            height: 50px;
            left: 400px;
            top: 60px;
        }
        #list a{
            text-align: center;
            font: 14px bold;
            line-height: 50px;
            display: inline-block;
            width: 90px;
            height: 50px;
            color: white;
        }
        #list a:hover{
            color: red;
        }
    </style>
</head>
<body>

<div id="app">
    <div id="logo">
        <img src="images/qqviplogo.png" alt="vip">
    </div>
    <div id="list">
            <a href="">靓号站&emsp;</a>
            <a href="">功能特权&emsp;</a>
            <a href="">游戏特权&emsp;</a>
            <a href="">成长体系&emsp;</a>
            <a href="">年费专区&emsp;</a>
            <a href="">免流量特权&emsp;</a>
    </div>
    <div id="login">
        <a href="#">登录</a>
    </div>
    <div id="register">
        <a href="">开通超级会员</a>
    </div>
</div>

</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        /*绝对定位
        1.父级元素没有定位，相对于浏览器定位,
        2.父级元素有定位属性，相对于父级元素定位，
        3.并且不处于标准文档流,原来的位置不会被保留。
        格式： position：absolute；
        top：长度；
        bottom：长度；
        right：长度；
        left：长度；
        */
        div{
            font-size: 14px;
            line-height: 30px;
            padding: 5px;
            margin: 10px;
        }
        #father{
            border: 2px red solid;
            /*给父级元素施加定位属性，不进行偏移*/
            position: relative;
        }
        #child1{
            background: deeppink;
        }
        #child2{
            background: blue;
            position: absolute;
            right: 50px;
            top: 150px;
        }
        #child3{
            background: green;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="child1">第一个盒子</div>
    <div id="child2">第二个盒子</div>
    <div id="child3">第三个盒子</div>

</div>

</body>
</html>