【前端】CSS知识梳理

基础：标签选择器、类选择器、id选择器和通配符选择器

font:font-style(normal) font-weight(400) font-size(16px) /line-height(0) font-family(宋体） 

复合： 后代选择器（ ）、子选择器（>)、并集选择器(,)、伪类选择器(:)、连接伪类（a:)、：focus

 块元素（独占一行）、行内元素（内联元素）、行块元素（<img/><input/><td>)

->diaplay转换 block、incline、incline-block

继承性属性：text-，font-，line-这些元素开头的可以继承，以及color属性

 

盒子模型 ：边框、外边距、内边距、和实际内容

 

 居中：块元素（margin:0 auto;[需设置width]）

行内或行内块:给父元素添加text-align:center

 border-radius:    正方形->⚪：50%

 border-shadow:不占空间，不会影响布局

text-shadow

 浮动（多个块元素横向排列找浮动，纵向排列找标准流）

清楚浮动方法

1.额外标签发（隔墙法）【W3C推荐】

2.父级添加overflow属性

3.父级添加after伪类

4.父级添加双伪元素

定位 

 

display:none不再占有位置、visibility:hidden继续占有原来位置  verflow 

精灵图sprite

 CSS三角形

 

溢出文...显示

HTML5新特性

• 语义化标签，有利于SEO
•  多媒体、音视频数据
• input类型、属性扩展

CSS3新特性

• 属性选择器，权重与类、伪类选择器一样  E[att=""]
• 结构伪类选择器 E:first-child  E:child()《——DOM树

           nth-child(n) 2n偶数 2n+1奇数

• 伪元素选择器：：before  权重为1

 CSS过渡transition

转换

translate(x,y)  translate（50%，50%） 相对于本身元素的  rotate scale 

 动画

 

流式布局 flex布局

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 

flex-direction设置主轴的方向

justify-content设置主轴上的子元素的排列方式

flex-wrap:wrap   换行，flex布局默认不换行

align-items

flex布局子项常见属性 

flex属性

align-self属性

order属性

 rem布局

媒体查询

 

less

响应式布局

bootstrap