关键词：
参考技术A转自 菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
转自 链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
css盒子模型及float和position
CSS盒模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括外边距（marign），边框（border），填充（padding），内容物（content）盒子模型的类型：W3C标准和模型和IE盒模型（怪异盒模型）W3C标准盒模型：属性width和height只包... 查看详情
css盒子模型及float和position
CSS盒模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括外边距（marign），边框（border），填充（padding），内容物（content）盒子模型的类型：W3C标准和模型和IE盒模型（怪异盒模型）W3C标准盒模型：属性width和height只包... 查看详情
盒子模型及层模型定位
首先需要说明，盒子模型是针对HTML元素的每一个标签的！因为HTML中每一个标签都符合盒子模型的特点！CSS框模型(BoxModel)规定了元素框处理元素内容、内边距、边框和外边距的方式。如下所示： 需要注意： 盒子... 查看详情
css盒子模型
本章内容内边距（padding）外边距（margin）盒子宽度计算规则盒子边框设置（border）盒子宽度及盒子宽度范围设置行内与块级元素的转换（display）盒子模型示意图. 一、内边距A、指盒子内容到盒子边框的距离B、设置四边的距... 查看详情
css盒子模型
CSS盒子模型：content（内容）、padding（内边距）、border（边框）、margin（外边距）。 内容：盒子中间装的东西。 内边距：盒子里装的东西和边框的距离。 边框：1pxsolidred；（第一个属性是边框的宽度；第二个属性是... 查看详情
28.前端css之盒模型及标准文档流
...局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。 盒模型有两种：标准模型和IE模型。这里重点学习标准模型。盒模型示意图：盒模型属性：width：内容的宽度height:内容的高度padding... 查看详情
50道css基础面试题及答案
1介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+border+padding+margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin2box-sizing属性？用来控制元素的盒子... 查看详情
css盒子模型
标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型分两种：ie盒子模型和标准w3c盒子模型。从上图可以看到标准w3c盒子模型的范围包括margin、border... 查看详情
css盒子模型
... 简书原文：https://www.jianshu.com/p/366665ab9c1c大纲 1、CSS盒子模型的概念 2、行内元素是否也属于盒子模型呢？ 3、标准盒子模型和IE盒子模型 4、box-sizing：设置盒子模型 5、盒子模型是有空间的1、CSS盒子模型的概... 查看详情
[css弹性盒子模型box-flex及相关属性]box-flex属性弹性盒子模型讲解及实例演示
...”box-flex”理解为”房子-分配”。box为“盒子&rdquo 查看详情
css盒子模型
盒子模型： 浏览器会将html每个元素都看做是一个矩形的盒子 边框：border：粗细类型颜色 /上下左右 border-color:上右下左 border-color:上下左右 &n 查看详情
css盒子模型
...16-10-22《css入门经典》第6章1.每个HTML元素对应于一个显示盒子，但不是所有的元素都显示在屏幕上。2.HTML元素显示为CSS显示盒子的真正方法称为“可视格式化方式”。可视格式化方式告诉浏览器应该如何在屏幕上显示HTML内容。3.... 查看详情
css盒子模型
盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下： 把元素叫做盒子，设置对应的样式分别为：盒子的边框(borde... 查看详情
标准w3c盒子模型和ie盒子模型css布局经典盒子模型(转)
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是ie盒子模型和标准w3c盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型： 从上图可以看到标准w3c... 查看详情
浮动布局及盒子模型
...背景样式、列表样式比较麻烦，还需要多加练习。学习了盒子模型，内容不是很多，但需要注意的地方很多：首先在设置css样式的时候先初始化*margin：0px；padding：0px；学习了div标签：不是功能标签，可以放文字图片以及各种元... 查看详情
标准w3c盒子模型和ie盒子模型css布局经典盒子模型(转)
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是ie盒子模型和标准w3c盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型： 从上图可以看... 查看详情
css-盒子模型
W3C和IE盒子模型1)W3C定义的盒子模型包括margin、border、padding、content，元素的width=content的宽度2).IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border我个人认为W3C定义盒子模型与IE定义的盒子模型，IE... 查看详情
css中的盒子模型
盒子模型当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型（CSSbasicboxmodel），将所有元素表示为一个个矩形的盒子（box）。CSS决定这些盒子的大小、位置以及属性（例如颜色、背景、... 查看详情