CSS基础学习第三周（浮动、过渡、动画、2D转换、3D转换flex布局）

---

一、浮动

1.常见网页布局

• 标准流

块级元素独占一行，从上到下排列
行内元素按照顺序，从左到右排列

• 浮动
• 定位

注：实际开发中，三种布局方式都包含了

2.浮动的概念

• 浮动的概念：float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器 { float: 属性值;}

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

• 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。

• 浮动最典型的应用：可以让多个块级元素一行内排列显示。

• 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动！

3.浮动的特性

加了浮动之后的元素，会具有很多特性，需要我们掌握。

• 浮动元素会脱离标准流（脱标）
• 浮动的元素会一行内显示并且元素顶部对齐
• 浮动的元素会具有行内块元素的特性

下面分别解释：

• 浮动元素会脱离标准流（脱标）

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

-浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

• 浮动的元素会具有行内块元素的特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

• 块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
• 行内盒子：宽度默认和内容一样宽，直接设置高宽无效，但是添加浮动后，它的大小可以直接设置
• 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  即：默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙

4.浮动元素和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准侧。

5.消除浮动

浮动布局注意点

• 浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
• 一个元素浮动了，理论上其余的兄弟元素也要浮动
• 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟盒子也应该浮动，以防止引起问题
• 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动的语法与方法

选择器 { clear : 属性值 ; }

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

一般情况只用clear : both ;

• 清除浮动的策略是：闭合浮动

清除浮动的方法：

额外标签法/隔墙法（W3C推荐的做法）：在浮动元素末尾添加一个空的标签
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
新的空标签必须是块级元素，不能是行内元素

父级添加overflow属性
可给父级添加overflow属性，将其属性值设置为hidden、auto或者scroll
优点：代码简洁
缺点：无法显示溢出的部分

父级添加after伪元素（ 额外标签法的升级版）

父级添加双伪元素： 给父元素添加：
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

清除浮动的方式	优点 缺点
额外标签法（隔墙法）	通俗易懂，书写方便
父级overflow : hidden ;	书写简单
父级after伪元素	结构语义化正确
父级双伪元素	结构语义化正确

二、PS切图

1.图片格式

• jpg图像：JEPG(JPG)对色彩的信息保留较好，高清，颜色较多
• gif图像：最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画的效果
• png图像：一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，请选择png格式
• PSD图像：photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对我们前端人员来说，我们可以直接从上面复制文字，获得图片，测量大小和距离

2.切图

• 图层切图
• 切片切图
• PS插件切图

三、CSS书写格式

• 布局定位属性：
  display/position/float/clear/visibility/overflow

• 自身属性：
  width/height/margin/padding/border/background

• 文本属性：
  color/font/text-decoration/text-align/vertical-align/white-space/break-word

• 其他属性：
  content/cursor/border-radius/box-shadow/background : linear-gradient

• 导航栏注意点

  • 实际开发中，我们不会直接用链接a而是用li包含链接 （li+a） 的做法

li+a语义更清晰，一看就是有条理的列表型内容
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

- 1

• 如果要让导航栏在一行显示，给li加浮动，因为li是块级元素，需要一行显示
• 导航栏一般不给宽度/高度，将来可以继续添加其余文字
• 因为导航栏里面的文字不一样多，所以最好给链接a左右padding撑开盒子而不是指定宽度
• 浮动的盒子不会有外边距合并的问题

四、定位

1.为什么需要定位

标准流或者浮动都无法快速实现而需要定位实现的效果：

• 某个元素可以自由地在一个盒子内移动位置，并且压住其他盒子
• 当我们滚动窗口上，盒子是被固定在屏幕某个位置的

2.定位组成

定位=定位模式+边偏移

定位模式

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

边偏移

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

3.定位模式属性值

静态定位static

• 是元素的默认定位方式，未定位的意思。静态定位按照标准流特性摆放位置，没有边偏移。静态定位在布局时很少用到

选择器 { position : static ; }

相对定位relative

• 是元素在移动位置的时候，相对于它原来的位置来说的

