html盒子模型

文档流

文档流（normal flow）
网页是一个多层的结构，css可以给每一层设置样式，
最终我们看到是最上面的一层。
文档流是网页最底下的那一层

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

之前将元素分为三类，块元素、行内元素、行内块元素
分别具有一些特点，这些特点都是元素在文档流中的特点
块元素：
不会独占一行，宽是父元素内容区宽度，高是被内容撑开
行内元素
不会独占一行，宽高是被内容撑开，不可以自定义宽高
行内块
兼具块元素，行内元素的特点
注意：
1、一旦元素脱离文档流，以上的分类，以上分类的特点都不复存在
2、我们创建的元素默认是在文档流

盒子模型

        布局相关样式：文档流默认的布局，浮动，定位，弹性盒子等
        网页中也有很多的元素，将各种元素摆放在合适的位置， 盒模型将页面所有元素的形状都统一了，你在布局时，只需要考虑到元素的大小即可。
用个形象的例子：
盒模型 快递
内容区 content 冰箱
内边距 padding 泡沫
边框 border 快递盒子
外边距 margin 快递离你的距离
盒子的大小：内容区、内边距、边框 有关系，跟外边距是没有关系

<style>.box1{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      </style>

盒子模型-边框

        边框（border） 边框用来隔开盒子内部和盒子外部
        设置边框，三个要素，缺一不可 宽度、颜色、样式
边框的宽度 border-width
        1、可以设置多个值，以空格隔开即可
        4个值 上 右 下 左
        3个值 上 左右 下
        2个值 上下 左右
        1个值 上下左右
2、单独设置某一边的宽度
        border-top-width: ;
        border-bottom-width: ;
        border-left-width: ;
        border-right-width: ;
3、border-width 是由默认值，默认大小在1-3px

边框的颜色 border-color
        1、可以设置多个值， 规则跟border-width是一样
        2、单独设置某一边的颜色
        border-XXX-color:;
        XXX:top、right、bottom、left
3、小箭头的写法
        border-color: transparent transparent orange transparent ;
4、border-color 有默认值，默认值是黑色

边框的样式 border-style
1、边框样式的种类
         solid 实线
         dotted 点状的虚线
         dashed 虚线
         double 双线
2、可以写多个样式
         规则跟border-width一样
3、单独设置某一边样式
         border-XXX-style:;
         XXX:top、right、bottom、left
4、border-style 默认值是none
        边框 border
1、语法： border: 大小 颜色 样式;
         三要素顺序是无所谓
2、单独设置某一边的边框
         border-top
         border-right
         border-bottom
         border-left
3、 border-bottom: none; 不要某边边框

1:border-width 默认值一般是3px
使用border-width可以分别指定四个边框的宽度

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

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

3:border-style
设置边框的样式
可选值：
        none，默认值，没有边框
        solid 实线
        double 双线
        dashed [dæʃt] 虚线
        dotted ['dɔtid] 点状边框
style也可以分别指定四个边的边框样式，规则和width一致，提供border-xxx-style四个样式，来分别设置四个边。border过它可以同时设置四个边框的样式，宽度，颜色。而且没有任何的顺序要求，border一指定就是同时指定四个边不能分别指定，border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效。

<style type="text/css">
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
        border-width: 10px;
        border-color: transparent  transparent orange transparent ;
        border-color: green;
        border-style: solid;
        border:green 10px  solid;
        border-top: 10px solid green;
        border-right:10px solid green ;
        border-bottom:10px solid green ;
        border-left: 10px solid green;
        border-bottom: none;
      }
    </style>

盒子模型-内边距

内边距 padding 是边框和内容区之间的距离
1、可以单独设置某一边的内边距
        padding-top:;
         padding-right: ;
         padding-bottom:;
         padding-left:;
2、内边距padding简写
         可以写多个值，规则跟border-width是一样

<style>
.box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px green solid;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        padding: 10px 40px;
      }
      /* 创建一个子元素box2占满box1，box2把box1内容区撑满了*/
      .box2 {
        width: 100%;
        height: 100%;
        background-color: red;
      }
      *{
        padding: 0;
        margin: 0;
      }
    </style>

外边距

外边距 margin
         不影响盒子的大小，可以改变盒子的位置
         margin-top 设置元素上外边距，如果正值,元素向下移动,如果负值，元素向上移动
         margin-right 设置元素右外边距，元素是没有效果
         margin-botoom 设置元素下外边距，正值，元素自己不懂，会挤下面的元素向下移动，负值，下面的元素向上移动
         margin-left 设置元素左外边距，正值，元素向右移动，负值，元素向左移动

margin简写
         margin 可以设置多个值，规则跟padding一样

<style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin-top:-50px ;
        margin-left: -50px;
        margin-bottom: 50px;
        margin-right: -5000px;
        margin: 40px;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>

水平布局

水平方向能影响到inner所占位置的因素有哪些
margin-left border-left padding-left width padding-right border-right margin-right
过度约束：
         浏览器规定，元素水平方向7个值相加，必须要等与其父元素内容区的宽度，
         如果不等于，浏览器就会进行调整，让等式成立
margin-left+border-left+padding-left + width + padding-right +
border-right+ margin-right=父元素内容区的宽度

40+20+0+100+0+20+0=600
180 ！= 600
浏览器如何调整
         1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值
40+20+0+100+0+20+ 420 =600
         2、7个值当中，有3个值可以设置auto，margin-left width margin-right
（1） 设置1个auto 谁是auto，浏览器就调整谁
margin-left
auto+20+0+100+0+20+0=600 auto=460
width
40+20+0+auto+0+20+0=600 auto=520
margin-right
（2）设置2个auto
         margin-left width 调整width
         width margin-right 调整width
         margin-left margin-right 同时调整margin-left margin-right

设置3个auto
         margin-left width margin-right 调整的就是width

总结：
1、如果7个值当中有auto，调整的顺序
width > margin-left margin-right
2、如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto

<style>
      .outer {
        width: 600px;
        height: 200px;
        border: 10px red solid;
      }
      .inner {
        width:100px;
        height: 100px;
        background-color: #bfa;
        border: 20px solid green;
        /* margin-left:auto ;
        margin-right:auto; */
        margin: 0 auto;
        padding: 0;

      }
     </style>