css基础

0. 浏览器读取选择器是从右向左依次选择

div.test    p   a.son{}

1.选择所有的a.son 返回结果列表
2.检查结果列表中父元素是否有p,返回结果列表
3.返回结果列表中是否有div.test,返回结果列表

0.选择器的权重

!importent  >  内联  > id > class = 属性 = 伪类 > 标签

　　

1.盒子模型

　　盒子模型分类两种：标准盒子模型和IE盒子模型

　　标准盒子模型：width = 内容的实际宽度

　　IE盒子模型：width = 内容宽度+border宽度+padding宽度

　　

2.css3新属性，伪类，伪元素，锚伪点

　　新属性：transform：平移，旋转，缩放等。animation：动画。transition：变化。渐变，阴影，圆角，媒体查询等。

　　伪类：nth-chlid,first-child等

　　伪元素：：before,:after,:first-line,:first-letter

　　

　　

3.实现垂直水平居中

　　

//第一类
.parent{position:relation
    .son{positon:absolute;left:50%;top:50%;transform:translate(50%,50%);  
    }  
}
.parent{position:relation;
    .son{position:absolute;left:0;top:0;right:0;bottom:0;magin:auto;}
}
//第二类
.parent{
     display:flex;justify-content:center;align-items:center;  
}
.parent{
     display:flex;justify-content:center;
     .son{ align-self:center; }
}
//第三类
.parent{
     display:table-cell;vertical-align:middle；text-align:center
     .son{display:inline-block}
}    

　　

4.link和@import区别

　　link：html 标签，用于引用一个外部样式来给html布局

　　@import ： css 标签，用于引进一个样式到另一个样式中

　　

5.清除浮动的原理

　　overflow:hidden , 因为要显示子元素，所有父元素必须有高度

　　在父元素加上<div style='clear:botn'></div>  , 因为要显示未浮动的div,div又必须在float的div下面左右必须要有高度