本文详细介绍了CSS布局中的文档流、盒模型、浮动和定位概念，包括它们的特点和应用场景。此外，还探讨了过渡和动画效果，如如何设置元素的平滑过渡和创建动态效果，以及关键帧的使用。内容深入浅出，适合前端开发者学习。
Layout（布局）
文档流
1.1 文档流（normal flow）
（1） 网页是一个多层的结构，一层叠这一层，通过css可以分别为每层来设置样式， 作为用户来讲只能看到最顶上一层。
（2） 这些层，最底下的一层为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列。
（3） 对于元素主要两个状态
在文档流中
不在文档流中（脱离文档流）
- 元素中文档流中什么特点
- 块元素
- 块元素会在页面中独占一行
-默认宽度是父元素的全部（撑满）
- 默认高度被内容撑开
- 行内元素
- 行内元素不会独占页面的一行，只占自身大小
- 行内元素在页面左向右水平排列，如果一行之中不能容纳下所有的行内元素， 则元素会换到第二行继续自左向右排列(书写习惯）
- 如下图：
盒模型
1.2 盒模型、盒子模型、框模型box model（）
（1） css将页面中的元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成了摆放到不同的位置。
（2）每一个盒子都有以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
Float（浮动）
简介
通过浮动可以使元素向父元素左右移动
使用float
可选值：none 不浮动
left，right
- 元素设置浮动以后，水平布局等式便不需要强制成立
- 元素设置浮动以后，会完全从文档流脱离，不再占用文档流的位置
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1.浮动元素会完全脱离文档流，不在占据文档流位置
2.社会浮动以后元素会向父元素左侧右侧移动
3.浮动元素默认不从元素中移出
4.浮动元素不会盖住其他浮动元素，不会超过它前面的元素
5.浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6.浮动元素不会超过上面元素，可以利用浮动设置文字环绕图片
浮动的特点
（1）浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以利用浮动设置文字环绕图片
（2）元素设置浮动以后，会从文档流脱离，元素的一些特点会变化
（3） 脱离文档流特点：
块元素
1. 块元素不再独占一行
2. 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
1.脱离文档流以后变成块元素，特点和块元素一样
2.脱离文档流后，不需要区分块和行内元素
如下图：即为设置浮动后。
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box2{
width:200px;
height: 200px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
position（定位）
定位的简介
定位（position）
- 定位是一种更高级的布局手段，
- 通过定位任意摆放
- position
可选值：
1. static 默认值，元素是静止没有开启定位
2. relative：相对定位
（1）开启定位以后，如果不设置偏移量（offset）不会发生任何变化
（2）参照语元素在文档流中的位置定位
（3） 会提升元素层级，不会脱离文档流，不改变元素性质
3. top:垂直位置 上边距离
bottom left right 同理
4.absolute ：开启元素的绝对定位
（1）开启绝对定位后，不设置偏移量，元素的位置不会发生变化
（2）开启绝对定位后，元素在文档流脱离
（3）绝对定位会改变元素的性质，行内变为块， 宽高被内容撑开
（4）绝对定位使元素提升一个层次
（5）绝对定位元素是相对于其包含块进行定位的
-
fixed ：开启元素的固定定位
（1）也是一种绝对定位，所以大部分与绝对定位一样 （2）唯一不同的是固定定位参照于浏览器的视口进行定位 固定元素不会随网页的滚动条滚动 -
sticky ：元素的粘滞定位
（1） 与相对定位特点基本一致， （2） 不同的是粘滞定位可以在到达某位置时不动
Animation（动画）
过渡
过渡的属性
- transition:
通过过渡可以指定一个属性发生变化时的切换方式。 - property：指定要执行过度的属性
若所有的需要过渡，则使用all - duration：指定过渡时间的持续时间
1 s=1000ms - transition-timing-function: 过渡时序函数
指定过渡的执行方式
可选值：
（1） ease 默认值，慢速开始，先加速，在减速
（2）linear：匀速
（3） ease-in 加速运动
（4）ease-out 减速运动
（5）ease-in-out 先加速 后减速
（6）steps()分步执行过渡效果
可以设置一个第二个值：
end：在时间结束时执行过渡，
start：在时间开始时执行过渡
delay:等待一段时间后，再执行、 - 一般用transition：如果写延迟，两个时间中第一个是持续时间
```css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 800px;
height: 800px;
background-color: silver;
}
.box1 div{
width: 100px;
height: 100px;
margin-top: 100px;
overflow: hidden;
}
.box2{
background-color: #bfa;
}
.box1:hover div{
/*width: 200px;*/
/*height: 200px;*/
/*background-color: orange;*/
margin-left: 700px;
}
.box3{
background-color: orange;
transition-property: all;
transition-duration: 2s;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
动画
动画的简介
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时候才会触发， 动画可以自动触发动态效果。
设置动画效果，必须先要设置一个关键帧，
相关属性：
- animation-name: 要对当前元素生效的关键帧的名字 animation-iteration-count: 执行次数
2.animation-direction: 指定动画运行的方向
可选值：
（1）normal 默认值，从from到to
（2）reverse 从to到from
（3）alternate 从from到to 重复执行动画时，反向执行
（4）alternate-reverse 从to向from运行，重复执行动画时候反向
3.animation-play-state：设置动画的运行状态
4.animation-fill-mode：动画的填充模式
可选值：
（1） none 默认值，动画执行完毕回到原来的位置
（2）forwards 执行完毕后停止到to的位置
（3）backwards 动画延时等待时，元素处于开始位置
5.both:结合两种特点
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-left: 0;
}
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease;
animation-iteration-count: 100;
animation-fill-mode: backwards;
}
@keyframes test {
/* 动画的开始位置 */
from{
margin-left: 0;
}
/* from动画的结束位置 */
to{
margin-left: 700px;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
奔跑的少年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 100px;
height:400px;
background-size: 600% 100%;
margin: 0 auto;
background-image: url("人.png");
/*-webkit-animation: run .5s steps(5) infinite;*/
animation:run .5s steps(5) infinite;
}
/* 创建关键帧 */
@keyframes run {
0{
background-position: 0% 0%;
}
100%{
/* 沿主轴反向进行 图片宽度*/
background-position: 100% 0%;
}
}
/*@-webkit-keyframes run {*/
/*0{*/
/* background-position: 0% 0%;*/
/*}*/
/*100%{*/
/*!* 沿主轴反向进行 图片宽度*!*/
/* background-position: 100% 0%;*/
/*}*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
跳动的球
扫一扫
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