相对于自己的位置移动（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

选择器 { position : relative ; }

绝对定位absolute

• 是元素在移动位置的时候，是相对于它祖先元素来说的

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原来的位置（脱标）

选择器 { position : absolute ; }

固定定位fixed

• 是元素固定于浏览器可视区的位置
• 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
  以浏览器的可视窗口为参照点移动元素

跟父元素没有任何关系
不随滚动条滚动
固定定位不占有原先的位置

• 固定到版心右侧
  • 让固定定位的盒子left：50%，走到浏览器可视区一半的位置
  • 让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半距离

选择器 { position : fixed ; }

粘性定位sticky

• 可以认为是相对定位和固定定位的混合

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加top,left,right,bottom其中一个才有效

选择器 { position : sticky ; top : 10 px ; }

4.子绝父相

• 概念：子级使用绝对定位，父级则使用相对定位

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

父盒子需要加定位限制子盒子在父盒子内显示

父盒子布局时，需要占有位置，因此父亲只能是相对定位

子绝父相不是永远不变的

5. 定位叠放次序

• 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

选择器 { z-index : auto ; }

a.数值可以是正整数、负整数或0，默认是auto。数值越大，盒子越往上
b.如果属性值相同，则按照书写顺序，后来居上
c.数字后不加单位
d.只有定位的盒子才有z-index属性

6.定位拓展

• 绝对定位的盒子居中：加了绝对定位的盒子不能通过margin： 0 auto 实现水平居中，但是可以通过以下方法实现水平和垂直居中

left : 50% ：让盒子的左侧移动到父级元素的水平居中位置
margin-left : -100px：让盒子向左移动自身高度的一半

• 定位特殊特性：绝对定位和固定定位也和浮动类似

行内元素添加绝对或者固定定位，可以直接设置高度和宽度 块级元素添加绝对或者固定定位，如果不给高度和宽度，默认的大小的内容的大小

• 脱标的盒子不会触发外边距塌陷：浮动元素、绝对定位（固定定位）都不会出发外边距合并的问题

• 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字/图片
浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素
但是绝对定位（固定定位）会压住下面标准流所有的内容

七、过渡动画

• 概念：是从一个状态渐渐地过渡到另一个状态
• 常与:hover搭配使用

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

• 属性：想要变化的CSS属性，高度宽度、背景颜色、内外边框都可以。如果想要所有的属性都变化过渡，写一个all就可以
• 花费时间：单位是秒s（必须写）
• 运动曲线：默认是ease（可以省略）
• 何时开始：单位是秒s（必须写），可以设置延迟触发时间（默认为0s，可以省略）

• 如果想要写多个属性，利用逗号进行分割（如果想要所有的属性都变化过渡，写一个all就可以）
• 过渡的使用口诀： 谁做过渡给谁加

八、2D转换

• 概念：转换可以实现元素的位移translate，旋转rotate，缩放scale等效果，可以简单理解为变形

1.移动translate

• 2D移动translate是2D转换里面的一种功能，可以改变元素在页面中的位置，类似于定位

transform : translate ( x , y ) ;

transform : translateX ( n );

translate : translateY ( n );

注：

• 定义2D转换中的移动，沿着X轴和Y轴移动元素
• 最大的优点：不会影响其他元素的位置
• translate中的百分比单位是相对于自身元素的translate
• 对行内元素没有效果

2.旋转rotate

• 2D旋转指的是让元素在二维平面顺时针旋转或者逆时针旋转

transform : rotate ( 度数 )

注：

• rotate里面是度数，单位是deg
• 角度为正时顺时针，角度为负时逆时针
• 默认旋转中心是元素的中心点

3.转换中心点transform-origin

transform-origin : x y ;

注:

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

4.缩放scale

• 可以放大缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

transform : scale ( x , y );

注：

• 其中的x和y用逗号分隔
• transform : scale ( 1 , 1 ) ; 宽和高都放大一倍，相当于没有放大
• transform : scale ( 2 , 2 ) ; 宽和高都放大2倍
• transform : scale ( 2 ) ; 只写一个参数，相当于scale ( 2 , 2 )
• transform : scale ( 0.5 , 0.5 ) ; 缩小
• 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

