关于CSS垂直居中单行的行内元素解决方案多行的行内元素解决方案组合使用display:table-cell和verica

CSS的水平、垂直居中

垂直居中

单行的行内元素解决方案

.parsent{
    height:22px;
}
a{
    //给子元素设置line-height的高度和父元素的height高度一样
    line-height:22px;
}

多行的行内元素解决方案
组合使用display:table-cell和verical-align:middle属性来定义需要居中的父元素

.parsent{
    width:200px;
    height:200px;
    //以下属性垂直居中
    display:table-cell;
    verical-align:middle;
}

已知高度是块元素解决方案

.child{
    position: absolute;
    top:50%;
    marin-top:高度的一半：
}

水平居中
- 行内元素解决方案
  只需要把行内元素包裹一个在属性display的父元素中，并且父元素添加一下属性即可
```
.parsent{
    text-align:center;
}
```
- 块元素解决方案
  使用margin属性，例如margin:10px auto;
- 多个块元素解决方案
  将元素的display属性设为inline-block,并且把父元素的text-align属性设置为center即可
```
.chldren{
    display:inline-block;
}
.parsent{
    text-align:center;
}
```

水平垂直居中

已知高度的块元素解决方案

//方案1
.child{
    position: absolute;
    top:50%;
    left:50%;
    right:50%;
    bottom:50%;
    margin:auto;
}
//方案2
 .child{
    position: absolute;
    top:50%;
    left:50%;
    right:50%;
    bottom:50%;
    margin-left:宽度的负一半;
    margin-top:高度的负一半;
}

未知高度和宽度的方案

.child{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%，-50%)//使用css3的transform来实现 
}

使用flex布局

.parent{
    display: flex;
    justify-content:center;
    align-items: center;
    // 注意这里需要设置高度来查看垂直居中效果 
    background: #AAA;
    height: 300px;
}

父元素不需要宽度居中

div{
    display: box;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -webkit-box-align:center;
    -moz-box-align:center;
}

CSS的盒子模型

标准盒子模型：包含了 padding、margin、border、content
IE盒子模型：包含了padding、border、content

css选择符有哪些？哪些属性可以继承？优先级算法如何？CSS3新增伪类有哪些？

选择符
id 选择器： #myid
类选择器： .myclass
标签选择器：div,h1,p
相邻选择器：h1+p
子选择器：ul>li
后代选择器：li a
通配符选择器：*
属性选择器：a[rel = "external"]
伪类选择器：a:hover,li:nth-child
可继承属性
font-size，font-family，color，text-indent
不可继承属性
border，padding，margin，width，height
优先级算法
1.优先级就近原则，同权情况下样式定义最近着优先
2.载入样式以最后载入的定位为准
3.!important > ID > class > 标签元素
4.important比内联高，但内联比ID高
CSS3新增伪类举例
1. p:first-of-type：选择属于其父元素的首个p元素的每个p元素
2. p:only-of-type: 选择属于其父元素唯一的p元素的每个p元素
3. p:nth-child(2): 选择属于其父元素的第二个子元素的每个p元素
4. :enabled :disabled 控制表单控件禁用状态
5. :checked 单选框或复选框被选中
CSS3新特性
1. CSS3圆角(border-radius)，阴影(box-shadow)
2. 对文字加特效(text-shadow)，线性渐变(gradient)，旋转(transform)
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜
4. 增加了更多的CSS选择器多背景 rgba
5. 在CSS3中唯一引入的伪元素是 ::selection
6. 媒体查询，多栏布局
7. border-image

link 和 @import的区别？

link属于XHTML标签，而@import是CSS提供的
页面加载时，link同时被加载，而@import引用的css是等到页面加载完成在加载
import只在IE5以上才能识别，而link是XHTML标签，没有兼容性问题
link方式的样式的权重高于@import的权重