边框详讲---CSS必备的盒子模型知识！

盒子模型
 
盒子模型的四个部分：内容区、边框，内边距，外边距；前三者共同决定盒子可见框的大小。
 
边框
 
为元素设置边框
 
 
  .box1{
    
    width:100px;
    height:100px;
    background-color red;
    /*设置盒子内容区宽高及颜色。*/
     
    border-width:10px;
    border-color:yellow;
    border-style:solid;
    /*设置边框，三个样式缺一不可，缺了就直接不显示边框。*/
   }

 

 border-width
 
    使用border-width可以分别指定四个边框的宽度。
    
        指定四个值：按顺时针设置；
        
        指定三个值：分别设置给上 左右 下；
        
        指定两个值：分别设置给上下 左右；
        
        指定一个值：四边全为这个值。
        
        border-width:10px 20px 30px 40px;
        
        /*则上边框为10px，右边框为20px，以此类推*。/
        
        //方便起见，此规则自定义为“4321”。
　　
　　//题外话：如果你也知道3421...hhh
 
        
 border-color
    
    原理同4321有：
    
    border-color:red blue green;
    
    /*则上边框为红色，左右边框为蓝色，下边框为绿色。*/
 
 
 border-style
 
使用border-style来设置边框样式。
 
    可选值： none  默认值，没有边框；
    
    ​        solid   实线；
    
    ​        dotted  点状；
    
            dashed  虚线；
    
            double  双线；
    
        border-style同4321有：
        
        border-style:solid dotted;``
        
        /*上下边框为实线，左右边框为点状。*/
 
    
border   边框的简写形式
 
通过它可设置四个边框的样式、宽度、颜色（顺序无要求）。
 
    boeder:red solid 10px;
    
    /*这对四个边起作用。*/
    
    
border-top   border-bottom   border-right  border-left可单独用来设置四边。
 
border:red solid 10px;
 
border-top:yellow solid 20px;
 
/*除了上边框为黄色实线20px，其余三边均为红色实线10px*。/
 
 
border:red solid 10px;
 
border-top:none;
 
/*常用的去除不要的边的方法。*/
 
 
内边距
 
内边距指盒子的内容区与盒子边框之间的宽度。
 
内边距会影响可见框的大小；
 
元素的背景会延伸到内边距；
 
​    即如果给元素添加背景，背景会应用于内容和内边距组成的区域。
 
 
可通过padding-top padding-bottom  padding-right  padding-left来单独设置四边之一。
 
 
<style type="text/css">   
  .box1{
      width:100px;
      height:100px;
  }
  .box2{
      width:100%;     /*创建子元素box2来占满父元素box1的内容区，
      height:100%；    *注意：不占内边距*/
  }
</style>
 
 
外边距
 
外边距指当前盒子与其他盒子之间的距离；
 
不影响可见框的大小，但影响盒子的位置；
 
有四个方向的外边距：margin-top  margin-bottom  margin-right  margin-left  ；
 
    设置上、左边距时，会改变盒子自身的位置；
    
    设置下、右边距时，则会改变其他盒子的位置；
    
 
margin可设置auto；
 
  若只指定左/右外边距的margin为auto，
 
​       则会将外边距设置为最大值；
 
  若垂直方向设置为auto，则外边距默认为0；
 
​       即垂直方向的盒子会紧挨在一起。
 
  常用的使元素自动在父元素中居中的方法：
 
​       将left和right同时设置为auto。
 
 
margin   外边距的简写形式
 
    同样符合“4321方向规则”
    
    margin: 0  auto;
    
    /*将上下外边距设置为0，将左右外边距设置为auto，即这也是居中的写法。*/
 
 
垂直外边距的重叠
 
在网页中垂直方向的相邻外边距会发生外边距的重叠。
 
外边距的重叠指的是兄弟元素之间的相邻外边距会取最大值。
 
​     假设盒1和盒2为垂直方向的相邻兄弟元素，
 
​        a、给盒1设置底面外边距为100px，给盒2设置顶部外边距为100px。
 
​              那么两个盒子之间的效果还是100px。
 
​        b、把盒1设置底面外边距为100px，盒2的顶部外边距设置为200px，
 
​              那么两个盒子之间的距离就变成了200px(取最大值)。
 
 
 
若父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
 
​       即给子元素设置上外边距为100px时，子元素和父元素保持相对位置一起下移100px。
 
解决途径：
 
    法一：给父元素设置上边框，把父子隔开；
    
    法二：把父元素的内边距设置成 “能使子元素下移到你想要位置 ”的数值。
 
 
 
常用去除浏览器默认样式的代码
 
    *{
    
        margin:0;
        
        padding:0;
    
    }
 
 内联元素的盒模型
 
    内联元素不能设置width和height；
    
    能设置水平方向的内边距，也能设置垂直方向的，
    
    但垂直方向的内边距不会影响页面的布局（不会挤掉，而是覆盖）；
    
    能设置边框，水平、垂直效果同“内边距”；
    
    支持水平方向的外边距，不支持垂直方向的。
    
 
display
 
可通过display样式来修改，将一个内联元素转化为块元素。
 
​   可选值：inline  将一个元素作为内敛元素显示；
 
​          　　block   将一个元素作为块元素显示；
 
​          　　inline-block  将一个元素转化为内联元素，使其既有内联元素的特点又有块元素的特点；
 
​                           　　既可设置宽高，又不会独占一行。【典型：image】
 
​          　　none：不显示元素，且元素在页面中也不会继续占有位置。
 
 
visibility
 
通过visibility来设置元素的隐藏和显示的状态。
 
​   可选值：visible  默认值，元素默认在页面显示；
 
​              hidden 元素会隐藏，但在页面中继续占有位置（显示空白）。
 
 
overflow
 
父元素默认将溢出内容在父元素外显示。
 
通过overflow可设置父元素如何处理溢出内容。
 
​   可选值：visible 默认值  不对一处内容处理；
 
​           　　hidden  溢出内容会被修剪，即不显示；
 
​          　　 scroll   为父元素添加滚动条，通过滚动条可查看完整内容，
 
​                       　　该属性不管内容个是否溢出，都会添加水平和垂直方向的滚动条；
 
           　　auto     会根据需求自动添加滚动条。