5.综合写法

• 格式：transform : translate() rotate() scale()

注：

• 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
• 当我们同时有位移和其他属性的时候，记得要将位移放到前面

九、动画

• 概念：动画（animation）可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果，与过渡相比，动画可以实现更多变化、更多控制、连续自动播放等效果

1.基本使用

语法格式：

@keyframes 动画名 {
	0% {
		width ： 100px；
	}
	100% {
		width ： 200px;
	}
}

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，就能创建有当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
• 用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

2.属性

属性	描述
@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

3.综合写法

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

常见注意事项：

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

4.速度曲线

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

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

十、3D转换

1.三维坐标系

• 概念：三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

X轴：水平向右（右边正值，左边负值） Y轴：垂直向下（下边正值，上边正值） Z轴：垂直屏幕（外边正值，里边负值）

2.3D位移translate3d(x,y,z)

注：与2D移动相比，多加了一个可以移动的方向，即Z轴方向

代码	移动
transform : translateX ( 100px )	仅仅在x轴上移动
transform : translateY ( 100px )	仅仅在y轴上移动
transform : translateZ ( 100px )	仅仅在z轴上移动（一般用px单位）
transform : translate3d ( x, y, z)	其中x y z分别指要移动的轴的方向的距离

3.3D旋转rotate3d(x,y,z)

• 概念: 3D旋转指可以让元素在三维平面内沿着X轴，Y轴，Z轴或者自定义轴进行旋转

代码	移动
transform : rotateX ( 45deg )	沿着x轴正方向旋转45度
transform : rotateY ( 45deg )	沿着y轴正方向旋转45度
transform : rotateZ ( 45deg )	沿着z轴正方向旋转45度
transform : rotate3d ( x, y, z, 45 )	沿着自定义轴旋转45度（了解即可）

• x，y，z是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个数字标示旋转的角度
• 判断元素旋转的方向，左手准则：左手的拇指指向x轴正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的正方向

4.透视perspective

在2D平面产生近大远小视觉立体，但是只是二维效果的

• 如果想要在网页产生3D效果需要透视（可理解为3D物体投影在2D平面上）
• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视我们也称为视距：人的眼睛到屏幕的距离
• 距离视觉点越近的，在电脑平面成像越大；反之则越小
• 透视的单位是像素
• 写在被观察元素的父盒子上面
  • d（视距）：人的眼睛与屏幕的距离
  • z（z轴）：z越大，看到的物体就越大

5.3D呈现transfrom-style

• 控制子元素是否开启三维立体环境
• transform-style : flat 子元素不开启3D立体空间（默认）
• transform-style : preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子

十一、flex布局

传统布局：

兼容性好
布局繁琐
局限性，不能在移动端很好地布局

flex弹性布局：

操作方便，布局极为简单，移动端应用很广泛
PC端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持

注：PC端页面布局，建议使用传统布局方法；如果是移动端或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局

1.布局原理

flex（flexible box）意为“弹性布局”，用来为盒装模型提供很大的灵活性，任何一个容器都可以指定为flex布局

• 当我们为父盒子设为flex布局以后，子元素的float、clear、vertical-align属性将失效

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

• 采用flex布局的元素称为flex容器（flex container），简称“容器”。其所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”
• 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

2.flex布局父盒子常见属性

属性|作用
|–|–|
flex-direction |设置主轴的方向
justify-content |设置主轴上的子元素的排列方式
flex-wrap |设置子元素是否换行
align-content |设置侧轴上的子元素的排列方式（多行）
align-items |设置侧轴上的子元素的排列方式（单行）
flex-flow| 复合属性，相当于同时设置了flex-direction和flex-wrap

3.flex布局子盒子常见属性

属性	描述
flex	子项目占的份数
align-self	控制子项自己在侧轴的排列顺序
order	order属性定义子项的排列顺序（前后顺序）