`

css 理解 盒子模型

    博客分类:
  • CSS
阅读更多

转:http://hi.baidu.com/bingling737/blog/item/4474a535ab8a9788a61e12da.html

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

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

分享到:
评论

相关推荐

    CSS 理解盒子模型

    CSS盒模型是网页布局的基础,它是CSS样式中用于描述元素占据空间的方式。理解盒模型对于任何想要精通网页设计的人来说都是至关重要的。盒模型定义了元素的总尺寸,包括内容(content)、内边距(padding)、边框(border)...

    CSS下盒子模型定位浅析.pdf

    理解盒子模型对于网页布局至关重要。 **1. 盒子模型** 1.1 盒子模型的概念 每个HTML元素都可以视为一个盒子,盒子由内容区域(content)、内边距(padding)、边框(border)和外边距(margin)组成。元素的实际尺寸是这些...

    CSS盒子模型教程PPT课件.pptx

    盒子模型的应用包括调整网页中的对齐方式、理解盒子的各个属性、理解空格的影响、理解 body 标记的 margin 属性、如何利用 CSS 控制页面特定的元素。 5. 盒子之间的关系 盒子之间的关系包括 HTML 与 DOM、标准文档...

    CSS+DIV-盒子模型示例.zip

    "CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念,它将每个HTML元素视为一个具有边距(margin)、边框(border)、内填充(padding)和实际内容的矩形...

    CSS盒子模型结构

    CSS 盒子模型结构剖析 CSS 盒子模型结构是 div+css 技术的基础组成部分,它主要解决了传统的 table 表格嵌套问题。盒子模型可以看成是网页的一个区块,也可以看成是大区块中的一个“区块元素”。既然是区块,...

    配图详细讲解CSS的盒子模型

    本文通过配图详细解释了CSS盒子模型,并提供了一个具体的几何题来帮助理解各个部分的宽度计算。 首先,我们来看水平方向的宽度计算。以题目中的例子为例: 1. `a` 是body元素的左外边距,由于设置为0,所以`a`的值...

    css盒子模型

    深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中,我们将探讨盒子模型的各个组成部分,以及如何在实际项目中灵活运用。 盒子模型主要由四个部分组成:内容区域(Content)、内边距(Padding)、...

    CSS盒子模型的应用

    理解盒子模型对于精确控制页面布局至关重要。本篇文章将深入探讨CSS盒子模型的应用,并提供实例以帮助你更好地掌握这一关键技能。 **1. CSS盒子模型的基本概念** CSS盒子模型,也称为盒状模型,将每个HTML元素视为...

    CSS盒子模型.rar

    理解盒子模型的尺寸计算对于精确布局至关重要。元素的总宽度和总高度是这些部分的累加: - **总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右边距** - **总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下边距*...

    CSS中的盒子模型(图片)

    理解盒子模型对于精确控制网页元素的布局至关重要,特别是当需要处理元素之间的间隔、对齐和响应式设计时。通过调整这些属性,开发者能够创建出各种复杂且美观的布局。 三张图片可能分别展示了以下内容: 1. 盒子...

    CSS盒子模型 图片演示

    CSS盒子模型是网页布局的基础,它是CSS(Cascading ..."盒子模型.jpg"这个文件很可能是对CSS盒子模型的直观图示,可以帮助进一步理解这个概念。在实际工作中,结合这样的图形资源,可以更方便地学习和传授CSS布局知识。

    css学习 盒子模型 css基础

    接下来,盒子模型是理解CSS布局的关键。在CSS中,每个元素都被视为一个矩形的“盒子”,包括内容区域、内边距(padding)、边框(border)和外边距(margin)。这个模型帮助我们理解元素占据的空间和相互之间的间距...

    css盒子模型-京东快报

    CSS盒子模型是CSS布局的基础,理解和掌握它对于网页设计至关重要。"京东快报"可能是一个项目或者课程,涉及到使用CSS来构建符合京东风格的页面布局。在这里,我们将深入探讨CSS盒子模型及其在实际应用中的运用。 **...

    Css盒子模型入门指导

    理解盒子模型有助于创建响应式、可扩展的网页布局。通过调整元素的宽高、内填充、边框和外边距,设计师可以精确控制网页元素的位置和尺寸。此外,使用CSS盒子模型进行布局可以实现代码的简洁性和可维护性,使网页在...

    盒子模型.xmind

    这是盒子模型的思维导图,便于理解CSS这一核心,通过思维导图我们可以成体系的理解盒子模型,便于学习和记忆

    css盒子模型1

    css盒子模型视频简介上帮助理解社么是盒子模型

    css 盒子模型彻底解析

    CSS 盒子模型是网页设计中至关重要的概念,它定义了HTML元素在页面上占用空间的方式。这个模型包括四个主要部分:内容(content)、内边距...因此,深入理解和熟练掌握CSS盒子模型是每个前端开发者必备的技能之一。

    css 盒子模型理解1

    CSS盒子模型是网页布局的核心,理解它对于任何前端开发者来说都是至关重要的。盒子模型由四个主要部分组成:内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容区域是元素实际显示的数据...

Global site tag (gtag.js) - Google Analytics