第四次前段预习博客-迟雨辛

前段第四次预习报告

浮动

什么是浮动

• css 提供的三种传统布局方式：普通流（标准流）、浮动和布局
• 多个块级元素纵向排列找标准流，横向排列找浮动
• float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘

浮动最典型的应用

是可以让多个块级元素一行内排列显示

网页布局第一准则

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

属性值	方向
none	不浮动（默认）
left	向左
right	向右

浮动特性

• 浮动的元素会脱离标准流 (脱标)，移动到指定位置，浮动的盒子不再保留原先的位置
• 浮动的元素会一行内显示并且元素顶部对齐，中间不会有空隙
• 浮动的元素会具有行内块元素的特性（如果行内元素有了浮动则不需要转换可直接给高度和宽度；如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定）

浮动元素经常和标准流父级搭配使用

• 为约束浮动元素的位置，采取的策略为：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
• 一个元素浮动，理论上其他兄弟元素也要浮动
• 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

• 父级盒子高度为 0 时，会影响下面的标准流盒子 由于父级盒子不方便给高度，但子盒子浮动又不占有位置，最后父级盒子高度为 0 时，会影响下面的标准流盒子
• 清除浮动的本质是清除浮动的影响
• 若父盒子本身有高度，则不需要清除浮动
• 清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流
• 清除浮动的策略：闭合浮动

属性值	应用
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	清除左右两侧浮动影响

1. 额外标签法

在浮动元素末尾添加一个空标签，例如：

<div style="clear:both"></div> 
或 <div class="clear"></div> + style中设置clear属性

注意：新的空标签必须是块级元素
2.父级添加 overflow 法

为父级添加 overflow 属性
注意：无法显示溢出的部分

3.after 伪元素法

.clearfix:after {
	content:"";        --固有属性
	display:block;     --转换为块元素
	height:0;
	clear:both;		   --清除浮动
	visibility:hidden;
}
.clearfix { *zoom:1; }		   --照顾低版本浏览器

4. 双伪元素清除浮动法

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

定位

定位的作用

• 定位可以使盒子固定在盒子或页面中的任意位置
• 定位可以使盒子盖住别的盒子
• 标准流和浮动做不到的事情

属性值	效果
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1.静态定位static

• 默认值，无定位
• 没有脱离文档流
• 需要用 margin 来控制位置

2.相对定位 relative

• 相对于原来位置移动
• 不脱标，保留文档流中的原有位置（“人走了钱还在”）
• 常用于给绝对定位提供父盒子
• 用 left /top 给其设置偏移量

3.绝对定位 absolute

• 没有父盒子 或 父盒子无定位 时，绝对定位以浏览器为准

• 如果父盒子有定位（静态 / 相对 / 绝对），则以最近一级有定位的父盒子为参考点移动

• 不再占有原来的位置（脱标）（口诀：子绝父相（轮播图翻页键原理））
  【最常用的盒子水平居中方式】子绝父相，子盒子设置 left: 50%; margin-left: 负盒子宽度一半；
  4.固定定位 fixed

• 以浏览器的可视窗口（顾名思义，可以看到的部分）为参照点，跟父盒子无关

• 不随页面滚动而滚动

• 不再占有原来的位置（脱标），可以看做一种特殊的绝对定位

5.粘性定位 sticky（先跟随滚动，后固定在某个位置）

6.定位叠放次序 z-index
.box{ z-index: 1; }

• 默认值为 auto，属性值数值越大，盒子叠放层越靠上
• 属性值相同，按书写顺序后来居上
• 数字后无单位
• 具有定位的盒子才有该属性

定位的特性

• 添加定位后，inline 元素可直接添加宽高，block 元素默认宽高为内容宽高（与浮动类似）
• 绝对定位 / 固定定位 会完全压住下方盒子，但浮动盒子不会压住标准流盒子中的文字（文字环绕效果）

过渡

• 想要改变多个属性时加在 “，” 后面即可
• 改变所有属性时，选属性（transition 中）时选 “all” 即可
• 谁做过渡给谁加,transition 要加在你要做过渡的 div 里,通常搭配 hover 使用

动画

动画可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

1.动画的基本使用

第一步：定义动画
第二步：调用或使用动画
(0% 是动画的开始，100% 是动画的结束)

2.动画的属性

简写时按照一定的顺序
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束时的状态

前两个属性是必须的，后面的如果只需要用到默认值的话可以省略不写直接跳过就行。

但是在简写里面不包含 animation-play-state 属性给它写到 hover 里面去

速度曲线的一些属性值
steps（）在括号中填入数字，就是分几步完成这个动画
一个元素可以使用多个动画，使用，隔开就行