前端——CSS基础学习【part 3】

浮动

传统网页布局的三种方式

1. 普通流（标准流）
2. 浮动
3. 定位
   注意：基本每一个页面都会包含以上的三种布局方式

标准流（普通流/文档流）

1. 特点：
   按照我们写的标签的默认方式排列
2. 常用标签：
   （1）块级元素会独占一行，从上到下依次排序
   div、hr、h1~h6、ul、ol、dl、form、table
   （2）行内元素从左到右依次排序，碰到父级元素自动换行
   span、a、i、em

浮动

1. 特点：
   当标准流无法满足我们的需求，使用浮动这种布局方式，浮动可以改变我们写出标签默认的排列方式
2. 用途：
   让多个块级元素在一行内排列
   注意：
   多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动
3. 定义：
   float属性用于创建浮动框，直到左边缘或者右边缘碰到边界或者另一个浮动框的边缘
4. 语法：
   选择器 { float:属性值;}

属性值	描述
none	元素不浮动（默认）
left	元素向左浮动
right	元素像右浮动

5. 浮动特性：

（1）脱离标准流的控制，移动到指定的位置（脱标）
浮动的盒子不再保留原先的位置

（2）当多个盒子设置浮动，按照属性值一行内显示并且顶端对齐排列

• 浮动的元素是互相贴靠在一起，没有缝隙
• 父级宽度装不下浮动的盒子，多出的盒子会换行对齐
• 一行中的每个div都要设置浮动

（3）浮动的元素会具有行内块元素的特点

• 任意的元素都是可以浮动的，添加浮动之后会具有行内块元素的特性
• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是浮动后，它的大小根据内容来决定
• 当元素已经被设置浮动之后，不需要转换成块级（或者行内块）元素，可以直接设定高度和宽度
  浮动元素经常和标准流父级搭配使用

常见网页布局

1. 浮动布局注意点
   （1）浮动元素经常和标准流父级搭配使用

• 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
  （2）一个盒子元素浮动了，理论上其余的兄弟元素也要浮动一浮全浮
• 一个大盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他的兄弟也应该浮动，以防引起问题
• 浮动的盒子只会影响浮动盒子后面的标准流，不会影响盒子前面的标准流

清除浮动

1. 为什么要清除浮动
   （1）由于父级元素很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
2. 清除浮动的本质
   （1）清除浮动的本质是清除浮动欧冠元素造成的影响
   （2）如果父盒子本身有高度，则不需要清除浮动
   （3）除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流
3. 语法
   选择器{clear:属性值;}

属性值	描述
左	不允许左侧有浮动元素（清除左侧浮动的影响）
有	不允许右侧有浮动元素（清除右侧浮动的影响）
双	同时清除左右两侧浮动的影响

在我们工作中，几乎只用clear：both;

4. 方法
   策略是：闭合浮动
   （1）额外标签法也称隔墙法，是W3C推荐的做法
   （2）父级添加overflow属性
   （3）父级添加after伪元素
   （4）父级添加双伪元素

5. 额外标签法

（1）内容：额外标签法会在浮动元素末尾添加一个空标签。例如<div style="clear:both"></div>或者<br/>等

（2）优缺点

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差
  注意：要求这个新的空标签必须是块级元素，不能是行内元素

6. 父级添加overflow属性

（1）内容：可以为父级添加overflow属性，将其属性值设置为hidden、auto或scroll

（2）优缺点

• 优点：代码简洁
• 缺点：无法显示溢出部分

7. :after伪元素方法

（1）语法：

