zoukankan      html  css  js  c++  java
  • 基础

    CSS3盒模型

    content

    padding

    border

    margin

    常见问题:

    W3C盒子下的width height和 IE盒子下的width height?

    W3C盒子下的width height  padding内部的区域,即content

    IE盒子下的width height    margin内部的区域,即content+padding+border

    CSS3的解决方案

    /*以border为盒子界*/
    box-sizing: border-box;
    

      

     CSS3背景

    .box {
         400px;
        height: 225px;
        padding: 100px;
        border: 5px dashed #4845e7;
        margin: 100px;
        background: url(http://ww2.sinaimg.cn/large/82677043jw1em07zqgz5xj20zk0zvgyd.jpg) no-repeat  20px 20px scroll,
                    url(http://ww2.sinaimg.cn/large/82677043jw1em07zqgz5xj20zk0zvgyd.jpg) no-repeat  0 0 scroll;
        background-color: #C81623;
        /*以content为盒子界*/
        box-sizing: content-box;
        background-origin: content-box;
        background-clip: content-box;
        background-size: 100% auto;
    }
    

      

    .box {
        position: relative;
         400px;
        height: 225px;
        border: 5px dashed #4845e7;
        margin: 100px auto;
    
    }
    .box::after,
    .box:before {
        position: absolute;
        content: "";
        background: url(http://ww2.sinaimg.cn/large/82677043jw1em07zqgz5xj20zk0zvgyd.jpg) no-repeat  0 0 scroll;
        background-color: #C81623;
        /*以content为盒子界*/
        box-sizing: content-box;
        background-origin: content-box;
        background-clip: content-box;
        background-size: 100% auto;
    }
    .box::before{
         100%;
        height: 100%;
    }
    .box::after{
         80%;
        height: 80%;
        left: 10%;
        top: 10%;
    }
    

      

  • 相关阅读:
    oracle常用的sql语句
    Tomcat内存调优
    基于Linux服务器的Oracle自动备份以及定时清除
    Windows 中Oracle数据库定时备份与清除
    CentOS 7 root密码修改
    weblogic忘记用户密码
    weblogic修改密码
    通过python自动获取小说并下载
    Linux修改本机名称
    CentOS无法正常启动
  • 原文地址:https://www.cnblogs.com/WeWeZhang/p/5824364.html
Copyright © 2011-2022 走看看