基础:标签选择器、类选择器、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