CSS3新增伪类，CSS3有哪些新特性，弹性盒布局模型，如何居中div？（九）

CSS3新增伪类有那些？

举例：

• p:first-of-type 选择属于其父元素的首个 < p> 元素的每个 < p> 元素。

• p:last-of-type 选择属于其父元素的最后 < p> 元素的每个 < p> 元素。

• p:only-of-type 选择属于其父元素唯一的 < p> 元素的每个 < p> 元素。

• p:only-child 选择属于其父元素的唯一子元素的每个 < p> 元素。

• p:nth-child(2) 选择属于其父元素的第二个子元素的每个 < p> 元素。

• ::after 在元素之前添加内容,也可以用来做清除浮动。

• ::before 在元素之后添加内容

• :enabled

• :disabled 控制表单控件的禁用状态。

• :checked 单选框或复选框被选中。

CSS3有哪些新特性？

• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
• 圆角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 阴影和反射 （Shadow\Reflect）
• 文字特效 （text-shadow、）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 缩放,定位,倾斜,动画,多背景
  例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

• 一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
• 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
• 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
• 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
• 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
• 在布局上有了比以前更加灵活的空间。

具体：http://www.w3cplus.com/css3/flexbox-basics.html

如何居中div？

1. 水平居中：给div设置一个宽度，然后添加margin:0 auto属性

			div{
				width:200px;
				margin:0 auto;
			 }

2. 让绝对定位的div居中

			div {
				position: absolute;
				width: 300px;
				height: 300px;
				margin: auto;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: pink;	/* 方便看效果 */
			}

3. 水平垂直居中一

确定容器的宽高 宽500 高 300 的层
设置层的外边距

			div {
				position: relative;		/* 相对定位或绝对定位均可 */
				width:500px;
				height:300px;
				top: 50%;
				left: 50%;
				margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
				background-color: pink;	 	/* 方便看效果 */

			 }

4. 水平垂直居中二

未知容器的宽高，利用 transform 属性

			div {
				position: absolute;		/* 相对定位或绝对定位均可 */
				width:500px;
				height:300px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: pink;	 	/* 方便看效果 */

			}

5. 水平垂直居中三

利用 flex 布局
实际使用时应考虑兼容性

			.container {
				display: flex;
				align-items: center; 		/* 垂直居中 */
				justify-content: center;	/* 水平居中 */

			}
			.container div {
				width: 100px;
				height: 100px;
				background-color: pink;		/* 方便看效果 */
			}