网页制作盒子模型理解（面试题：怎么理解盒模型）

本文目录

• 面试题：怎么理解盒模型
• css盒模型是什么
• 前端里面什么是盒子模型
• css盒子模型的深入理解，在块级、行内元素的区别和特性
• 什么是盒子模型啊能举个实际的例子吗
• 什么是css盒子模式（框模型）
• 什么是css的盒子模型

面试题：怎么理解盒模型

回答问题的时候要整理思路，也就是你的思考方式是怎么样的？

1） 盒模型有两种，W3C 和IE 盒子模型

    1、W3C定义的盒模型包括margin、border、padding、content，元素的宽度width=content的宽度

    2、IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的width=border + padding + content

2） 对盒模型的理解

    IE定义的盒模型较为合理，所以在css3中新增了box-sizing，包含两个属性content-box和border-box。

    （1） content-box 元素的width = content

    （2） border-box 元素的width = border + padding + content

3）更多理解

     对于行内元素 margin-top/margin-bottom对于上下元素无效，margin-left/margin-right有效

     对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则

        （1） 都是整数 margin值取两者的最大值

        （2） 都是负数 margin值取最小值

        （3）两者正负相反，margin值取两者之和

再往深的说就是bfc的理解了。

css盒模型是什么

css盒模型是重点。如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学 习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS 排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界左边框左填充内容右填充右边框右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

前端里面什么是盒子模型

盒子模型：当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子。
组成：一个盒子由四个部分组成：content（内容）、padding（内边距）、border（边框）、margin（外边距）
盒子总宽度 = width(内容宽度) + padding + border + margin;
盒子总高度 = height(内容高度) + padding + border + margin

css盒子模型的深入理解，在块级、行内元素的区别和特性

盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的3D属性,css盒子3D模型从上到下分为5层：1、border；2、content+padding；3、background-image；4、background-color；5、margin。

目前有： 标准盒子模型和IE盒子模型 2种盒模型 ，区别在于：

为了满足跨浏览器的差异，我们比较肯定的方式是使用标准盒模型，这里通过在网页顶部增加DOCTYPE的声明，来解决跨浏览器兼容方案（或者使用css3的声明方式）：

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。

行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化，另外

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table...

行内元素(内联元素)：a , span, strong, em, br , img , input, label, select, textarea, cite....

如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。

CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值：

box-sizing:content-box： W3C标准盒模型，默认属性。padding和border不被包含在定义的width和height之内。

box-sizing:border-box： IE6混杂模式盒模型， padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。

box-sizing：inherit ： 从父级元素中继承该属性。

如果设置box-sizing：border-box来使用IE6混杂盒模型 ，那么

设置padding与border后，内容区的宽度和高度被压缩为70px 70px,盒子的原尺寸仍然是100px 100px

当一个容器宽度定义为 width:100%; 之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的。如果使用该样式，指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出，而是向内收缩的，这个效果是非常实用的。

什么是盒子模型啊能举个实际的例子吗

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin).CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(border)就是盒子纸板的厚度；至于外边距(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。内容(content)就是盒子里装的东西. 在网页设计上，内容(content)常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。如果你想学前端，那么，传智播客适合你，现在基础班都是免费的！还有不明白的问题，可以直接问我

什么是css盒子模式（框模型）

　　CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
　　网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，
CSS盒子模式都具备这些属性。
　　这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
　　每个盒子都有：边界、边框、填充、内容四个属性；
　　每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

什么是css的盒子模型

CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。

CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。

扩展资料：

CSS盒子模型特点：

1、丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

3、多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。