盒子的大小、位置和边框

我们都知道盒子是有宽度、高度和边框的属性的，我们页面中的每一个标签和我们实际当中的盒子差不多，也是有这几个属性的，所以我们下面分别了解一下。

1、网页盒子页面显示

1.1 页面中的标签都是盒子

html中所有元素（标签 ）都可以看作是一个盒子，也就是整个网页都是由一个个盒子构成，目的在于网页更佳整洁规整

1.2 网页由多个盒子组成

网页的布局是由一个个盒字构成的目前选中的盒子就是div标签做出来的

2.3 网页盒子默认没有大小（所以看不到）

2、网页盒子宽度和高度

网页盒子设置了宽度和高度还是看不到的
通过浏览器开发工具看网页盒子

3、网页盒子边框

3.1边框作用

给网页盒子加上边框我们就能看到盒子了
width 设置的是盒子的厚度
style是样式 solid 实线 dashed虚线 dotted点状线

3.2边框属性设置

边框的综合写法
border：1px solid red;
边框的分开写法
top bottom left right 分别是上下左右

4、盒子位置的调整

我们在写页面的时候，实际上是在页面上排列盒子，所以我们要根据实际需求来不停的移动我们的页面标签（也就是我们所认为的盒子），所以我们需要牢牢掌握下面盒子位置调整的知识点。

4.1 margin的初识

margin也叫边距，是盒子与盒子之间的间距，有margin-top(上边距) margin-bottom(下边距) margin-left(左边距) margin-right(右边距)

4.2 盒子上下外边距的调整

有两个盒子我们想让他离开一定距离，我们可以给第一个孩子设置margin-bottom也可以给第二个盒子设置margin-top 实现效果是一样的

4.3 盒子向右移动位置的调整

第一个盒子想往右移动50px需要设置margin-left为50px

4.4 盒子向下移动位置的调整

第一个盒子向下移动50需要设置margin-top为50px

5.margin使用的问题

有的时候我们明明设置了margin,为什么在页面上没有显示效果呢，请详细观看下面的笔记

5.1 margin为什么页面不显示

超过了设置的50px
不会有任何变化 因为第一个盒子距离body的最右边距离远远超过了50px

6.margin的多种写法

6.1 margin的四个值写法

margin的四个值连写，分别代表上右下左margin
margin：40px 50px 60px 40px;
4个值分别代表了距离上方盒子10px右方20px下方30px左40px总结为上右下左 为顺时针方向

6.2 margin的一个值写法

margin：50px;
margin只写一个值，代表上下左右都是给定的值都是一个值

6.3 margin两个值写法

margin :50px70px;
margin两个值，分别代表上下margin是第一个值 左右是第二个值

6.4 margin三个值写法
margin :50px 60px 70px;
margin三个值，第一个值代表上margin 第二个值代表左右的margin值 第三个值代表下margin值

margin-top margin-bottom margin-left margin-right是单独写法 margin后面给定不同的值是综合写法

margin: 0 auto; 盒子 text-align: center 内容实现CSS水平居中