一、内边距

内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：
padding-top ---- 上内边距
padding-right----- 右内边距
padding-bottom----下内边距
padding-left ------左内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

<style type="text/css">
.box1{
/*设置上内边距*/
            padding-top: 100px;
            /*设置右内边距*/
            /*padding-right: 100px;
            padding-bottom: 100px;
            padding-left: 100px;*/
}
</style>

也可以一起写

<style type="text/css">
.box1{
padding: 100px 200px 300px 400px;
}
</style>

二、外边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置
盒子有四个方向的外边距：
margin-top-------上外边距
margin-right-------右外边距
margin-bottom--------下外边距
margin-left--------左外边距
由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

<style type="text/css">
.box1{
    margin-top: 100px;
}
</style>
/*
            外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
            */
            /*margin-left: -100px;
            margin-top: -100px;
            margin-bottom: -100px;*/
            /*margin-bottom: -100px;*/

margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中
所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

<style type="text/css">
 .box1 {
            /*外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一*/
            margin: 10px 20px 30px 40px;
            margin: 0 auto;
}
</styple>

三、外边距重叠

垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

四、浏览器默认设置

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

*{
    margin: 0;
    padding: 0;
}

五、内联元素的盒模型

• 内联元素不能设置with和height

• 内联元素可以设置水平内边距 垂直方向也可以设置，但不会影响页面的布局

  
  image.png

padding-left: 100px;
padding-right: 100px;
/*padding-top: 50px;
padding-bottom: 50px;*/

• 为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
• 水平外边距，内联元素支持水平方向的外边距为右边的元素设置一个左外边距水平方向的相邻外边距不会重叠，而是求和
• 内联元素不支持垂直外边距

六、display和visibility和overflow

• 将一个内联元素变成块元素
  通过display样式可以修改元素的类型
  可选值：
• inline：可以将一个元素作为内联元素显示
• block: 可以将一个元素设置块元素显示
• inline-block：将一个元素转换为行内块元素可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
• none: 不显示元素，并且元素不会在页面中继续占有位置

<style type="text/css">
 .box1 {
          display: none;
            /*为其设置一个宽和高*/
            width: 500px;
            height: 500px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: orange;
            /*
            display: none;
                使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置*/
}
</styple>

• visibility
• 可以用来设置元素的隐藏和显示的状态
• 可选值：
  * visible 默认值，元素默认会在页面显示
  * hidden 元素会隐藏不显示
• 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持

<style type="text/css">
 .box1 {
       visibility: hidden;
        }
  使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置*/
}
</styple>

• 子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示超出父元素的内容，我们称为溢出的内容父元素默认是将溢出内容，在父元素外边显示通过overflow可以设置父元素如何处理溢出内容
• 可选值：
  1.visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
  2.hidden, 溢出的内容，会被修剪，不会显示
  -3.scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
  -4auto，会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加

<style type="text/css">
 .box1 {
    overflow: auto;
        }

</styple>

七、文档流

• 文档流文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
• 元素在文档流中的特点 ：
  一、块元素
  1.块元素在文档流中会独占一行，块元素会自上向下排列
  2.块元素在文档流中默认宽度是父元素的100%
  3.块元素在文档流中的高度默认被内容撑开
  二、内联元素
  1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
  2.在文档流中，内联元素的宽度和高度默认都被内容撑开

<div style="background-color: #bfa;">
        <div style="height: 50px;"></div>
    </div>
<span style="background-color: yellowgreen;">我是一个span</span>