深入了解CSS中盒子模型

原文:深入了解CSS中盒子模型

CSS中盒子模型介绍#

  • 什么是盒子？
  • 盒子是用来存储物品，我们可以将盒子理解为酒盒，酒盒有什么组成的呢？ 有酒可以喝、有填充物保护酒防止酒被摔坏、纸盒子。
  • 我们怎么理解CSS中的盒子呢，CSS中盒子有什么组成的呢？有内容、内边距、边框、外边距。
  • CSS中盒子的主要属性有5种如：width宽度、height高度、padding内边距、border边框、margin外边距。

CSS中盒子模型实践#

  • CSS中盒子模型实践，给大家看看我们CSS中的盒子长什么样。

  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*这里的宽度指的就是盒子内容的宽度*/
      width: 100px;
       /*这里的高度值的就是盒子内容的高度*/
      height: 100px;
      /*内边距就是盒子里面的内容到边框的距离*/
      padding: 30px;
      /*这个就是指盒子的外边框*/
      border: 1px solid red;
      /*这个就是指盒子的外边距，盒子与盒子之间的距离*/
      margin: 20px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
  • 结果图

  • 如何计算一个盒子的总宽度和总高度，笔者那宽度举例：一个盒子的总宽度=盒子内容宽度 +左右2边内边距+左右2边边框线。

  • 注意：一个盒子的高度一般情况下不设置高度，因为一个盒子的高度它应该是由其内容来决定的。

padding内边距介绍#

  • padding内边距的意思就是指的盒子中间的内容与边框的这段距离。
  • padding内边距分为4个方向，所以我们能够设置或描述这4个方向的内边距。
  • padding内边距属性值说明表：
属性值 描述
padding-top 设置向上的内边距的距离。
padding-bottom 设置向下的内边的距距离。
padding-left 设置向左的内边距的距离。
padding-right 设置向右的内边距的距离。
padding 设置上下左右内边距的距离，是上面的属性值缩写。