.clearfix:after{
	content:" ";
	display:block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{  
	*zoom: 1;
}

（2）优缺点

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器

8. 双伪元素清除浮动
   （1）语法：

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

（2）优缺点

• 优点：代码更简洁

• 缺点：照顾低版本浏览器

定位

定义

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子

定位组成

1. 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
2. 定位 = 定位模式 + 边偏移
   定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置
3. 定位模式
   定位模式决定元素的定位方式，它通过在CSS的position属性来设置

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

4. 边偏移
   边偏移就是定位的盒子移动到最终位置,有top，bottom，left，right四个属性

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位static

1. 定义：
   静态定位是元素的默认定位方式，无定位的意思
2. 语法：
   选择器{position:static;}
3. 特点：
   （1）静态定位按照标准流特性摆放位置，他没有边偏移
   （2）静态定位在布局中很少用到

相对定位relative

1. 定义：
   相对行为是元素在移动位置的时候，是相对于它原来的位置来说的
2. 语法：
   选择器{position:relative;}
3. 特点：
   （1）它是相对于自己原来的位置进行移动的（移动位置的时候参照点是自己原来的位置）
   （2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位absolute

1. 定义：
   绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
2. 语法：
   选择器{position:absolute;}
3. 特点：
   （1）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
   （2）如果祖先元素有定位（相对，绝对，固定定位），就以最近一级的有定位的祖先元素为参考点进行移动位置
   （3）绝对定位不再占有原来位置（脱标）

子绝父相

1. 由来：
   子级使用绝对定位的话，父级要用相对定位
   （1）子级绝对定位，不会占有位置，可以放到父盒子里面任何一个地方，不会影响其它的兄弟盒子
   （2）父盒子需要加定位限制子盒子在父盒子内显示
   （3）父盒子布局时，需要占有位置，因此父亲只能是相对定位
   （4）相对定位经常用来作为绝对定位的父级

注意：

• 因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
• 当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

固定定位fixed

1. 定义：
   固定元素是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会变
2. 语法：
   选择器{position:fixed;}
3. 特点：
   （1）以浏览器的可视窗口为参照点移动元素

• 跟父元素没有任何关系
• 不随滚动条滚动
  （2）固定定位不再占有原先的位置
• 固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位

4. 固定定位小技巧
   （1）小算法：

• 让固定定位的盒子left:50%，走到浏览器可视区的一半位置
• 让固定的盒子margin-left版心宽度的一半距离。多走版心宽度的一半位置
  就可以让固定定位的盒子贴着版心右侧对齐了

粘性定位sticky

1. 定义：
   粘性定位可以被认为是相对定位和固定定位的融合
2. 语法：
   选择器{position:sticky;top:10px;}
3. 特点：
   （1）以浏览器的可视窗口为参照点移动元素（固定定位特点）
   （2）粘性定位必须有原先的位置（相对位移的特点）
   （3）必须添加top，left，right，bottom其中一个才有效
   注意：跟页面滚动搭配使用。兼容性较差，IE不支持

定位叠放次序z-index

1. 定义：
   在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序
2. 语法：
   选择器{z-index:1;}
3. 特点：
   （1）数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
   （2）如果属性值相同，则按照书写顺序，后来居上
   （3）数字后面不能加单位
   （4）只有定位的盒子才具有z-index属性

定位的拓展

1. 绝对定位盒子的居中
   加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下方法实现水平居中和垂直居中：
   （1）left:50%; ：让盒子的左侧移动到父级元素的中心位置
   （2）margin-left:-100px; ：让盒子左移动自身宽度的一半
2. 定位特殊特性
   绝对定位和固定定位也和浮动类似
   （1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度
   （2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
3. 脱标的盒子不会触发外边距塌陷
   浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题
4. 绝对定位（固定定位）会完全压住盒子
   （1）浮动元素不同，只会压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
   （2）但是绝对定位（固定定位）会压住下面标准流所有的内容
   （3）浮动不会压住文字，浮动是为了做文字环绕效果的

CSS过渡

过渡是CSS3中具有颠覆性的特征之一，我们可以不使用Flash动画或JavaScript的情况下，当元素从一种一种样式变为另一种样式时为元素添加效果

过渡动画：是从一个状态渐渐过渡到另一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持，但是不会影响页面布局。

我们现在经常和:hover一起搭配使用

CSS3过渡属性

transition:要过渡的属性 花费时间 运动曲线 何时开始

1. 属性
   想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以。如果想要的属性都变化过渡，写一个all就可以
2. 花费时间
   单位是秒，必须写时间，比如0.5s
3. 运动曲线
   默认是ease（可以省略）
4. 何时开始
   单位是秒，可以设置延迟触发时间，默认是0s（可以省略）
   口诀：谁做过渡给谁加

CSS3 2D转换

2D转换之移动 translate

1.语法：

translate:translate(x,y);
或者分开写
translate:translateX(n);
translate:translateY(n);

2. 重点：
   （1）定义2D转换中的移动，沿着X和Y轴移动元素
   （2）translate最大的优点：不会影响到其他元素的位置
   （3）translate中的百分比单位是相对于自身元素的translate:(50%,50%)
   （4）对行内标签没有效果

2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转
1.语法：

translate:rotate（度数）

2. 重点：
   （1）rotate里面跟度数，单位是deg比如rotate（45deg）
   （2）角度为正时，顺时针，负时，为逆时针
   （3）默认旋转的中心点是元素的中心点

2D转换中心点translate-origin

我们可以设置元素转换的中心点
1.语法：

transform-origin: x y;

2. 重点：
   （1）注意后面的参数x和y用空格隔开
   （2）xy默认转换的中心点是元素的中心点（50% 50%）
   （3）还可以xy设置像素或者方位名词（top bottom left right center）

2D转换之缩放scale

可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是变小
1.语法：

translate:scale(x,y);

2. 重点：
   （1）注意其中的x和y用逗号分割
   （2）translate:scale(1,1);宽高都放大了一倍，相当于没有放大
   （3）translate:scale(2,2);宽和高都放大了2倍
   （4）translate:scale(2);只写一个参数，第二个参数和第一个参数一样，相当于scale(2,2)
   （5）translate:scale(0.5,0.5);缩小
   （6）scale缩放最大的优势：可以设置转换中心点缩放，默认中心点缩放的，而且不影响其他盒子

2D转换综合写法以及顺序问题

1. 同时使用多个转换，其格式为：translate:translate() rotate() scale()…等
2. 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
3. 当我们同时拥有唯一和其他属性的时候，记得要将位移放到最前面

CSS3 动画

动画的基本使用

1. 制作动画分为两步：
   （1）先定义动画
   （2）在使用（调用）动画
2. 用keyframes定义动画（类似于定义选择器）

@keyframes 动画名称{
	0%{
	width:100px;
	}
	100%{
	width:200px;
	}
}

3. 动画序列
   （1）0%是动画的开始，100%是动画的完成。这样的会泽就是动画序列
   （2）在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
   （3）动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
   （4）请用百分比来规定变化的时间，或用关键词"from"和"to"，等同于0%和100%
4. 元素使用动画

div {
	width:200px;
	height:200px;
	background-color: aqua;
	margin:100px auto;
	/*调用动画*/
	animation-name:动画名称;
	/*持续时间*/
	animation-duration:持续时间;
}

动画常见属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须）
animation-duration	规定一个动画完成一个周期所花费的·秒或毫秒，默认是“0”（必须）
animation-timing-function	规定动画的速度曲线，默认是"ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是"normal"，alternate逆播放
animation-play-state	规定动画是否正在运动或暂停。默认是"running",还有"pause"
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

CSS动画简写

1. 语法：
   animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation: myfirst 5s linear 2s infinite alternate;

2. 特点：
   （1）简写属性里不包含animation-play-state
   （2）暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
   （3）想要动画走回来，而不是直接跳回来:animation-direction : alternate
   （4）盒子动画结束后，停在结束位置：animation-fill-mode ：forwards

速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是"ease"

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）