浅谈CSS框模型

1.什么是框模型

Box Model(框模型，盒模型，盒子模型)

简单来说就是定义了元素框处理元素内容(尺寸)，内边距，边框和外边距的方式

下面这张图是百度上搜索来的图片，在这里引用一下：

如图所示：

width 和 height 指内容区域的宽度和高度

        增加了内边距，外边距，边框不会影响内容区域的尺寸，但是会影响元素框的总尺寸

          元素实际宽度=左右外边距+左右边框+左右内边距+width;

          元素实际高度=上下外边距+上下边框+上下内边距+height；

2.外边距margin

1、什么是外边距

                    围绕在元素边框周围的空白区域

                     外边距会在元素外创建空白是透明的与下一个元素之间的空间量

        2、语法

                    属性：

                         margin : 四个方向的外边距

                         margin-left : 左外边距

                         margin-right : 右外边距

                         margin-top : 上外边距

                         margin-bottom : 下外边距

                    取值：

                         单位：

                              1、具体数值(px)

                              2、百分比%

                              3、值为 auto

                                   由浏览器自动计算 左右外边距，上下无效

                                   允许让块级元素 ， 呈现出水平居中的表现效果

                                   要求：块级元素必须设置宽度。

                              4、负值

                                   设置 左外边距和上外边距为负数时，元素会向着相反的方向移动

                    简洁写法：

                         margin:value;上下左右四个方向外边距

                         margin:v1 v2;v1：上下外边距，v2：左右外边距。

                              margin:10px 20px;

                              上下各10像素外边距，左右各20px外边距

                         margin:v1 v2 v3;v1:上外边距 v2:左右外边距 v3:下外边距

                              margin:5px 10px 3px;

                              上外边距：5px

                              左右外边距：10px

                              下外边距：3px

                              margin:10px auto 2px;

                        

                         margin:v1 v2 v3 v4;

                              v1 : 上

                              v2 : 右

                              v3 : 下

                              v4 : 左

        3、具备默认外边距的元素

                    取消默认外边距

                    body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd{

                         margin:0;

                    }

        4、外边距引发的特殊效果

                    1、外边距合并

                         当两个垂直外边距相遇时，他们将形成一个外边距，成为 "外边距合并"

                         合 并后的外边距是两个外边距中大者

例如：

<div id="d1"  style="margin-bottom:20px;">111</div>

<div id="d2" style="margin-top:30px;">222</div>

以上两个div之间只有以id="d2"元素的30px外边距，并非50px

                    2、上下外边距溢出

                         子债父还

                         在满足一定的条件下，当 设置子元素的上下外边距的时候，可能会作用到父元素上

                         条件：

                              1、父元素 没有边框

                              2、子元素必须是父元素中的第一个或最后一个元素时

                         解决：

                              1、父元素增加上下边框

                                   弊端：会影响父元素的尺寸

                              2、通过 父元素的 内边距，取代子元素的外边距

                                   弊端：会影响父元素的尺寸

                              3、~~~~~~~~~~~~~~

                    3、外边距对行内(inline)和行内块(inline-block)的处理

                         1、 对于行内元素，上下margin无效

                         2、 对于行内块元素，上下margin会影响到同行的所有元素 

3.内边距padding

1、什么是内边距

                    内容区域与边框之间的空间

                    内边距会扩大元素边框所占据的区域

        2、语法

                    属性：

                         padding

                         padding-left:

                         padding-right:

                         padding-top:

                         padding-bottom:

                    取值：

                         单位：

                              1、px

                              2、%

                    简单写法:

                         padding:value;上下左右

                         padding:v1 v2;上下  左右

                         padding:v1 v2 v3;上  左右  下

                         padding:v1 v2 v3 v4;上右下左

        3、特殊注意

                    为元素设定 内边距 ，只能影响自己，不会影响到其他元素 

4.框模型的特殊情况button

对于 button 来说

                    1、<input  type="submit/reset/button">

                    2、<button>

               设定宽度和高度时，包含 边框 以及 内边距

例如：

button{

width:300px;

height:400px;

}

width=300px=内容+左右内边距+左右边框

height=400px=内容+上下内边距+上下变宽

                其他元素，设定宽度和高度时，只是设置 内容区域的宽和高，不包含 边框 以及 内边距 

5.box-sizing属性（在css中设置）

1、作用：指定 盒子 尺寸计算 模式

        2、取值：

              1、content-box

                              默认值，为元素所设定的width和height只是内容区域的 width和height，不包含元素的 边框和内边距

              2、border-box

                              为元素所指定的width和height会包含元素的 内容宽高以及内边距和边框的距离。

 

6.边框border

1、边框

               1、简写方式： 定义四条边框的 宽度，样式，颜色

                    border:width style color;

                         width:宽度

                         style:边框线条样式

                              取值：

                                   solid ：实线

                                   dotted ：虚线

                                   dashed ：虚线

                         color:颜色

                              还可以取值为 transparent（透明）

       2、单边定义

                    语法：border-方向:width style color;

                         方向：top/right/bottom/left

                                        上  右    下     左

                    ex:

                         border-top:2px solid #ddd;

               3、单属性定义

                    语法：border-属性:值;

                         属性: width/style/color

                    ex: border-color:#0f0;

               4、单边单属性定义

                    语法：border-方向-属性:值;

                         ex:

                              border-top-color:#000;

                              上边框颜色：#000;

                              border-left-style:dotted;

                             左边框的样式为 ：虚线

          2、边框倒角

               倒角：直角倒成圆角

               属性：border-radius

               作用：简写属性，从左上角开始，按顺时针顺序设置四个角的倒角半径,最少1个值，最多4个值

               取值：可以是具体数值，也可以是%

               单独定义：

                    border-top-left-radius:左上角倒角

                    border-bottom-right-radius:右下

                    border-top-right-radius:右上

                    border-bottom-left-radius:左下

          3、边框阴影

               属性：box-shadow

               取值：由多个属性值组成的列表

                    h-shadow v-shadow blur spread color inset;

                    h-shadow:必须，阴影水平偏移距离，取值为正，向右偏，取值为负，向左偏

                    v-shadow:必须，阴影垂直偏移距离，取值为正，向下偏，取值为负，向上偏

                    blur:可选，模糊距离

                    spread:可选，阴影尺寸，原有的大小上，增加指定像素大小

                    color:可选，颜色

                    inset:可选值，将默认的外阴影(outset)改为内阴影

          4、轮廓

               1、什么是轮廓

                    绘制于元素周围的一条线，位于边框之外 

               2、属性

                    outline:width style color;

                    outline-width:轮廓的宽度

                    outline-style:轮廓的样式

                    outline-color:轮廓的颜色

         

5、常用方式

                    outline:0; //取消轮廓

                    outline:none;//取消轮廓

                    border:0; //取消边框

                    border:none;//取消边框