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，浏览器会自动计算外边距以控制块级元素水平方向居中显示的效果

5. 简洁写法
   margin:value;(四个方向相同)
   margin:value(上下) value(左右)
   margin:value(上) value(左右) value(下)
   margin:value(上) value(右) value(下) value(左)

6. 外边距合并
   两个元素的外边距相遇时会合并成一个margin，外边距的高度等于两个合并的外边距的较大高度

7. 行内元素以及行内块(input)元素外边距特点：行内元素垂直外边距无效(img除外)，水平外边距相遇则两个值相加;行内块设置垂直外边距，整行元素都会跟着改变

8. 当父元素没有上边框且为第一个子元素设置上外边距时会导致外边距溢出作用到父元素：
   1)通过给父元素添加上边框会影响父元素的占地高度；
   2)通过给父元素添加内边距会影响父元素的占地高度；
   3)父元素添加overflow:hidden;
   4)在父元素的第一个子元素之前，添加空<table></table>，这是因为table高度只与内容有关

1.3 内边距

1.3.1 内边距定义

内边距：内容区域和边框之间的空间；会扩大元素边框占用的区域

1.3.2 内边距padding

内容与框线之间的距离，padding:value;
内边距属性值可以为像素、百分比；
单边设置padding-top/right-bottom-left:value;

1.3.3 简洁写法

padding:value;(四个方向相同)
padding:value(上下) value(左右)
padding:value(上) value(左右) value(下)
padding:value(上) value(右) value(下) value(左)

2 背景

2.1 概述

背景样式控制HTML元素的背景颜色、背景图像

2.2 背景属性

2.2.1 背景色

background-color：为元素设置背景色，可取值为任何合法的颜色值以及transparent；
会填充元素的内容、内边距和边框；如果边框有透明部分，则透过显示背景色；

2.2.2 背景图片

以图片作为背景，可以设置图像的位置、平铺、尺寸等.
默认值是none，表示背景上没有放置任何图像；使用起始字母url附带图像的url值(可以是相对URL或绝对URL)来设置背景图像
background-image:url(“image/bg_01.jpg”);

2.2.3 背景平铺

默认背景图像在水平和垂直方向上重复出现(平铺)，创建出“墙纸”的效果，使用background-repeat属性控制背景图像的平铺效果。
repeat：默认值，在垂直和水平方向重复
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次

2.2.4 背景图片尺寸

background-size，规定背景图像的尺寸，取值方式：
value1 value2：宽度、高度；
value1% value2%：百分比；
cover：背景图像扩展至足够大以完全覆盖北京区域，可能无法显示部分图片
contain：背景图像扩展至最大尺寸，使宽度和高度完全适应内容区域

2.2.5 背景图片的固定

background-attachment：默认背景图像会随着页面滚动而移动；
通过background-attachment属性设置：
scroll：默认值，背景随文档滚动,相对元素固定
fixed：背景图像固定,相对窗口固定

2.2.6 背景定位

background-position属性改变图像在背景中的位置。

2.2.7 背景属性

background属性在一个声明中设置所有背景属性。
语法：background:color url() repeat attachment position;
如果不设置将使用默认值

3 渐变

3.1 渐变定义

渐变指多种颜色之间的平滑过渡；
可以指定多个中间颜色值(至少两个色标)，每个色标包含一种颜色和一个位置；
渐变可以用在任何使用背景图片的地方

3.2 渐变语法

background-image属性进行设置
linear-gradient：线性渐变
radial-gradient：径向渐变
repeating-linear-gradient：重复线性渐变
repeating-radial-gradient：重复径向渐变

3.3 线性渐变

linear-gradient(angle, color-point1, color-point2,…)
angle：第一个参数指定渐变的方向，to top(0 deg)，to right(90deg)，to bottom(180 deg)，to left(270deg)；
color-point：表示颜色的起始点、中间点或者结束点，取值颜色和位置的组合，red 0、green 50%等
Eg. background-image: linear-gradient(90deg, red 0, #ccc 30%, #fff 100%);

3.4 径向渐变

radial-gradient(size at position, color-point1, color-point2,…)
position：第一个参数指定渐变的圆心位置，默认值为center，也可以取值为数值x y、百分比、或者关键字left/center/right top/center/bottom；
color-point：表示颜色的起始点、中间点或结束点，取值为颜色和位置的组合。
Eg. background-image: radius-gradient(200px at left top, red, blue);

3.5 重复渐变

重复线性渐变
repeating-linear-gradient(angle, color-point1, color-point2,…)
angle：第一个参数指定渐变的方向，to top(0 deg)，to right(90deg)，to bottom(180 deg)，to left(270deg)；
color-point：表示颜色的起始点、中间点或者结束点，取值颜色和位置的组合，red 0、green 50%等
Eg. background-image: repeating-linear-gradient(to top, #fff, #f9f9f9 10px, #ccc 50px);

重复径向渐变
repeating-radial-gradient(size at position, color-point1, color-point2,…)
position：第一个参数指定渐变的圆心位置，默认值为center，也可以取值为数值、百分比、或者关键字；
color-point：表示颜色的起始点、中间点或结束点，取值为颜色和位置的组合。
Eg. background-image: repeating-radius-gradient(50px at center, red 0px, green 20px, orange 50px);

3.6 浏览器兼容性

各浏览器新版本均支持渐变属性。
不支持的版本：
Firefox需要前缀-moz-
Chrome和Safari需要前缀-webkit-
Opera需要前缀-o-
IE -ms-
使用兼容性写线性渐变方向不能使用to top ,j直接写起始点top right bottom left;background-image:-webkit-linear-gradient-(bottom, #f00 0px, #ff0 100px, #0ff 200px);