盒子模型基础内容

一、文档流

文档流（normal flow）

网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层

文档流是网页最底层

我们创建的元素默认情况下，都在文档流中

元素分为两种状态：在文档流中，脱离文档流

元素的分类前提是在文档流中，才分成块元素、行内块元素，行内元素，

一旦元素脱离文档流，就不再区分块元素、行内块元素，行内元素，

所对应的元素的特点自然也就没有，块元素也不会独占一行了，行内元素也可以设置宽高了，

行内块元素也没有三像素问题

元素在文档流中分类的特点

块元素

1:会独占一行

2:块元素的宽度默认是父元素的100%

3:块元素的高度默认是被内容撑开的

内联元素（行内元素）

1:不会独占一行

2:宽度高度默认都是被内容撑开的，不能自己定义宽高

行内块元素

兼具块元素和行内元素的特点，即不会独占一行，也可以设置宽高，而且有三像素问题

二、盒子模型

什么是盒子模型、为什么要设置盒子模型，盒子模型具体怎么构成，怎么设置

把各种元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里

所以我们把所有的元素都想成盒子，矩形

盒子模型：就是将页面所有的元素都统一设置为一个个盒子，一个个矩形，在布局时，就不用考虑

元素的形状，只需要考虑元素的大小，大大的方便了页面的布局

盒模型、盒子模型、框模型（box model）

内容区（content） 放具体内容

内边距（padding）

边框 （border）

外边距（margin）

影响盒模型大小是：内容区、内边距、边框，外边距不会影响到盒子的大小

1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列

默认情况下，设置的width、height就是内容区的大小

三、边框

边框（border）元素 设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式

border-width 设置边框大小

（1）、可以跟多个值，值与值之间用空格隔开

四个值 上 右 下 左

三个值 上 左右 下

二个值 上下 左右

一个值 上下左右

（2）、可以单独设置某一边宽度

top right left bottom

border-XXXX-width:;

（3）、有默认值，默认值大小是1-3px

border-style 设置边框的样式

(1)可选值：

solid 实线

double 双线

dotted 圆点虚线

dashed 虚线

(2)可以单独设置某一边的样式

border-XXX-style: ;

top bottom left right

（3）、没有默认样式，设置边框必须要设置

border-color 设置边框的颜色

（1）、可以放多个颜色值 四个，三个，两个，一个

规则跟border-width是一样的

（2）、可以单独设置某一边颜色

border-XXX-color: ;

top bottom left right

（3）、有默认值，默认值是黑色

border 简写

(1)、 border: 边框的大小 边框的样式 边框的颜色;

三个参数以空格隔开，不分先分后顺序

（2）单独设置某一边边框

border-xxx:边框的大小 边框的样式 边框的颜色;

xxx：top bottom left right

(3):border:none;去除边框

四、内边距

内边距（padding）：

内容区和边框之间的距离，它会影响到盒子的大小

（1）、分别给每边设置内边距

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

（2）padding简写

padding后可以写多个值

4个值

3个值

2个值

1个值

规则跟之前讲的border-width是一样

五、外边距

外边距 margin

可以控制元素的位置，它不会改变盒子的大小

（1）margin-top 正值，盒子是向下移动，负值，盒子是向上移动

margin-right 设置是没有效果

margin-left 正值，盒子是向右移动，负值，盒子是向左移动

margin-bottom 盒子本身不动，盒子下方的元素，正值向下，负值向上

(2)margin 简写

后也可跟4个值，3个值，2个值，1个值

规则跟border-width也是一样

外边距指的是当前盒子与其他盒子之间的距离，

他不会影响可见框的大小，而是会影响到盒子的位置。

盒子有四个方向的外边距：（边演示，边总结）

margin-top

上外边距，设置一个正值，元素会向下移动

margin-right

默认情况下设置margin-right不会产生任何效果

margin-bottom

下外边距，设置一个正值，其下边的元素会向下移动，挤别人

margin-left

左外边剧，设置一个正值，元素会向右移动

由于页面中的元素都是靠左靠上摆放的，

所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，

而如果是设置右和下外边距会改变其他盒子的位置（挤别人）

外边距也可以指定为一个负值，

如果外边距设置的是负值，则元素会向反方向移动

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,

规则和padding一样