CSS查漏补缺（四）-CSS3属性/居中

最近在图书馆借了一本CSS方面的书想巩固下CSS基础，书名是《CSS设计指南》,看完感觉是一本还错的CSS基础书籍，然后我便把自己CSS方面还比较薄弱的地方写到了笔记里，以后自己还可以复习下，嘻嘻~

CSS3过渡

transition-property 过渡的CSS属性名
transition-duration 过渡的持续时间
transition-timing-function 过渡的调速函数，如ease-in,ease-out,ease-in-out,linear(默认值)
transition-delay 过渡开始前的延迟时间
transition过渡的简写属性，如transition:color 2s ease-in 1ms

用CSS创造三角形

通过加宽盒子的边框，将盒子的宽高都设定为0，同时将其他三个边框设为transparent，就可以用CSS造出一个三角形。

div{
    border:12px solid;
    border-color:transparent red transparent transparent;
    height:0px;
    width:0px;
  }

我们可以将以上技术与::before伪元素结合起来

div::before{
		conetent:"";/*需要有内容，此处是一个空字符串*/
		position:absolute;
		right:100%;
		top:17px;
		border:12px solid;
		border-color:transparent red transparent transparent;
		height:0px;
		width:0px;
			 }

css3盒子阴影属性

box-shadow:水平偏移量垂直偏移量模糊量扩展值颜色阴影外部/内部;
阴影外部内部：inset/outset

CSS居中没有宽度的元素

在一个元素内居中另一个元素有时候会很困难。对于常规的，静态定位的元素，可以使用左右浮动，text-align属性，margin:0 auto来居中，不过这些居中的元素都必须是有宽度的。那么如何居中一个没有宽度的元素呢？

使用display:inline-block + text-align:center居中
display:inline-block属性：inline-block具有一些特殊的混合行为。正如他的名字所暗示的，它既有块级元素的特点：即可以为他设置外边距和内边距，也可以通过它简便而有效的包围其他块级元素。也有行内元素的行为：即它会收缩包裹自己的内容，而不是填充父元素。

CSS3变换

CSS3有两个变换属性：transform,transform-origin
transform属性可以调用函数，实现不同形式的变换，传入的参数值可以控制变换的结果。
transform:函数名（数值或x，y值）
以下是变换函数：

scale：用于放大缩小元素（1为标准值）
rotate:根据度数旋转元素（正值顺时针，负值逆时针）
skew:让元素在x轴和y轴方向倾斜
translate:根据指定的距离沿x轴和y轴平移对象

transform-origin:该属性设定元素围绕其变换的原点（left,right,center,right,top,bottom等）

水平垂直居中

CSS水平垂直居中固定高度元素内的一行文本：

`text-align:center;/*水平居中*/`
`line-height:300px;/*垂直居中:行高=容器高度*/`

如果想水平垂直居中容器中的其他元素:

`display:table-cell/*借用表格的行为*/`
`vertical-align:middle;/*垂直居中*/`
`text-align:center;/*水平垂直居中*/`

利用margin + position：margin 水平垂直居中:
以前一直以为margin：0 auto 只能实现水平居中，其实配合绝对定位是可以是实现水平垂直居中的。
margin: auto;/*前提是必须声明元素高度*/ position: absolute; top: 0; left: 0; bottom: 0; right: 0;
使用绝对定位实现水平垂直居中:

position:absolute;
width:650px;
height:298px;
left:50%;
top:50%;
margin-left:-325px;  /*设置为宽度的一半*/
margin-top:-149px;   /*设置为高度的一半*/

还有几种方法后续更新…