css 盒子
# 盒子简介
盒子区域属性：width(宽度)、height(高度) margin(外边距) border(边框) padding(内边距) content(内容)
# 标准模式和怪异模式
标准模式：浏览器按 W3C 标准解析执行代码；在标准模式（W3C 标准）下，盒模型为标准盒模型
怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。在怪异模式下，盒模型为 IE 盒模型
# 盒子模型
- box-sizing 设置
content-box（标准盒模型）
border-box（IE 盒模型）
- 默认情况下盒模型
如果是定义了完整的 doctype 的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，
如果 doctype 协议缺失，会由浏览器自己界定，在 IE 浏览器中 IE9 以下（IE6.IE7.IE8）的版本触发怪异模式(IE 盒模型)，其他浏览器中会默认为 W3c 标准模式。(标准盒模型)
# 标准盒模型
属性 width,height 只包含内容 content，不包含 border 和 padding。
width = 内容的宽度
height = 内容的高度
盒子的大小= content + border + padding + margin
# IE 盒模型
属性 width,height 包含 border 和 padding，指的是 content+padding+border。
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
盒子的大小= width（content + border + padding） + margin
# 盒子属性
# width
min-width、max-width、width 的包含(优先级关系)关系
min-height/min-width 的初始值为 auto
max-height/max-width 的初始值为 none
max/min-width 超越！Important，具有最高优先级
<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }
<--此时图片的真实宽度应该为256px-->
2
3
- width > min-width > max-width 元素宽度度：min-width
# height
height > min-height > max-height 元素高度：min-height
# margin
margin 百分比时是基于父元素的宽度来计算
# padding
padding 的百分比是相对于父元素宽度，如果父元素有宽度，相对于父元素宽度，如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。
将 Padding 设置为负值无效。