7.28 Web前端-盒子模型

hello大家晚上好，今天让我们回归之间的基础教学，今天我们来说一下前面在项目中一直用到的盒子模型，或许在之前大家还不太理解，在这里我会详细介绍一下盒子模型的概念以及相关的用法。

1.文档流

在正式开始说之前，要和大家说一个文档流的概念，理解这个之后会很容易了解后面的东西。

网页是一个多层的结构，设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层，而文档流是网页最底层我们创建的元素默认情况下，都在文档流中。元素一共分为两种状态：在文档流中和脱离文档流。

元素在文档流中的特点：（复习之前的知识点）

1.块元素

1:会独占一行；

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

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

2.行内元素

1:不会独占一行

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

3.行内块元素

兼具块元素和行内快元素的特点。

2.盒子模型

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

所以我们把所有的元素都想成盒子。

1.内容区：元素中所有的子元素和文本内容都在内容区中排列

width  设置内容区的宽度

heigth  设置内容区的高度

2.边框：元素设置边框

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

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

边框的颜色、样式、大小

3.border-widt：默认值一般是1-3px

使用border-width可以分别指定四个边框的宽度

4个值 ：上  右  下  左

3个值 ：上  左右   下

2个值 ：上下   左右

1个值 ：上下左右

除了border-width，CSS中还提供了四个border-xxx-width，xxx的值可能是top right bottom left，专门用来设置指定边的宽度  

4.border-color：  

设置边框的颜色 ，默认值是黑色，和宽度一样，color也提供四个方向的样式，可以分别指定颜色。

border-xxx-color

5.border-style：

设置边框的样式

可选值：

none，默认值，没有边框

solid：实线

double ：双线

dashed：虚线

dotted ：点状边框

style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边

border

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

而且没有任何的顺序要求

 border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效。

由于时间问题今天就先说到这里，谢谢大家。