实验原理

css盒子模型(Box Model)

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:

1、边距

2、边框

3、填充

4、实际内容

盒模型允许我们在其他元素和周围边框之间的空间放置元素,平面图如下所示:

div盒子行内元素 html5 div盒子样式_CSS

  • Margin(外边距)-盒子以外或者盒子与盒子之间的距离,外边距是透明的
  • Border(边框)-盒子厚度
  • Padding(内边距)-内容和盒子之间的距离
  • Content(内容)-盒子的内容 ， 显示文本和图像

说明

  1. 元素框的最内部分(element)是实际的内容，有宽(width)和高(height)两个属性，直接包围内容的是内边距(padding)。内边距呈现了元素的背景，内边距的边缘是边框（border)，边框是可以有厚度的。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
  2. 内边距、边框和外边距都是可选的，默认值是0.可以通过将元素的margin和padding设置为0来覆盖浏览器样式，可以分别进行，也可以使用全局选择器进行设置:
*{
    margin:0;
    padding:0;
}
  1. 盒子模型属性（margin、padding、border)顺时针分为：上右下左4个方向，3个属性都可以分别设置各个方向属性值，也可以同时设置4个方向属性值，3个属性都占据空间

CSS盒子模型(Box Model)尺寸

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边框不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70个像素，请看下图：

div盒子行内元素 html5 div盒子样式_内边距_02

#box {
    width:70px;
    margin:10px;
    padding:5px;
}

内边距、边框和外边距可以应用于一个元素的所有边，已可以应用于单独的边，而且外边距可以是负值，而且在很多情况下都要使用负值的外边距。

DIV盒子模型

<div>元素常用用作布局工具，和css盒子结合起来用来构建网页的整体布局

《一》 CSS边框属性border

CSS允许制定一个元素边框的样式和颜色

  • border-style属性用来定义边框的样式。
    border-style :
          none:默认无边框;
          dotted:定义一个虚线边框；
          solid:定义实线边框
  • border-width 边框指定宽度。
    为边框指定宽度有两种方法：可以指定长度值，比如2px 或 1em(单位为 px , pt ,cm ,em等)，或者使用
    3个关键字之一：
          thick、
          medium(默认)、
          thin。
  • border-color属性用于设置边框的颜色。可以设置的颜色：
    name-指定颜色的名称，如"red";
    RGB-指定RGB值，如"rgb(252,450,9)";
    Hex-指定16进制值，如"ff0000"
  • 可以再一个属性中设置边框：border:5px solid red;

注意： border-color单独使用是不起作用的，必须先使用border-style来设置边框样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        p.p1{
            border-style:none;
            border-width: 5px;
            border-color: red;
        }
        p.p2{
            border-style:dotted;
            border-width: 6px;
            border-color: #98bf21;
        }
        p.p3{
            border-style: dashed;
            border-width: 4px;
            border-color: rgb(252,450,9);
        }
        p.p4{
            border: medium solid pink;
        }
    </style>
</head>
<body>
    <p class="p1">无边框</p>
    <p class="p2">虚线边框</p>
    <p class="p3">虚线边框</p>
    <p class="p4">实线边框</p>
</body>
</html>

《二》CSS padding（内边距）和margin

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距，具体如下所示：

div盒子行内元素 html5 div盒子样式_外边距_03


当然也可以简写：padding:25px 50px；表示上下填充为25px ，左右填充为50px

box2.html 代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style type="text/css">  
        *{  
            padding: 0;  
            margin: 0;  
        }  
        .box{  
            width: 800px;  
            height: 400px;  
            border: 5px solid red;  
        }  
        .box1{  
            /* 设置背景*/  
            background: pink;  
            /*设置padding*/  
            padding-top:25px;  
            padding-bottom:25px;  
            padding-right:50px;  
            padding-left:50px;  
            /*设置宽高*/  
            width: 200px;  
            height: 150px;  
            /*设置margin*/  
            margin-top:100px;  
            margin-bottom:100px;  
            margin-right:50px;  
            margin-left:50px;  
            /*让box1左浮动*/  
            float: left;  
        }  
  
        .box2{  
            /* 设置背景*/  
            background: deeppink;  
            /*设置padding,上下20px，左右20px*/  
            padding: 20px 20px;  
            /*设置宽高*/  
            width: 200px;  
            height: 150px;  
             /*设置margin*/  
            margin:100px 50px;  
             /*让box2左浮动，box2会浮动在box1的右边*/  
            float: left;  
        }  
  
    </style>  
</head>  
<body>  
<div class="box">  
    <div class="box1">  
        I am is box1  
    </div>  
    <div class="box2">  
         I am is box2  
    </div>  
</div>  
</body>  
</html>