前端笔记--CSS
- ！important
- 内联样式
- id选择器 100
- 类选择器 伪类选择器 属性选择器 10
- 元素选择器 伪元素选择器 1
- 其他选择器（通配符、子选择器、相邻选择器等） 0
注意：计算权重时不进位，如11个类选择叠加的优先级低于1个id选择器
雪碧图
使用
1.使用background-image:url()引入雪碧图
2.利用background-position属性结合background-size,background-repeat等属性定位需要的图标
优点
1.将多张图片合并到一张图片中，减小图片的总大小
2.减少HTTP请求数，提高加载性能
base64的使用
1.减少HTTP请求数，提高加载性能
2.适用于小图片
3.使用base64会增加图片体积（约为原图的4/3）
伪类和伪元素的区别
1.伪类表示一种状态，如:hover表示鼠标悬停在元素上的状态
2.伪元素是真的有元素，如::before可以在元素内容前面插入新内容
3.css3要求使用双冒号表示伪元素，单冒号表示伪类
如何美化checkbox
1.借助lable for 标签通过id绑定input，这样在点击label时就相当于点击了checkbox
2.将input标签隐藏
3.设置未选中时label标签的样式，选中时通过相邻选择器:checked + label设置选中时的样式
如何使用css画一个三角形
1.将div的宽高设为0
2.设置左右下边框（像素大一点），将左右边框设为透明(transparent)
如何设置文本溢出隐藏显示...
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
实现两栏（三栏）布局的方法
- 表格布局 （父元素 display:table，子元素 display:table-cell）
- float+margin布局
清除浮动的方法：
1.给父元素设置overflow:hidden
2.使用after伪元素清除浮动
.clearfix::after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
- absolute+margin布局（父元素要设置相对定位）
- inline-block
- flex弹性布局
如何适配移动端（响应式布局）
1.设置viewport <meta name="viewport" content="width=device-width,inital-scale=1.0" />
2.rem 媒体查询 百分比/vh vw
css动画
transition
补间动画
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
}
div:hover
{
width:300px;
}
animation(keyframes声明动画)
关键帧动画
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
若要使用逐帧动画则需要指定 animation-timing-function:step(1)
transition和animation的区别
1.transition需要通过hover或js事件来配合触发，而animation结合keyframes直接触发。
2.transition是样式值的过渡，只有开始和结束两帧，只能触发一次，而animation可以设置多个帧，循环播放等。
css预处理器
常见的css预处理器
1.less(node.js)
2.sass(ruby)
预处理器的能力（以less为例）
1.代码嵌套 反应层级
2.声明变量 @baseColor:#fff
3.mixin extend 代码块，减少重复代码
.block(@baseColor){
background-color:@baseColor;
position:relative;
}
.div{
.block(@baseColor);
}
.block{
background-color:@baseColor;
position:relative;
}
.div:extend(.block){
}
4.loop循环(递归循环)
有规律的样式
5.import模块化
@import "./header.css"
预处理框架：lesshat/EST