Day03（css3盒模型，demo 渐变）

CSS3 盒模型

1.盒模型分为两种：W3C盒模型和IE盒模型

image.png

W3C盒模型标准：盒子宽度=内容宽度，就是width设置多宽，盒子就是多宽
IE盒模型标准：盒子宽度=内容宽度+内边距宽度+边框宽度：width=width+padding+border
IE盒模型里面，虽然父元素宽度有很大，但是子元素只继承width
区别：主要就是用于区分宽度和高度的计算方式，而我们的CSS3对盒模型做出了定义，允许开发人员指定计算方式
IE盒模型模式
box-sizing:border-box；//盒模型不被padding和border撑大
在开发过程中，想要加上padding又不希望盒子被撑大，可以加上这条属性↑
W3C盒模型模式：Box-sizing:border-box；正常模式，默认模式

2.背景

将背景从padding开始裁切
background-clip: padding-box;

将背景从内容开始裁切
background-clip: content-box;

默认，从边框开始裁切
background-clip: border-box;

2.2 原点

修改背景定位的原点
/将背景图片原点定位到边框/
/background-origin: border-box;/

/将背景图片原点定位到内容区域/
/background-origin: content-box;/

/默认，将背景图片定位到padding/
background-origin: padding-box;

在CSS里面，我们一个一次性设置多个背景图片，并且可以修改他们每个背景图片的所在位置，从而搭配出一个完整的背景图片

3.渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变，我们可以实现许多炫酷的效果，有效的减少图片的使用数量，并且，有很强的适应性以及可拓展新
渐变主要分三种：线性渐变、径向渐变、重复渐变
线性渐变：指沿着某一条指向方向产生渐变效果
径向渐变：指从一个中心点往四周发散的一种渐变
圆形是不是椭圆的一种，椭圆如果半径相同是不是就是原型

伸缩布局（弹性盒子）

CSS3在布局方面，做出了很多的改进，让我们对块级元素的布局排列变得非常灵活，适应性很强，其强大的伸缩性，在响应式开发中可以发挥极大地作用；

伸缩布局，我们要有一个概念，主轴和次轴：
主轴就是X轴，次轴就是Y周

两端对齐方式：
给父级元素设置：display：flex；justify-content:space-between;

伸缩布局，有一个很重要的一点，就是要给元素的父元素，
设置display：flex
Flex-direction:改变主轴方向，从左往右、从右往左、从上往下、从下往上（不改变子元素的对齐方式）

Justify-centent:改变子元素在主轴上的对齐方式（不改变主轴）