zoukankan      html  css  js  c++  java
  • css 固比固模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    *{
    margin:0;
    padding:0;
    color:#fff;
    }

    /*
    弹性布局

    section {
    80%;
    height:20px;
    margin:100px auto;
    display:flex;
    background:red;
    }

    div:first-child {
    200px;
    background:yellow;
    }
    div:nth-child(2) {
    100%;
    background:blue;
    }
    div:nth-child(3){
    200px;
    background:yellow;
    }*/
    /* float设置布局
    section {
    margin:100px auto;
    80%;
    background:red;
    color:#000;

    }

    div:first-child {
    200px;
    float:left;
    background:yellow;
    }
    div:nth-child(2) {
    calc(100% - 450px);
    background:blue;
    float:left;
    }
    div:nth-child(3){
    250px;
    float:left;
    background:yellow;
    }
    */
    /*定位的手段*/
    section {
    margin:100px auto;
    80%;
    background:red;
    color:#000;
    position:relative;

    }

    div:first-child {
    200px;
    position:absolute;
    left:0;
    top:0;
    background:yellow;
    }
    div:nth-child(2) {
    100%;
    background:blue;
    box-sizing:border-box;
    padding-left:200px;
    padding-right:250px;
    }
    div:nth-child(3){
    250px;
    position:absolute;
    right:0;
    top:0;
    background:yellow;
    }
    </style>
    </head>

    <body>
    <section>
    <div>121</div>
    <div>22</div>
    <div>333</div>
    </section>
    </body>
    </html>

  • 相关阅读:
    设计模式之访问者模式
    设计模式之命令模式
    设计模式之迭代器模式
    tomcat8.0.11性能优化
    java 基础 --集合--012
    StringBuffer和StringBuilder的区别
    jquery 入门
    java 基础 --匿名内部类-008
    java 基础 --多态--009
    java 基础--继承--007
  • 原文地址:https://www.cnblogs.com/moon-yyl/p/10862980.html
Copyright © 2011-2022 走看看