CSS基础

position

盒模型

IE 盒模型

标准盒模型

box-sizing

box-sizing：content-box（默认：标准盒模型）

box-sizing：border-box（怪异模式：width = border + padding + 内容的 width）

当你想让两个子容器 float:left，宽度各 50%，然后给一点 padding，最后让子容器并排充满父容器，一切想的挺美好，然而结果并不是这样。

因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width 就不能 50%了，只能是 50%再减去 padding 的像素值

弹性盒模型

弹性盒子由弹性容器和弹性子元素组成；

通过 display：flex 或者 inline-flex 定义为弹性

animation

animation: name duration timing-function delay iteration-count direction;

animation-name:绑定到选择器的 keyframe 名称;

animation-duration:规定完成动画所花费的时间，以秒或毫秒计;

animation-timing-function:规定动画的速度曲线。

animation-delay:规定在动画开始之前的延迟。

注意：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

注意：此处虽然跳过 2 秒，但同样是完整的动画，不是从动画的 2s 处开始执行

animation-iteration-count:规定动画应该播放的次数。

infinite:无限次

animation-direction:规定是否应该轮流反向播放动画。

animation-direction: normal|alternate;//正|反

animation-play-state：暂停/播放

paused, running

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 2s infinite;
}

@keyframes mymove
{
0% {left:0px;}
50% {left:200px;}
}

在动画进行到 50%的时候，进行 200px 位移，这里的 50%就是上面定义动画时的 2s 的 50%，也就是 1s。

CSS Sprite

使用 css Sprite

npm 的 cssSprite 库 sprity

用 gulp 的话：

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprity = require('sprity');

// generate sprite.png and _sprite.scss
gulp.task('sprites', function () {
  return sprity.src({
    src: './src/images/**/*.{png,jpg}',
    style: './sprite.css',
    // ... other optional options
    // for example if you want to generate scss instead of css
    processor: 'sass', // make sure you have installed sprity-sass
  })
  .pipe(gulpif('*.png', gulp.dest('./dist/img/'), gulp.dest('./dist/css/')))
});

伪类和伪元素

MDN：伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。

注意： 与伪类相反，伪元素可被用于为一个元素的特定部分应用样式。

注意：与伪元素比较，伪类能够根据状态改变元素样式。

selector::pseudo-element {
  property: value;
}

注意：一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

注意：按照规范，伪类用单冒号，伪元素用双冒号

之所以叫伪元素，是因为他修饰不在文档树中的部分；不是真实存在的。

清除浮动

如果一个父元素的所有子元素如果都是浮动的，那么这个父元素是没有高度的，但是父元素并没有脱离正常的文档流，仍然占据正常文档流的空间 那么：

1. 如果这个父元素的相邻元素是行内元素，那么这个行内元素将会在这个父元素的区域内见缝插针，找到一块放得下它的地方
2. 如果相邻的元素是一个块级元素，那么设置这个块级元素的 margin-top 将会以这个父元素的起始位置作为起点。

参考 1:伪元素实用小技巧

参考 2:前端盒模型

Donate