css盒子模型的理解（css盒子模型的理解和认识）

大家好！今天让创意岭的小编来大家介绍下关于css盒子模型的理解的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

• 1、盒子模型介绍

• 2、请简述 css 盒子模型与css怪异盒模型

• 3、介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的

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

一、盒子模型介绍

概念： 盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的 容器。

作用： CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地 丰富 和 促进 各个盒子乃至整个 HTML 文档的 表现效果和布局结构 。

组成： 每个盒子都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin），4个属性组成。

每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

一、内容(content)

     宽度width和高度height属性设置，对盒子内容大小的大小进行控制

二、内边距（padding）

padding属性用于设置内边距。 是指边框与内容之间的距离。

a）padding-top、padding-right、padding-bottom、padding-left

        b)  padding: 1px 2px 3px 4px(  顺时针 )

注意： 后面跟几个数值表示的意思是不一样的。值的个数表达意思：

            1个值padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素

            2个值padding:  上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素

            3个值padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素                                     左右是5像素 下是10像素

            4个值padding:  上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px                                 15px; 表示 上3px 右是5px 下 10px 左15px

三、盒子边框（border）

border 属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。

1、定义宽度

a） border-top-width、border-bottom-width、border-left-width、border-right-width 

b） border-width:2px;                      

                     border-width:1px 2px 3px 4px;               

　 注意： 当定义边框宽度时，必须要定义边框的显示样式，由于 默认样式为none ,所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。

2、定义颜色

Demo:border-top-color: green;  border-color: yellow;

3、定义样式 border-style:

                    hidden:隐藏边框(IE 不支持)                 dotted:点线

                    dashed:虚线             solid:实线            double:双线边框

4、复合属性

        综合写法：border : border-width || border-style || border-color

         注意：顺序不能错误。

5、圆角边框（CSS3）：

    语法：border-radius: 左上角  右上角  右下角  左下角;

    Demo：border-radius: 10px;       /*  一个数值表示4个角都是相同的 10px 的弧度 */

                        border-radius: 50%;         /*  100px   50% 取宽度和高度 一半  */

四、外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离， 这段空白通常不能放置其他内容。

margin-top、margin-right、margin-bottom、margin-left

margin:1px 2px 3px 4px(  顺时针 )

常用功能：

一、盒子水平居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

               块级元素和盒子必须指定宽度（width）

        左右的外边距都设置为auto，就可使块级元素水平居中。

二、外边距合并

    margin的外边距合并（margin collapsing）

           margin属性有一个特别的行为，就是外边距合并，这个行为只对普通文档流中的块级元素的 垂直外边距有效； 行内框（inline-block）、浮动元素和绝对定位的原素不会发生外边距合并。

        发生外边距合并的两种基本情况：

        1、两个或多个垂直毗邻的兄弟元素，上面元素的下边距会与下面元素的上边距发生合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

        2.父元素和子元素之间，父元素的上外边距和第一个子元素的上外边距、父元素的下外边距和最后一个子元素的下外边距。发生这种情况的前提是父元素和第一个（或最后一个）子元素之间不存在边框和内边距把外边距分隔开，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

三、盒子模型和box-sizing

        box-sizing是用来 设置width、height的作用对象 的。

        三个值:content-box(默认值) 、  border-box 、inherit（继承父类）;

         注意：没有margin-box

        box-sizing:conten-box，width=元素的内容区    (标准盒子模型)

        box-sizing:border-box，width=元素内容区+padding+border  (IE盒子模型)

四、背景剪裁 (Background clip)

        当我们给一个元素设置background-color和background-imge时，这个背景会覆盖到元素border的外边界，background-clip属性可以用来 调整背景所覆盖的区域:

        border-box:背景延伸到边框外，默认值

        padding-box：背景延伸到内边距外，但是不会绘制到border。

        content-box：背景被裁剪至内容区（content box）外沿。

五、溢流（overflow）

        当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow 属性。 最常用的：

        hidden：溢出部分不会显示

        visible：默认值，子元素会从父元素溢出，在父元素外部显示

        scroll：生成两个滚动条，通过滚动条来查看完整的内容

        auto：根据需要生成滚动条

六、轮廓(Outline)

        盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。

七、盒子显示（display）类型

        display 三种常见的值为 block、inline、inline-block

                    block（块盒）：盒子之前以及之后的内容出现在不同的行上

                    inline （行内盒）：与块盒相反：与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行（宽度和高度设置对行内盒无效，在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。）；

                    inline-block（行内块盒）：

          介于前两者之间：

                   像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；

                   像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行。

          块级元素默认设置为 display: block; ，行内元素默认设置为 display: inline 。

display: flex  — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。

二、请简述 css 盒子模型与css怪异盒模型

1、盒模型与怪异模型的设置

当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

2、盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），

元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分，

这就是盒子模型。

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

3、怪异盒模型

在怪异模式下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

三、介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的

1.网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

2.这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

3.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

参考地址：http://baike.baidu.com/link?url=oLkRp6pcOqFwPmPxpdsblEm2YarVt-MC5j1qWWkAX1x_R5_qIjBu4BWStxprusf3q80ihaVQQzRr2e1yPvp9pdBgy9Oo9ndFjejYPmWwTioTsKvMP1LW9IHlmGxNsBNV

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

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin).在黑马程序员学习时候就会有老师教过，

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

以上就是关于css盒子模型的理解相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

云服务ecs快照（云服务ecs快照是啥意思）

中国船舶cssc全称（中国船舶xd）

css3中背景渐变（css3背景渐变图片）

每日一问的经典问题

好的电商平台有哪些（好的电商平台有哪些）