学习CSS

box-sizing:border-box;的理解

哪里可以用到？

> <div>
		<div class="1"></div>
		<div class="2"></div>
  </div>
  需要把div1与div2并排显示到最外层的div中，且div1,div2的width均设置成50%，如果不对div1与div2加上面样式，div2与div1不会并排显示;

注意一点，我们还可以用另外一种方式实现上面的效果，也是大家推荐的一种

• 对最外层div设置box-sizing:border-box;对div1与div2设置box-sizing:inherit;表示被包裹的两个div继承了最外层的样式。

CSS3弹性盒子的理解

可以用来水平居中，垂直居中，响应式布局（屏幕自适应）

水平居中的实现：需要用到 justify-content属性,内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

><div class="main" style="display: flex;justify-content: center;">
	<div class="item1" style="background: pink;margin: 10px;">1</div>
	<div class="item1" style="background: blue;margin: 10px;">2</div>
	<div class="item1" style="background: green;margin: 10px;">3</div>
</div>

效果如上。

垂直居中的实现：需要用到align-item属性,设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

><div style="display: flex;align-items: center;height: 250px;background: yellow;">
	<div style="background: pink;margin: 10px;">垂直居中1</div>
	<div style="background: blue;margin: 10px;">垂直居中2</div>
	<div style="background: blue;margin: 10px;">垂直居中3</div>
</div>

效果如上。
水平，垂直居中

><div style="display: flex;background: red;height: 250px">
	<div style="margin: auto;background: pink;">水平垂直居中</div>
	<div style="margin:  auto;background: blue;">水平垂直居中</div>
	<div style="margin:  auto;background: green;">水平垂直居中</div>
</div>

效果如上。

其他属性

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
nowrap:默认，弹性容器占一行，宽度超出弹性子项会溢出
wrap:宽度超出，溢出部分弹性子项放到新行。
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex
flex 属性用于指定弹性子元素如何分配空间。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

background用法

body { 
	background:#00FF00 url(bgimg.png) no-repeat 4px 4px;
}

以上属性含义分别是：背景颜色，背景图片，如何重复背景图片，图片放置位置(padding)