zoukankan      html  css  js  c++  java
  • css 脱离文档流

    一、float

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>脱离文本流</title>
        <style>
            .c1{
                height: 100px;
                width: 100px;
                background-color: brown;
            }
    
            .c2 {
                height: 150px;
                width: 150px;
                background-color: blueviolet;
                float: right;
            }
    
            .c3 {
                height: 200px;
                width: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    </body>
    </html>

    二、absolute

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>脱离文本流</title>
        <style>
            .c1{
                height: 100px;
                width: 100px;
                background-color: brown;
            }
    
            .c2 {
                height: 150px;
                width: 150px;
                background-color: blueviolet;
                position: absolute;
                left: 200px;
            }
    
            .c3 {
                height: 200px;
                width: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    </body>
    </html>

    三、fixed

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>脱离文本流</title>
        <style>
            .c1{
                height: 100px;
                width: 100px;
                background-color: brown;
            }
    
            .c2 {
                height: 150px;
                width: 150px;
                background-color: blueviolet;
                position: fixed;
                left: 400px;
            }
    
            .c3 {
                height: 200px;
                width: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    </body>
    </html>
  • 相关阅读:
    chrom插件开发
    实验7
    第六次实验报告
    c++第五次实验报告
    c++第四次实验报告
    c++第三次实验报告
    C++第二次实验
    c++第一次作业
    HttpWebRequest调用webservice
    树状组织结构-Tree
  • 原文地址:https://www.cnblogs.com/wt7018/p/11143750.html
Copyright © 2011-2022 走看看