CSS盒模型

盒模型

组成：content内容（height\width） padding内边距 border边框 margin外边距

分类：标准盒模型与怪异盒模型（IE低版本浏览器下会自动呈现）

CSS3中定义盒模型类型属性box-sizing：content-box|border-box；

Content-box内容盒：设置的width、height属性为内容的宽高

Border-box边框盒：设置的width、heigth属性为边框以内相关的盒子属性（border+padding+content）的宽高

元素宽高的计算：

标准盒模型：元素的宽和高：content|width|height +border +padding+margin（加值法）

怪异盒模型：元素的宽和高：width|height（content +border+padding）+margin（减值法）

.box1,
.box2{
    width: 200px;
    height: 200px;
    padding: 25px;
    border: 10px solid green;
    margin:  100px;
    background: pink;
}
/* 标准的状态 */
.box1{
    box-sizing: content-box;
}
/* 怪异的状态 */
.box2{
    box-sizing: border-box;

              

不难看出这两种模型的原理

Margin

同级元素之间的距离，或者距离父元素之间的距离

Margin设置分类：

       单值法：margin：10px；盒子上下左右外边距都为10px

       二值法：margin：10px 20px；上下10px，左右20px

       三值法：margin：10px 20px 30px；上10px，左右20px，下30px

       四值法：margin：10px 20px 30px 40px；从上开始顺时针设置

按照方向划分：

       Margin-top上 margin-right右 margin-bottom下 margin-left左

.box3,
.box4{
    width: 100px;
    height: 100px;
    background: green;
}
/* 设置盒子外边距 */
.box3{
    margin:50px
}

（单值法）

padding设置方法跟margin相同

Margin塌陷：塌陷时以值大的为主

       1.子元素设置的margin-top默认传给父元素

       2.父元素设置的margin-top与子元素合并(以大的为主)

Border

       1,根据盒子设置：border-top（bottom left right）

       2.按照属性类型： border-style 边框线型（solid实线 dashed虚线 double双实线）

                                   Border-width 边框的厚度 （像素值 thick粗线 thin细线 ）

                                   Border-color 边框颜色

       简写方式：border：style width color

.box5{
    width: 200px;
    height: 200px;
    margin: 100px;
    background: green;
    /* 统一设置 */
    border: 10px solid red;
    /* 单独设置 */
    border-style: dashed;
    border-width: thick;
    border-color: yellow;
    /* 单独设置一个方向 */
    border-top: 10px solid rebeccapurple;
    border-bottom: 10px solid gold ;
    border-left:  10px solid  hotpink;
    border-right:  10px solid  fuchsia;