css盒子模型_css的盒子模型是什么

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

css盒子模型又称为框模型 (Box Model) ，包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素组成了盒子模型。

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框(border)，然后最外层是外边距(margin)，整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度。

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

特点

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

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

结构编辑

内容(CONTENT)就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子(DIV嵌套)，与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，每个HTML标记都可看作一个盒子；

css盒子模型_css的盒子模型是什么相关推荐

web前端入门学习 css（4）（盒子模型）
文章目录盒子模型(box model) 盒子模型的组成边框 border 边框的简写,边框的分开写法(分别写上下左右边框) 利用边框的层叠性简化书写代码(小技巧) 给表格table和单元格td和表 ...
Web前端开发笔记——第三章 CSS语言第五节盒子模型
目录一.CSS布局与定位二.盒子模型三.盒子模型的组成四.设置边框的属性五.设置外.内边距的属性六.overflow 属性结语一.CSS布局与定位在CSS中对一个网页进行布局与定位, ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
CSS三大模块(一)：盒子模型
目录前言: 一.盒子模型 1.盒子模型的内容 2. 盒子模型的总宽度和总高度二.盒子模型的相关属性 1.边框属性(border) (1). 边框线样式: border-style: 属性值; (2 ...
CSS初识- 选择器背景浮动盒子模型
CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边 ...
css盒模型以及如何计算盒子的宽度
css盒模型以及如何计算盒子的宽度盒模型每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子1. 每个盒子都可以看成由4部分组成,它们分别是 - 元素外边距(margin).元素边框(borde ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...

css盒子模型_css的盒子模型是什么

css盒子模型_css的盒子模型是什么相关推荐

最新文章

热门文章