盒子模型

盒子边框

    border：border-width || border-style ||border-color

                 div{border:1px  solide  red};

    border-style常用属性：

    none  无

        solid  实线

        dashed 虚线

        dotted 点线

        double 双实线

表格的细线边框   border-collapse:collapse

圆角边框

border-radius:左上角  右上角  右下角  左下角；

div{border-radius:50%}取宽高的一半，会变成一个圆

div{border-radius:10px} 上下左右都是10px

div{border-radius:10px 20px} 左上角 右下角是10px  右上角  左下角是20px

内边距 padding 内容到边框的距离

div{padding:10px}上下左右都是10px

div{padding:2px 3px}上下2px 左右3px

div{padding:2px 3px 4px}上2px左右3px 下4px

div{padding:3px 4px 5px 6px}上3px 右4px 下5px 左6px 顺时针方向

外边距margin 取值顺序与内边距相同

外边距可以让盒子实现水平居中，需要满足以下两个条件：

 a  必须是块级元素

 b  盒子必须指定宽度width

 .header{width:10px;

        margin:0 auto;}

  section img{width:200px;   插入图片的大小可以用width height改变

           margin-top:30px ;插入图片更改位置，用padding margin

          background-size:200px 120px;背景图片更改只能用background-size，背景图片适                                                                      合做一些小图片，使用产品展示之类的用插入图片

         }

清除元素默认内外边距

*{padding :0;

  margin:0;}

注意：行内元素没有上下内外边距，只有左右内外边距，尽量不要给行内元素指定上下内外边距

外边距合并

使用margin定义块元素的垂直边距时，可能会出现外边距合并问题

a.相邻块元素垂直外边距合并

如果上边元素有margin-button下边元素有margin-top，他们之间的垂直距离不是margin-button与martin-top的和，而是两者较大值，这种现象称为相邻块元素垂直外边距的合并（也称为外边距塌陷）

解决方式：避免就好了，只给一个盒子外边距

b.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距与子元素的上外边距发生合并，合并后的边距为两者中较大值，即使父元素的上外边距为0，也会发生合并。

解决方式：1.为父元素定义1px的上边框或上内边距

                         2.为父元素添加overflow:hidden

 

Content宽度和高度

外盒尺寸计算（元素空间尺寸）

Element空间高度=content  height +padding+border+margin

Element空间宽度=content width+padding+border+margin

内盒尺寸计算（元素大小）

Element height=content height+padding+border

Element width=content width+padding+border

注意：

a  计算宽高属性，只适用于块级元素，对行内元素无效，但是img input除外

b  计算盒子模型的总高度，还应该考虑上下两个盒子垂直外边距合并的情况

c  如果一个盒子没有给定高度和宽度或者没继承父亲的宽高，则padding不会影响本盒子的大小

盒子模型布局稳定性

优先使用width  >padding > margin

原因：

a  margin会有外边距合并，还有IE6下面margin加倍的BUG，所以最后使用

b  padding会影响盒子大小需要进行加减计算，比较麻烦，其次使用

c  width没有问题，经常使用宽度剩余法  高度剩余法来做

box-sizing:bording-box   padding border 不撑开盒子

盒子阴影

语法格式：

Box-shadow:水平阴影  垂直阴影|模糊距离  阴影尺寸  阴影颜色  内/外阴影

           h-shadow  v-shadow|blur       spread     color      inset/outset

水平阴影和垂直阴影必填，其他的可以省略

Outset可以不写，系统默认，想要内阴影使用inset