CSS3_2.框模型、背景、渐变

1 框模型

1.1 框模型

块级元素：独立成行，可以设置宽高，margin上下有效
行内元素：与行内元素和行内块共用一行，宽高无效，margin上下无效
行内块元素：与行内元素和行内块共用一行，可以设置宽高，margin上下有效；行内块元素一经调整会影响整行元素

框模型Box Model定义元素框处理元素内容、内边距和外边距的方式

width和height指定内容区域的宽度和高度；增加内边距、边框和外边距不会影响内容区域尺寸，只会增加元素框的总尺寸。
对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距

box-sizing指定框模型的计算方式,取值:
默认值content-box,对象宽度计算方式为上述方式,设置的width/height是内容区域的大小;
border-box设置的width/height是内容区域+左右内边距+左右边框大小;
元素占地宽度=左右外边距+width;
元素占地高度=上下外边距+height;

1.2 外边距

1. 外边距定义：围绕在元素边框周围的空白区域是外边距；透明的外边距会在元素外创建额外的空白。

2. 外边距margin：与下一个元素之间空间量 margin:value;
   单边设置：margin-top/left/right/bottom:value;
   外边距的属性值可能为px(像素)、百分比(%)、或自动(auto)和负值
   auto自动计算块级元素的外边距，margin:0 auto控制块级元素在水平方向居中；margin:100px auto上下100px，左右居中对齐；margin: auto等于margin: 0 auto垂直外边距将变为0

3. 默认以下块级元素存在外边距：body、h#、p、ol、ul、dl、pre；使用样式重写*{}margin:0;padding: 0;}重置具备外边距的元素默认样式。
   blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,
   hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

4. margin取值为autoÿ