定义盒子模型的计算方式

box-sizing:content-box; 默认值,我们定义的width/height是内容区域

元素占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

box-sizing:border-box;我们定义的width/height，是指border包含部分的宽高(含border)

元素占地宽度=左外边距+width+右外边距

border-box使用的时机，一个容器内，在一行显示多个元素，如果子元素的width使用%定义，那么基本就要使用border-box了

border-style: none; border-color: initial;">

background-image:url(09.png);

background-repeat:

取值：1.repeat 默认值 平铺

2.no-repeat 不平铺

3.repeat-x  水平方向平铺

4.repeat-y  垂直方向平铺

background-position:x y;

取值：1.px为单位的数字

2.%

3.关键字  x:left/center/right   y:top/center/bottom

background-size:x y

取值，取两个值，是分别设置宽高

取一个值，是设置宽，让高自适应

1.以px为单位的数字

2.%

3. cover 覆盖，要求容器被全部填满，图片显示不全没关系

4.contain 包含。让容器可以完成的包含整张图片。图片必须完整，

容器是不是有空白区域，没关系

background-attachment

取值：scroll 默认值，背景图会跟随页面滚动条而滚动

fixed 固定，背景图相对于页面位置固定

不会跟随页面滚动条滚动

但是只会在原容器区域显示

background:

取值：color image repeat attachment position;

最精简方式  background:color/image;

渐变是指多种颜色，平缓变化的一种显示效果

渐变的主要因素

色标，一种颜色，和他出现的位置

一个渐变，最少两个色标

渐变分类

1.线性渐变，以直线的方式来填充渐变色

2.径向渐变，以圆形的方式来填充渐变色

3.重复渐变，将线性，径向渐变重复几次实现

background-image:linear-gradient(方向 , 色标1，色标2.....)

方向angle：取值

1.关键字  to bottom

to right

to left

to top

2.角度值  0deg  to top

90deg to right

180deg to bottom

270deg to left

色标color-point:取值

颜色+位置

1.只写颜色不写位置，一般用于只有两个色标，对应开头和结尾

linear-gradient(0deg,#000,#0ff)

2.颜色+px为单位的数字

linear-gradient(0deg,#000 0px,#ff0 50px,

#000 100px,#0ff 150px,#000 200px)

3.颜色+%

background-image:linear-gradient(0deg,#000 0%,

#ff0 25%,#000 50%,#0ff 75%,#000 100%);

background-image:radial-gradient(半径 at 圆心,色标1,色标2.....)

半径取值 px为单位的数字

圆心取值 ：1.以px为单位数字  x  y

2.x% y%

3.关键字  x: left/center/right

y:top/center/bottom

色标取值 ，1.颜色+px 颜色的填充，就与半径没有关系了

2.颜色+% 这里的位置，是半径的%

重复的线性渐变

background-image:repeating-linear-gradient(45deg,#000 0px,#ff0 10px,#000 20px,#0ff 30px,#000 40px);

重复的径向渐变

为了兼容低版本浏览器，写的css代码，叫做css hack

渐变属性，兼容低版本浏览器的写法

1.添加前缀

chrome/safari    -webkit-

firefox           -moz-

IE                -ms-

opera            -o-

2.线性渐变的方向，发生了改变

top/ right/ bottom/ left

background:-webkit-linear-gradient( bottom,#f00,#00f);

background:-ms-linear-gradient( bottom,#f00,#00f);

background:-o-linear-gradient( bottom,#f00,#00f);

background:-moz-linear-gradient( bottom,#f00,#00f);

font-size:

取值：px/pt/em/rem为单位的数字

font-family

取值：pc中字体库里有的字体，如果字体名称代空格，必须加""

多个字体名称，使用,隔开

font-family:chiller,华文彩云,"mv boli";

font-weight:

取值  1.关键字  lighter

normal

bold

bolder

2.无单位，100的整倍数，最大值1000

font-style:italic;

normal

font-variant:small-caps;

font:style variant weight size family;

最简写法  font:size family