padding内边距实践#

  • 我们将div标签设置内边距，实践内容如：将div标签上边内边距设置为20px、下边内边距设置为30px、左边边距设置为40px、右边内边距设置为50px。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*这里的宽度指的就是盒子内容的宽度*/
      width: 100px;
       /*这里的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding-top: 20px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 50px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
  • 结果图

padding内边距缩写实践#

  • 缩写是有方向的可以同时表示四个方向，但是这个padding属性的方向是有顺序的，顺序规则如：上、右、下、左。
  • padding属性值有4个，接下来我们就一一试试看看会有什么效果呢。
  • 我们给padding属性设置1个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*这里的宽度指的就是盒子内容的宽度*/
      width: 100px;
       /*这里的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
  • 结果图

  • 注意：假设我们给padding属性值设置了1个值为：padding: 20px;表示上、右、下、左、方向的内边距都为20px像素。

  • 我们给padding属性设置2个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*这里的宽度指的就是盒子内容的宽度*/
      width: 100px;
       /*这里的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
  • 结果图

  • 注意：假设我们给padding属性值设置了2个值如：padding: 20px 30px;表示内边距的（上、下）为20px像素、（左、右）为30px像素。

  • 我们给padding属性设置3个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*这里的宽度指的就是盒子内容的宽度*/
      width: 100px;
       /*这里的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px 40px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
  • 结果图

  • 注意：假设我们给padding属性值设置了3个值如：padding: 20px 30px 40px;表示内边距的上为20px像素、（左、右）为30px像素、下为40px像素。

  • 我们给padding属性设置4个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*这里的宽度指的就是盒子内容的宽度*/
      width: 100px;
       /*这里的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px 40px 50px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
  • 结果图

  • 注意：假设我们给padding属性值设置了3个值如padding: 20px 30px 40px 50px;表示内边距的上为20px像素、右为30px像素、下为40px像素、左为50px像素。

margin外边距介绍#

  • margin外边距的意思就是指的盒子与盒子之间的距离。
  • margin外边距分为4个方向，所以我们能够设置或描述这4个方向的外边距。
  • margin外边距属性值说明表：
属性值 描述
margin-top 设置向上的外边距的距离。
margin-bottom 设置向下的外边的距距离。
margin-left 设置向左的外边距的距离。
margin-right 设置向右的外边距的距离。
margin 设置上下左右外边距的距离，是上面的属性值缩写。
auto 自动。

margin上下外边距实践#

  • 我们将class属性值为.top元素设置上外边距为20px像素并且将class属性值为.bottom设置下外边距为20px像素。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    .bottom{
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: 20px;
    }
    .top{
      width: 100px;
      height: 100px;
      background-color: slateblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
   <div class="bottom"></div>
   <div class="top"></div>
</body>

</html>
  • calss属性值为.bottom结果图

  • calss属性值为.top结果图

  • 注意：两张图有什么区别呢，事实证明外边距竖直方向的margin的属性值不会叠加，它会取最大的属性值，大家要明白哦。

margin左右外边距实践#

  • 我们将class属性值为.right元素设置右外边距为20px像素并且将class属性值为.left设置左外边距为20px像素。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .left{
       background-color: slateblue;
       margin-left: 20px;
     }
     .right{
        background-color: red;
        margin-right: 20px;
     }
  </style>
</head>

<body>
  <span class="right">right</span>
  <span class="left">left</span>
</body>
</html>
  • calss属性值为.right结果图

  • calss属性值为.left结果图

  • 注意：两张图有什么区别呢，事实证明外边距水平线方向margin的属性值会叠加。大家要明白哦。

  • 若想让竖直方向的margin属性值叠加外边距的距离咱也是有办法如：将要设置margin属性的元素进行浮动即可，元素浮动之后它的margin属性值就会叠加，若有读者朋友不熟悉浮动的可以看看笔者之间发布的CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了文章。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box{
       width: 110px;
       border: 2px solid red;
       overflow: hidden;
     }
     .bottom{
       width: 100px;
       height: 100px;
       background-color: slateblue;
       float: left;
       margin-bottom: 20px;

     }
     .top{
        width: 100px;
        height: 100px;
        background-color: darkblue;
        float: left;
        margin-top: 20px;
     }
  </style>
</head>

<body>
   <div class="box">
     <div class="bottom"></div>
     <div class="top"></div>
   </div>
</body>

</html>
  • calss属性值为.bottom结果图

  • calss属性值为.top结果图

margin外边距缩写实践#

  • 缩写是有方向的可以同时表示四个方向，但是这个margin属性的方向是有顺序的，顺序规则如：上、右、下、左。
  • margin属性值有4个，接下来我们就一一试试看看会有什么效果呢。
  • 我们给margin属性设置1个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*这里的宽度指的就是盒子内容的宽度*/
     width: 100px;
     /*这里的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
  • 结果图

  • 注意：假设我们给margin属性值设置了1个值为： margin: 20px;表示上、右、下、左、方向的外边距都为20px像素。

  • 我们给margin属性设置2个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*这里的宽度指的就是盒子内容的宽度*/
     width: 100px;
     /*这里的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
  • 结果图

  • 注意：假设我们margin属性值设置了2个值如：margin: 20px 30px;表示外边距的（上、下）为20px像素、（左、右）为30px像素。

  • 我们给margin属性设置3个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*这里的宽度指的就是盒子内容的宽度*/
     width: 100px;
     /*这里的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px 40px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
  • 结果图

  • 注意：假设我们给margin属性值设置了3个值如：margin: 20px 30px 40px;表示外边距的上为20px像素、（左、右）为30px像素、下为40px像素。

  • 我们给margin属性设置4个值实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*这里的宽度指的就是盒子内容的宽度*/
     width: 100px;
     /*这里的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px 40px 50px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
  • 结果图

  • 注意：假设我们给margin属性值设置了4个值如margin: 20px 30px 40px 50px;表示外边距的上为20px像素、右为30px像素、下为40px像素、左为50px像素。

margin属性居中介绍#

  • margin属性值设置为auto，auto表示自动的意思，当左外边距与右外边距的值都是auto时那么这个盒子就会水平居中。
  • 用margin属性设置水平居中注意事项如：
  • 1、一定要给盒子设置固定的宽高度。
  • 2、只有块级元素才可以实现水平居中，行内元素不能够实现水平居中。
  • 3、只有标准文档流中的盒子才可以使用margin属性来实现水平居中。
  • 4、margin属性是用来实现盒子的水平居中，而不是文本的水平居中。

margin属性值为auto实践#

  • 我们将使用margin属性值为auto实现盒子水平线左居中的实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{
        width: 100px;
        height: 100px;
        background-color: red;
         margin-left:auto;
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
  • 结果图

  • 我们将使用margin属性值为auto实现盒子水平线居中的实践。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left:auto;
        margin-right: auto;

     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
  • 结果图

  • 注意：margin属性值为auto设置上下外边距不起任何作用。

  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom:auto;
        margin-top: auto;

     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
  • 结果图

注意事项一#

  • 用实践来证明为什么：一定要给盒子设置固定的宽高度。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{

        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;

     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
  • 结果图

  • 注意：如果该元素没有设置固定的宽度，那么该元素会占据其父元素的100%宽度，所以不能够实现水平线居中。

    注意事项二#

  • 用实践来证明为什么：只有块级元素才可以实现水平居中，行内元素不能够实现水平居中。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;

     }
  </style>
</head>

<body>
   <span class="box">微笑是最初的信仰
   </span>
</body>

</html>
  • 结果图

  • 注意：因为行内元素不能设置宽度，所以无法实现水平线居中。

注意事项三#

  • 用实践来证明为什么：只有标准文档流中的盒子才可以使用margin属性来实现水平居中。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
        float: left;
     }
  </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>
  • 结果图

  • 注意：笔者给class属性值为.box设置了一个float: left;左浮动，浮动的元素已经脱离了标准文档流，所以无法实现水平线居中。

注意事项四#

  • 用实践来证明为什么：margin属性是用来实现盒子的水平线居中，而不是盒子的内容文本水平线居中。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{
        width: 200px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
     }
  </style>
</head>

<body>
   <div class="box">
     微笑是最初的信仰
   </div>
</body>

</html>
  • 结果图

注意事项五#

  • 如果想让文本居中怎么办呢，使用text-align属性并且属性值为center才可以实现文本水平线居中。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>

     .box{
        width: 200px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
     }
  </style>
</head>

<body>
   <div class="box">
     微笑是最初的信仰
   </div>
</body>

</html>
  • 结果图

原文地址：https://www.cnblogs.com/lonelyxmas/p/11993866.html

时间： 2024-12-22 23:30:06

深入了解CSS中盒子模型的相关文章

CSS系列：CSS中盒子模型

盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中,一个独立的盒子模型由content(内容).border(边框).padding(内边接)和margin(外边距)4个部分组成.

css中盒子模型与box-sizing属性

盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的width为包含了border,padding,使得最终呈现的宽度 为定义的width,有margin另加 box-sizing:使盒子为ie模式呈现 content-sizing:使盒子w3c模式下 呈现 一般初始全局css样式: *, *:before, *:after { -moz-box-si

CSS之盒子模型与面向对象

从接触B/S到今天才三天,学习了二十几集的牛腩,在web设计的时候学到了CSS的盒子模型,感觉这个东西是真的好,一个简单的盒子理论就把一个网页设计的全部概括了,简直是抽象的一个杰出代表,这里就把自己对盒子的认识写出来,看完后相信大家会觉得盒子其实也就那么回事. 什么叫盒子 说到盒子,鞋盒,饭盒,总之是装东西的东西,所以在web中,他也是指装东西的一个容器. 盒子和OOP的比较 说道web盒子,我们先给大家一些名词:内容(content).填充(padding).边框(border).边界(mar

这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则)

css的盒子模型(转)

转自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 w3c 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. ie 盒子模型 从上图

深入理解CSS系列（一）：理解CSS的盒子模型

接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森破罢了.如果真的那么简单,为什么经常会遇到一些奇怪的样式问题,而要折腾好长时间呢?就是因为无从下手,终究还是基础不扎实啊!最近打算深入的学习一下CSS,以便遇到问题时,才知道如何下手,从而迅速的对症下药."深入理解"只是相对于我个人而言的哈,如果有大神觉得不够深入,请不喜勿喷.这是深入理解

CSS弹性盒子模型

<!-- # 用于学习css弹性盒子模型 - 是一种一维的布局模型.给flexbox的子元素之间提供了强大的空间分布和对齐能力 - display:flex 设置为弹性盒子 - flexbox内flex元素的默认属性 - 元素排列为一行 (flex-direction 属性的初始值是 row). - 元素从主轴的起始线开始. - 元素不会在主维度方向拉伸,但是可以缩小. - 元素被拉伸来填充交叉轴大小. - flex-basis 属性为 auto. - flex-wrap 属性为 nowrap.

CSS之盒子模型

盒子模型在CSS中是个很重要的概念.它是CSS可视化格式化系统的基石.盒子模型可以用于元素定位和网页布局.根据CSS盒子模型的规定,每个元素(不管是内嵌元素还是块级元素)都会产生一个矩形盒子围绕在元素内容之外.这个盒子我们称之为元素盒.当然还有其他盒子,这里我们主要说说元素盒. 下面是一张盒子模型的示意图: 从上图我们不难看出一个完整的盒子包括:内容(content).填充(padding).边框(border).边界(margin) 那我们来分别说说上面这四个部分. 首先是内容content

css 大话盒子模型

什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(margin) 的方式.在HTML文档中,每个元素(element)都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在. 什么是Box Model? 为什么要理解盒子模型? 因为(能够更好的装逼)? 如果你理解了盒子模型,你就能知道这个东西在页面上面的大小,既