CSS基础知识点

清除浮动的方式

1、额外标签法（在最后一个浮动标签后，新增加一个标签，给其设置clear: both;）不建议使用

• 缺点：添加无意义标签

2、父级添加overflow属性（overflow:hidden）(不推荐)

通过触发BFC方式，实现清除浮动

• 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3、使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

4、使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
  content: "";
  display: table;
}
.clearfix:after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}

5、父级div定义height

• 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

过渡transition 动画animation

过渡动画：是从一个状态 渐渐的过渡到另外一个状态，经常和 :hover 一起 搭配使用。

• transition（简写属性）： 要过渡的属性 花费时间 运动曲线 何时开始

1. transition-property：(none | all | property)为哪些属性设置过渡效果
2. transition-duration：定义过渡效果花费的时间。默认是 0
3. transition-timing-function：(linear|ease|ease-in|ease-out|ease-in-out)规定过渡效果的时间曲线。默认是 "ease"。
4. transition-delay：规定过渡效果何时开始。默认是 0。
   注：如果想要所有的属性都变化过渡， 写一个all 就可以。

.father .small {
    width: 100px;
    height: 100px;
    background-color: darkcyan;
    float: left;
    /*1. transition: 要过渡的属性  花费时间  运动曲线  何时开始;*/
    /*2. 如果有多组属性，我们用逗号隔开*/
    /*transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;*/
    /*3. all 所有属性都会变化*/
    /*transition:  all 1s ease 0s;*/
    /*4. 过渡写到本身上，而不是 hover里面*/
    /*transition: all 0.5s;*/
    /*5. 扩展，可以设置不同时进行的动画*/
    transition: width 1s, height 1s linear 1s, background-color 1s, transform 1s;
}

.father .small:hover {/* 鼠标经过盒子，我们的宽度变宽200，高度变高200 red */
    width: 200px;
    height: 200px;
    background-color: red;
    transform:rotate(45deg);
}

动画animation

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

默认值： none 0 ease 0 1 normal

• animation-name : 要绑定到选择器的关键帧（动画）名称
• animation-duration : 动画持续时间
• animation-timing-function : 动画的速度变化
• animation-delay : 延迟执行的时间
• animation-iteration-count : 动画的播放次数
• animation-direction : 动画运动的方向

.father .small {
    width: 100px;
    height: 100px;
    background-color: darkcyan;
    float: left;
    position: relative;  /*这里一定要改为相对布局，否则位置不能改变*/
    animation: anim 5s infinite alternate;
}
/*animation：后anim表示这个动画的名字，后面是持续5s*/
/*infinite（无限的，无数的）alternate（交替的轮流的）合在一起：无限轮替*/
@keyframes  anim{
    0%{background-color: cornflowerblue;left: 0px;top: 0px}
    25%{background:skyblue;left: 200px;top:0}
    50%{background-color: deepskyblue;left: 200px;top: 200px}
    75%{background-color: aqua;left: 0px;top: 200px}
    100%{background-color:cornflowerblue;left: 0px;top: 0px}
}

左边固定，右边自适应布局。

1. 左边左浮动，右边加个overflow:hidden;(注意，右边margin-left数值小于左边的宽度则无效)

   #lt{ float: left;width:200px; background: #ff0;}
   #rt{ overflow: hidden; background: #f0f;}

2. 左边左浮动，右边加个margin-left;

   #lt{ float: left; width:200px; background: #ff0;}
   #rt{ margin-left: 200px; background: #f0f;}

3. 左边绝对定位absolute或fixed，右边加个margin-left;

   #lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
   #rt{ margin-left: 200px; background: #f0f;}

4. 左右两边绝对定位，右边加个width,top,left,right

   #lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}
   #rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}

右边固定，左边自适应的布局

1. 左边左浮动，margin-left负值,右边右浮动;

   #lt{float:left; width:100%;background: #00f;margin-right: -200px;}
   #rt{float: right; width: 200px;background: #ff0;}

2. 右边绝对定位，左边margin-right;

   #lt{margin-right:200px; background: #00f;}
   #rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}

3. 左右两边绝对定位，左边加个width,top,left,right

   #lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}
   #rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}

flex布局

• flex-container的属性有flex-direction, flex-wrap, justify-content, align-items, align-content

flex-direction(主轴方向)：

1、 row（布局为一行，从start开始排）
2、 row-reverse(布局为一行，从end开始排)
3、column(布局为一列，从start开始排)
4、column-reverse(布局为一列，从end开始排)

flex-wrap(一条轴线排不下如何换行)：

1、nowarp (不换行，在一行显示)
2、wrap(内容超过后换行)
3、warp-reverse(换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)

justify-content(主轴对齐方式)：

1、 flex-start (start侧对齐，左对齐)
2、flex-end(end侧对齐，右对齐)
3、center(中心对齐)
4、space-between(左右两侧没有间距，中间间距相同)
5、space-around（左右两侧的间距为中间间距的一半）

align-items(交叉轴对齐方式)：

1、stretch; (拉伸)
2、flex-start（start侧开始，上对齐）
3、flex-end（end侧开始，下对齐）
4、center (中心对齐)
5、baseline（基线对齐）

align-content(多根轴线对齐方式)：

1）stretch (拉伸)
2）flex-start (start侧开始，上对齐)
3）flex-end（end侧开始，下对齐）
4）center (中心对齐)
5）space-between（上下没有间距，中间各子元素间距相同）
6）space-around (上下间距之和等于中间各个间距)

flex-item相关属性有order，flex-grow，flex-shrink，flex-basis，align-self

• order(排列顺序)
• flex-grow（放大比例，剩余空间怎么分配,如下图所示，剩余空间的分配比例是1:2:1）
• flex-shrink （缩小比例，超出空间怎么压缩）
• flex-basis (item所占主轴空间，优先级高于width)
• align-self (对齐方式，覆盖align-items)
  参考文章