边框详讲-

边框详讲-

盒子模型
 
盒子模型的四个部分:内容区、边框,内边距,外边距;前三者共同决定盒子可见框的大小。
 
边框
 
为元素设置边框
 
 
  .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     会根据需求自动添加滚动条。
  这些是我在看网课之后手打的笔记,然而学完整套视频之后发现有源码这种东西,枯了;如果你觉得这些知识点对你有一些帮助的话就给我一点回应叭,安慰我一下我这个小菜鸟呲呲。