盒子模型示例代码

html-css022

盒子模型示例代码,第1张

--定义样式 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>

在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

记住，是所有的元素都可以看出一个盒子！

下图为一个CSS盒子模型的内部结构：