盒子模型

“在网页中一切皆是盒子”

盒子模型，也叫框模型

盒子的构成分成四部分

内容区content

内边距padding

边框border

外边距margin

“盒子的大小=内边距+内容区+边框”

---

边框

属性

border-width 边框的宽

border-color 边框的颜色

border-style 边框的样式

边框线的样式

none 默认定义无边框

solid 实线

dotted 虚线

dashed 点状虚线

double双线

---

内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

padding-top 上内边距

 padding-right 右内边距

 padding-bottom 下内边距

 padding-left 左内边距

---

外边距

margin-top 上外边距

margin-right 右外边距

margin-bottom 下外边距

margin-left 左外边距

auto自动 如果设置，它会显示最大 只能给水平进行设置

父子元素边距相连，则互相影响

---

浏览器默认样式

边距默认值：8px

如果不想有间隔，清除浏览器的默认样式margin和padding设为0.

内联元素的盒模型

内联元素不能设置宽和高的值

但可以设置水平的内边距

水平方向的外边距和宽高设置的值求和

---

display 和  visibility

display

可以转换

规定元素应该生成的框的类型。

none让元素不会被显示 但无站位

visibility

属性规定元素是否可见。

hidden让元素不可见 但有站位

子元素超过父元素的限制 就是溢出 overflow

规定当内容溢出元素框时发生的事情

scroll和auto两种设置滚动条的方法

但唯一的标准是智能的情况，没有内容scroll仍存在滚动条，而auto则没有。

---

文档流

网页是多层的

块元素只有在文档流中是可以设置宽和高

文档流指的是文档中可现实的对象在排列时所占用的位置。

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排 放元素，即为文档流。

也就是说在文档流中元素默认会紧贴到上一个元素的右边，如 果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放。

这样一来每一个块元素都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。

---

浮动

块在文档流里是浮动的

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

浮动使用float属性。

可选值：

none：不浮动

left：向左浮动

right：向右浮动

块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。

当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。

动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。