前端笔记--CSS

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
{
100px;
height:100px;
background:blue;
transition:width 2s;
}

div:hover
{
300px;
}

animation(keyframes声明动画)

关键帧动画

div
{
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