美文网首页
盒子模型示例代码

盒子模型示例代码

作者: 歇斯底里2 | 来源:发表于2020-07-17 19:12 被阅读0次

    --定义样式 border-style:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

    <style type="text/css">

        .block {

          width: 200px;

      height:200px;

          padding: 30px;

      background-color: red;

      border-style:solid;

      border-width:10px;

      border-color:green;

      //border:10px solid yellow;

      //border-radius: 20px;

      //margin:auto;

        }

    </style>

    </head>

    <body>

        <div class="block">border</div>

    </body>

    </html>

    --兄弟元素margin合并

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style type="text/css">

            body {

                background: pink;

            }

            .div {

                //overflow: hidden;

                //margin: 0 auto;

                width: 300px;

                height: 600px;

                background: #aaa;

            }

            .div1 {

                width: 200px;

                height: 200px;

                background: red;

                //margin: 50px 0px;

                //float: left;

            }

            .div2 {

                width: 200px;

                background: green;

                //margin: 50px 0px;

                height: 200px;

                //float: left;

            }

        </style>

    </head>

    <body>

        <div class="div">

            <div class="div1"></div>

            <div class="div2"></div>

        </div>

    </body>

    </html>

    ----父子元素margin合并

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

    <style type="text/css">

            body {

                background: pink;

            }

            .div1 {

                //margin-top: 20px;

                width: 450px;

                height: 450px;

                background: #aaa;

    //overflow:hidden;

    //border:1px solid red;

            }

            .div2 {

                width: 200px;

                height: 200px;

                background: red;

                //margin-top: 50px;

            }

        </style>

    </head>

    <body>

        <div class="div1">

            <div class="div2"></div>

        </div>

    </body>

    </html>

    --box-sizing

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

    <style type="text/css">

    .group {

          /* background-color: blue; */

          overflow: hidden;

      }

        .block {

          width: 33.33%;

          padding: 20px;

          float: left;

          //box-sizing: border-box ;

        }

        .red {

          background-color: red;

    //box-sizing: conten-box ;

    //overflow: hidden;

    //outline:#00FF00 dotted thick;

        }

        .green {

          background-color: green;

        }

        .gray {

          background-color: gray;

    //box-sizing: border-box  ;

        }

    </style>

    </head>

    <body>

    <div class="group">

        <div class="block red">1</div>

        <div class="block green">2</div>

        <div class="block gray">3</div>

    </div>

    </body>

    </html>

    --盒子显示(display)类型

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

    <style>

    .background{

    background-color:#F60;

    margin-bottom:5px;

    margin-left:5px;

    height:50Px;

    }

    .display1{

    display:block;

    }

    .display2{

    display:inline ;

    //display:inline-block;

    }

    </style>

    <div class="background ">Div默认为 block</div>

    <div class="background ">Div默认为 block</div>

    <div class="background ">Div默认为 block</div>

    <div class="background display2">修改为 inline</div>

    <div class="background display2">修改为 inline</div>

    <div class="background display2">修改为 inline</div>

    <span class="background display1">加了block属性</span>

    <span class="background display1">加了block属性</span>

    <span class="background display1">加了block属性</span>

    <span class="background">没加block属性</span>

    <span class="background">没加block属性</span>

    <span class="background">没加block属性</span>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:盒子模型示例代码

          本文链接:https://www.haomeiwen.com/subject/ofjnhktx.html