2. CSS之盒模型

猜谜： 会上同心盛况空前（打一字）

问题

1. 内联元素是否同样适用于以上的盒模型?
2. 内联元素与块级元素在盒模型是否有区别？有什么区别?
3. 关于元素的盒子模型宽高的理解?

盒模型解释

1. 针对以上盒模型分析有四个内容，分别是 margin,border,padding,content
2. 释义： margin 外边距 | border 边框 | padding 内边距 | content 内容区域
3. 表现形式： 可颜色修饰　border, content . 不可颜色修饰： margin padding
4. 填充顺序： 顺时针， 上-右-下-左

margin

1. 内联元素<inline>设置margin-top，margin-bottom是无效的。
2. margin是可以设置负值，使其反向移动

border
巧用border的边框实现三角形

padding

1. 内联元素添加padding会使元素宽高发生变化， 但不会使其他元素产生移动，显示为重叠效果
2. 块级元素添加padding，如果padding大于元素原本的宽高，padding的值将会影响元素的宽高, 且同时会影响其他元素

content
元素显示部分

box-sizing

box-sizing: content-box|border-box;
content-box 设置宽高的时候， 元素总宽高 = margin + border + padding + (width|height)
border-box 设置宽高的时候， 元素总宽高 = margin + (width|height)