CSS盒模型

标签（空格分隔）： CSS

---

定义:盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型

css中盒子模型由四个部分组成: 1. 边框（border） 2. 内边距（padding） 3.外边距（margin）4.内容(content)

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

盒模型之内容（content）

常用属性

overflow:visible（可见不裁剪）|hidden（隐藏）|scroll（滚动：滚动条占据盒子内容的宽高）|auto（如果内容需被裁剪，则浏览器以滚动条显示其余内容）;
text-overflow:clip(裁剪)|ellipsis（省略）;

盒模型之边框（border）

语法:border:border-width || border-style || border-color

border-width 设置边框宽度,单位以px为主 例如: border:1px solid skyblue设置宽度为1的边框
border-style 设置边框的样式,有 dotted solid double dashed 四个值,可以混合设置,也可以单独设置
border-color 设置边框的颜色

border属性其他写法
border-top 设置上边框样式
border-bottom 设置下边框样式
border-left 设置左边框样式
border-right 设置右边框样式

盒模型之内边距 （padding）

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

使用简写属性设置在一个声明中的所有填充属性

不同个数的简写值的对应

padding 影响盒子大小问题

盒子宽度=盒子宽度+左右内边距+边框宽度

注意:padding不允许使用负值。

盒模型之外边距 （margin）

用法与padding一样，margin对盒子宽度不会有影响

margin用法説明

外边距合并（叠加）是一个相当简单的概念。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

解决问题：1给父元素设置边框即可 2 给父元素设置overflow:hidden

注意:margin允许使用负值。

行内元素 关于padding 和margin 问题

行内元素不要给上下的margin 和padding
上下margin和padding会被忽略。
左右margin和padding会起作用。

标准盒模型和怪异盒模型

标准盒模型

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

盒子的实际占位宽度=(margin-left)+(border-left)+(padding-left)+content+(padding-right)+(border-right)+(margin-right);

盒子的实际宽度=(border-left)+(padding-left)+content+(padding-right)+(border-right);

怪异盒模型

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding

盒子的实际占位宽度=(margin-left)+content+(margin-right);
盒子的实际宽度=contentWidth;