盒子模型 小总结

盒子模型的组成：

border边框          content内容                padding内边距    margin外边距

边框：

border-width:定义边框粗细，单位px      border-style:边框样式（主要记住：solid实线边框  dashed虚线边框  dotted点线边框）  border-color:边框颜色

边框的复合写法：border:  1px  soild  red;    （没有顺序之分）。还可以分开写,例如border-top设定的是上边框（在复合写法和分开写是，一定要注意边框的层叠性）

表格的细线边框：border-collapse: collapase（合并边框）

边框会影响盒子的实际大小：（解决方案）

1.测量盒子大小的时候，不量边框                    2.如果测量的时候包含了边框，则需要width  height 减去边框宽度（是两边哦，如果边框宽度是10px，则需要减去20px）

内边距：（边框与内容之间的距离）

padding-top  padding-left  padding-bottom  padding-right

内边距会影响盒子的大小：

1.解决方案：让width  height  减去多出来的内边距大小即可，也是减两边

2.优点：在某些导航栏中的内容文字的数量是不一样的，有两个字的也有三个字的，这时之间的距离就会不一样，要利用内边距会撑大盒子来解决

3.如果盒子本身没有指定width  height属性，则此时内边距padding不会撑开盒子大小

外边距margin 与内边距的格式一样

外边距的典型应用：让块级盒子水平居中，要满足2个条件：

1.盒子必须指定了宽度width                            2.盒子左右外边距都设置为auto（margin:  0  auto;）

3.注意：让行内元素与行内块元素水平居中给其父元素添加 text-align:  center即可

清除内外边距：

浏览器的不同，所默认的内外边距也不同，因此在布局时，首先要清除内外边距，写代码时的第一行代码  *  { padding:  0;  margin:  0;}