边框详讲---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     会根据需求自动添加滚动条。

，

　　这些是我在看网课之后手打的笔记，然而学完整套视频之后发现有源码这种东西，枯了；如果你觉得这些知识点对你有一些帮助的话就给我一点回应叭，安慰我一下我这个小菜鸟呲呲。