布局--盒子模型、框模型box model

1、页面中所有元素都设置成了一个矩形的盒子，所以页面的布局成了将指定的盒子摆放到不同的位置

2、每个盒子的组成部分：

内容区（content）---内容区、内边距、边框决定了盒子的大小

内边距(padding)

边框(border)

外边距(margin)---外边距决定了盒子的位置

---

3、内容区（content）

        元素所有子元素和文本内容都在内容区中排列，内容区大小由width和height两个属性来设置

        width设置内容区宽度，height设置内容区高度

4、边框(border)

        边框属于盒子边缘，边框里面属于盒子内部，出了边框是盒子外部，边框的大小影响了盒子的大小

        设置边框需要设置3个样式：

        边框宽度   border-width: 数值长度单位 默认值

                border-width:10px 20px 30px ;

                按照上边框，右边框、下边框、左边框的顺时针设置

                四个值：上、右、下、左

                三个值：上、右左、下

                两个值：上下、左右

                一个值：四个框

                单独指定边框的宽度： border-top-width、 border-right-width: 、border-bottom-width:                                                          border-left-width:        

        边框颜色 border-color:同样可以设置四个边框的颜色 四个值、两个值、三个值和一个值和

                边框宽度一样，可以不写，如果不写边框的颜色=color属性值，color属性值默认等于黑                   色border-top-color也有单独设置

        边框的样式 border-style:

                solid实线、dotted点状虚线，dashed虚线，double双线，none没有边框  也有四条边单独设置border-top-style:

        border:全部一起设置 顺序是：边框的样式、宽度、颜色 也可以单独设置 border-top: 如果想要某条边没有，可以设置全部右=有、然后另一条设置none

5、内边距(padding) 内容区和边框之间的距离是内边距、一共有四个方向的内边距 可以设置 上右下左 四个值 三个值两个值一个值设置

padding-top: ;

padding-right: ;

padding-bottom: ;  

padding-left: ;

内边距的设置会影响到盒子的大小，且背景色会延申到盒子的内边距上，子元素和内容不在内边距内，在内容区中

——————————

        6、一个盒子的可见框的大小由内容区、内边距、和边框共同决定

               计算盒子大小，需要将三者相加

所以500*500是三者相加的长度=500

---

7、外边距(margin)---外边距决定了盒子的位置--外边距不影响大小 也有四个方向    margin-top:

margin-left: ; 设置正值是按照margin相反方向运行 移动元素自身

margin-bottom: ; margin-right: 设置正值移动对方，对方按照相同元素移动

margin设置四个方向 用法和padding一样， margin会影响盒子实际占用空间