盒子模型的个人理解

盒子模型

	在所有html中，几乎所有的元素都可添加margin,border,padding三个属性。分
别表示为元素的外边距、边框、内填充。内容被包裹在内填充里面。如下图所展示

元素的实际宽高

元素的实际宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

padding的用法

1. padding是长在内容和盒子之间的距离

2. padding是长在父元素padding里面的

3. padding的作用：主要控制子元素在盒子内部的的、位置关系

4. padding是添加在父元素上面

5. padding可以把盒子撑大！

   • 如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding
   • 如果一个盒子没有固定大小（被内容撑开），添加padding 不用减

6. 单一方向设置padding-方向

7. padding设置方法

   • 同border（上右下左）

8. padding不会对背景图的位置造成影响

9. padding不能为负值

margin的用法

• margin长在盒子外围
• margin控制当前元素 与 同级元素的位置关系
• margin不会改变盒子的大小
• margin设置方法同padding
• margin可以设置负值
• margin常出现的bug：
  • 同级元素上下两个margin的值不会叠加，会重合，取最大值
  • 当父元素和第一个元素都没有浮动，给第一个子元素添加margin-top：会错误的把margin-top：添加在父元素上

border的用法

1. 默认情况下边框是长在元素宽高之外

2. 属性拆分

   • border-width：边框大小
   • border-color：边框颜色
   • border-style：边框类型（solid实线dashed虚线dotted点状线double双线none没有线条）

3. 单独方向

   • border-方向（top,right,bottom,left）

4. border-width/color/style

   • 属性值：顺时针
     • 一个值：四周
     • 两个值：上下，左右
     • 三个值：上，右左，下
     • 四个值：上，右，下，左

5. transparent 透明边框

小结

• 布局是网页中至关重要的一步，如果布局出现问题，之后的交互、设计都会异常困难。
• 盒模型是网页布局的基础，一定要弄清几个属性的作用位置，相互之间的关系和影响。
• 前端之路才刚刚启航，瑞斯拜。