盒子模型（Box Model）

所谓盒子模型：

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

盒子里面的文字和图片等元素是内容区域

盒子的厚度我们成为盒子的边框

盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

盒子边框（border）

border : border-width 定义边框粗细，单位是px || border-style   边框的样式|| border-color 边框颜色

表格的细线边框

通过表格的cellspacing=“0”,将单元格与单元格之间的距离设置为0，

但是两个单元格之间的边框会出现重叠，从而使边框变粗

通过css属性：
table{ border-collapse:collapse; }

collapse 单词是合并的意思

border-collapse:collapse; 表示相邻边框合并在一起。

内边距（padding）

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

当我们给盒子指定padding值之后，发生了2件事情：

内容和边框有了距离，添加了内边距。

盒子会变大了。

1个值

padding：上下左右内边距;

2个值

padding: 上下内边距左右内边距；

3个值

padding：上内边距左右内边距下内边距；

4个值

padding: 上内边距右内边距下内边距左内边距；

内盒尺寸计算（元素实际大小）

宽度
Element Height = content height + padding + border （Height为内容高度）
高度
Element Width = content width + padding + border （Width为内容宽度）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

padding不影响盒子大小情况

如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。

外边距

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

块级盒子水平居中

可以让一个块级盒子实现水平居中必须：

盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，

常见的写法，以下下三种都可以。- margin-left: auto;   margin-right: auto;
- margin: auto;
- margin: 0 auto;

文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中左右margin 改为 auto

插入图片和背景图片区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

清除元素的默认内外边距

* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */
}

盒子模型（Box Model）相关推荐

教你吃透CSS的盒子模型(Box Model)
目录 CSS 盒子模型(Box Model) 元素的宽度和高度浏览器的兼容性问题 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&q ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
什么是盒模型(Box Model)
什么是盒模型(Box Model) 盒模型规定了网页元素如何显示以及元素间相互关系,它本质上是一个盒子,封装周围的HTML元素.css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区 ...
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...
CSS 框模型概述术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...
[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式...
实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
sizebox模型下载_Beware of box model size (留心盒子模型大小)
文章为csslint中文版译文,点击原文可查看英文版,如遇到翻译错误或错别字啥的,请留言指出~ 译文内容不定期更新~ 返回目录盒子模型是CSS当中最常误解的内容之一."盒子模型 (Box ...
html中怎么让盒子模型居中,通过box盒子模型给元素内容设置居中
老版本语法 div{ display: -webkit-box; -webkit-box-align:center; //垂直居中 -webkit-box-pack:center;//水平居中 } 新 ...
从条纹边框的实现谈盒子模型（转）
类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 div: 1 <div></div> 定义如下通用 CSS: 1 2 3 4 5 div{ ...