第四周笔记

第四周笔记

一、标准流

什么是标准流？

标准流文档流，是指在不借助任何特殊的css排列规则元素的排布规则；浮动和定位会脱离脱离标准流，也就是不受这套规则的约束
标准流中的
块级元素独占一行,垂直方向上从上往下进行排列；可设宽高
块级元素不设宽度的情况下,默认宽度为其父级的100%
行内元素将与其他行内元素从左到右进行排列，不可设置宽高,由其内容决定其宽高；input与img是行内元素，但是可以设置宽高

二、浮动float

1、div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。浮动让某个div元素脱离标准流，漂浮在标准流之上。

2、**左浮动(float:left;)，漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。**这里的靠左、靠右是说页面的左、右边缘。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

3、position：定位时，使用 left，right，top，bottom 中至少一个值定位。
（1）static：正常文档流布局，默认值，常用于重置 定位属性，静态定位的元素不会受到 top, bottom, left, right影响。
（2）relative(相对)：不脱离文档流，其“相对于”它在文档流中原位置进行垂直水平偏移，所有后序元素原位置不变，但可能覆盖后序元素，但不算层叠，不可通过 z-index 属性定义。
（3）absolute(绝对)：脱离文档流，不占据空间，所有后序元素自动前移，绝对定位元素的起点位置相对于最近已定位（只需指定一个position属性）祖先元素(从父元素开始搜索）以外边距后为起点（可存在内边距里,如图：）。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（body)。可多重层叠，通过 z-index 属性定义，z-index属性要与定位一起使用才有效，否则无效。 定位后生成一个块级框，而不论原来它在文档流中是何种类型的框。
（4）子绝父相：父级需要占有位置，因此是相对定位，子盒子不需要占有位置，可以放到父盒子里的任何一个地方，不会影响其他的兄弟盒子，则是绝对定位
（5）fixed

特性：
    1.元素脱离正常文档流，不占位(也脱离文本流，全脱)
    2.始终相对于浏览器窗口四个角为原点进行固定定位的
    3.不会随页面的内容滚动而滚动
    4.能使不能设置宽高的行级元素设置宽高
    5.提升层级
    6.如果没有定位偏移属性，对元素本身有影响；

4、清除clear
(1)left 在左侧不允许浮动元素。
(2)right 在右侧不允许浮动元素。
(3)both 在左右两侧均不允许浮动元素。
(4)none 默认值。允许浮动元素出现在两侧。
5、高度塌陷的产生条件和解决方法
什么是高度塌陷？
（1）当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷。
（2）解决
1、给父元素添加overflow：hidden；
缺点，会对溢出的内容隐藏裁剪，不显示。
2、给所有的浮动元素的最后添加一个空的标签 ，并且添加声明clear：both；height：0； overflow:hidden;(添加height：0；和overflow：hidden；是为了避免这个空标签如果是li的话，在IE6和IE7上有默认高度撑着，所以要解决一下。)

<div style="clear: both;height:0; overflow: hidden;"></div>

3、

.box:after{
    content: '';
    clear: both;/*清除两侧浮动*/
    display: block;/*转成成一个块元素*/
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

三、过渡

1、transition来制作会动的画面

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
/* 如果有多组属性变化，还是用逗号隔开。 */
transition: width 0.5s ease 1s;
/* 开始后 经过 1s 宽度在 0.5s 内 从某长度变成某长度  */
/* 如果想要所有的属性都变化过渡， 写一个 all 就可以（transition ：all 0.3s） */

四、2D

1、移动 translate(x, y)

 translate(x,y) 水平方向 和 垂直方向 同时移动（也就是X轴和Y轴同时移动）
 translateX(X) 仅 水平方向 移动（X轴移动）
 translateY(Y) 仅 垂直方向 移动（Y轴移动）
 /* transform: translate(50px,50px);文字或图像在水平方向和垂直方向上分别垂直移动50像素。 */

2、缩放 scale(x, y)

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
/*transform: scale(0.8,1); 可以对元素进行水平和垂直方向的缩放。 */

3、旋转 rotate(deg)
想要精确地调整元素转换变形的原点，用px，例如transform-origin: 10px 10px;，改变元素到x轴为10，y为10；

div{
    transform-origin: left top;
    transform: rotate(45deg);
 }  
/*transform-origin可以调整元素转换变形的原点， 改变元素原点到左上角，然后进行顺时旋转45度 */   

/*transform:rotate(45deg); 可以对元素进行旋转，正值为顺时针，负值为逆时针；*/  

4、倾斜 skew(deg, deg)

transform:skew(30deg,0deg);
/* 把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。 */
/*transform: translate(x,y) scale(1.5,1);可连写但有先后顺序，这里是先移动后伸缩*/

五、动画animation

1、用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
0% {
   		 样式1;
   		 }
100% {
    样式2;
          }
    }
    /* 用百分比来规定发生变化的时间，或用关键词”from”和”to”，等同于0%和100% */

2、元素使用动画animation

暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用

div {
      animation-name: 动画名称;
      animation-duration: 持续时间;
     }
     animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate forwards;