css盒子模型

知识点：

          -盒子模型

        描述：

          - 页面中的任何元素都可以看作一个4变形的盒子，被称为盒子模型

          - 盒子的构成

            content：内容

            padding：内边框

            border：边框

            margin：外边距（盒子之间的距离或盒子和页面边框之间的距离）

         - 盒子可视区域

            content+padding+border

            修改内容、内边距、边框影响盒子可视区域大小

         - 外边距影响盒子的位置

         - 如果摆放元素在页面中的位置，被称为"布局"，小范围的移动可使用外边距

         - 盒子大小等于内容+内边框+边框+外边框

知识点：

           - 边框

           描述：

           - border-color

           - border-width

           - bordr-style（必须）

           如果不设置边框颜色和宽度，则浏览器默认分配黑色和3px

           

           样式值：solid 实现

                  dashed 虚线

                  dotted 实心圆点

                  double 双实线

                  none 取消边框

                  hidden 隐藏边框

         -设置边框宽度，不同的值

         brder width：

         一个值表示上下左右

         两个值 第一个值上下  第二个值 左右

         3个值  第一个上 第二 左右 第三 下

         4个值  上右下左 （顺时针）

 

         css提供了4个不同的取值方向和3组不同的值都可以进行设置

         border-XXX-XXX：来设置不同的边框

         颜色样式都可以设置不同的4个方向值

         border-方向：width，style，color

知识点：

        - 外边距

        描述：

        - 外边距：盒子和盒子之间的距离，或盒子和页面边框之间的距离

        - 设置盒子的外边框，不影响盒子可视区域的大小，但影响盒子的位置

        - 盒子的默认位置在元素的左上角

        设置：

        margin-top、margin-left 移动盒子本身的位置

        margin-right、margin-bottom：移动盒子的兄弟元素

        外边距可以设置为负数

        margin可以设置auto

        margin-left和margin- right 设置为auto，表示水平方向的最大值

        如果同时设置为auto则在父元素中水平居中

        在垂直方向（top和bottom)设置auto，则默认值为0

        外边距可以设置4个方向，规则和border一致

        margin auto 水平居中 条件：宽度固定，块状元素

知识点：

             - 内边距

           描述：

             - 我们平时设置的宽高，默认都是盒子模型下的内容大小

             - 内边距影响可视区域的大小，元素的背景会延申到内边距

             - padding设置方向规则和boder一致

             -盒子可视区域大小：内容+边距+边框

             如果存在子父元素中，子元素设置为百分比，则根据父元素的width和height进行计算，padding和boder不参与

/*

    知识点：

       - 浏览器默认样式

     描述：

       -每个元素在浏览器中都有默认的padding和margin

       -多数情况需要自己设置

   

    */

    *{

        margin: 0;

        padding: 0;

    }

圆角：

           border-radius: 半径，...

       

       圆型，半圆，1/4圆

.box,.box2,.box3{

         width: 200px;

         height: 200px;

         border: 1px solid red;

         border-radius: 50%;

      }

      .box2{

            height: 100px;

            border-radius: 100px 100px 0 0;

      }

      .box3{

        height: 100px;

        width: 100px;

        border-radius: 0 0 0 100px;

      }

      .box4{

             width: 0px;

             height: 0px;

             border-style: solid;

             border-width: 5px;

             border-color: red transparent transparent transparent;

 

      }

/*

        box-sizing：设置盒子是否使用标准模型

            可选值：

            content-box：标准盒子模型(默认值)

            浏览器默认就是标准盒子模型

           

            border-box：非标准盒子模型

            设置的width/height=内容+padding+border

            此刻设置padding和border则会压缩内容大小

            使用场景：

                如果不需要盒子大小进行变化，锁定盒子尺寸时，则可以使用

       

        */

        .box {

            width: 200px;

            height: 200px;

            background-color: red;

 

            box-sizing: border-box;

            box-sizing: content-box;

        }

box-shadow：阴影类型 x-offset  y-offset  blur-radius color

        inset: 内阴影