盒子模型详解

盒子模型

1.盒模型是CSS布局的基石
他规定了网页元素如何显示以及元素之间的相互关系
​
CSS定义所有的元素都可以拥有项盒子模型一样的外形和平面空间
包括：
  边框（border）
  外边距（margin）
  内边距（padding）
  内容区（content）
盒模型的类型：
  1.标准模式
  2.怪异模式

盒的内容

1.overflow：属性指定如果内容移除一个元素的框
  取值：
     visible/hidden/scroll/suto
     visible:默认值，内容不会被裁剪掉，会呈现在元素框之外
     hidden:内容会被剪裁，其余的内容不可见
     scroll:内容会被剪裁，滚动条显示其余的内容
     atuo:如果内容被剪裁，则被浏览器以滚动条显示其余内容
2.overflow-x:指定如果他溢出了元素的内容区域是否剪裁左边或右边边缘的内容
3.overflow-y:指定如果他溢出了元素的内容区域是否剪裁上边和下边边缘的内容

4.text-overflow:指定当文本溢出包含他的元素：
     clip:修剪文本
     elipsis:显示胜率符号来代表被修剪的文本
   
     注意：
        text-overflow必须和overflow：hidden;white-space:nowarp;一起使用
       

边框

元素的边框：是围绕元素的内容和内边距的一条或多条线
属性允许你规定元素边框的样式、宽度、颜色
border：用于把针对四个边的属性设置在一个声明中
border-style:用于设置元素所有边框样式，或者可以为单个边框设置特有的样式、
border-width:用于设置边框的宽度
border-left:用于将左边框的所有属性设置到一个声明中
        top
        bottom
        right
border-style:取值：
      soild/dashed/double/none
注意：
    如果要设置盒子的边框，必须制定边框的线型，只有设置了线型才能是指相对应的属性（颜色和宽度）

padding的使用方法

padding：
  填充，元素碧娜狂和元素内容之间的区域，称之为内边距
用法：
    用来调整内容在容器中位置关系，或者理解调整子元素在父元素中的位置
  注意：
     padding属性需要添加在父元素上，padding值是额外加载元素原有大小上的值；
     如果想保证元素大小不变，需要充元素的宽或高上减掉后在加上padding值
 
  属性值的四种方式：
     1.四个值：上、下、左、右{padding：10px 10px 10px 10px;}
     2.三个值：上、左右、下：
     3.两个值：上下、左右；
     4.一个值：四个方向；{padding:2px}
   
说明：可以单独设置一个方向上的填充：
    如：padding-top;
 
 
 

margin的使用方式

margin:盒子与盒子之间的距离
属性：
   margin-top：上边界
   margin-right:右边界
   margin-bottom:下边界
   margin-left:左边界
​
属性值表示的四种方式（和padding一样）
​
说明：
  在浏览器中横向居中：{margin：0 atuo;}
  同样可以单独设置方向边界
 

外边距的合并

1.当两个盒子纵向排列的时候，他们的距离为两个盒子之间最大的那个外边距
2.当两个和子横向排列时，他们的距离是两个和子的外边距之和

盒子的计算

计算公式：
  宽：左右的margin+左右的border+左右的padding+内容width
  高：上下margin+上下border+上下padding+内容height
 
 
例如：
   一个盒子的margin为  20px;
       border为1px;
       padding 为10px；
       content的宽：200px;高50px;
宽：20*2+1*2+10*2+200=262px;
高：20*2+1*2+10*2+50=112px;

注意：设置padding和margin会撑大盒子，任何解决？
     根据外边距、内边距、边框的大小重新计算盒子中的内容宽度和高度