1.CSS浮动
1.1传统网页布局的三种方式
实际开发中,一个页面基本包含三种布局方式
- 普通流(标准流)
标签按照规定好多默认方式排列
块级元素独占一行,从上向下顺序排列
行内元素会按照顺序,从左到右顺序排列,碰到父元素比那元则自动换行
- 浮动
让多个块级盒子排在一行上,并且用浮动中间不会有空隙(行内块会有间隙 )
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动的边缘
浮动特性
- 浮动元素会脱离标准流(脱标)
脱标的盒子不会保留原来位置 其他盒子会占有其位置
2.浮动元素会一行内显示并且元素顶部对齐
所有浮动的盒子都会在一行内显示并且顶端对齐,装不下就另起一行
3.浮动元素会具有行内块元素的特性
任意元素都可以添加浮动属性不管是行内还是块元素,添加后具有行内块元素特性
如果行内元素有了浮动的属性就不需要转化为行内块元素就可设置宽高(行内块元素内容多宽宽度多宽)
常见网页布局注意点
1.浮动和标准流的父盒子搭配:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一浮全浮
一个何总里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引发问题.
浮动的盒子只会影响盒子后面的标准流,不会影响前面的标准流.
3.标准流父盒子不用给高度,自己撑开就可以 ,但是这种情况下由于浮动不占有原来位置,父级盒子的高度就会变成0,所以要清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 800px;
background-color:gray;
border: 1px solid red;
}
.c1{
float: left;
width: 200px;
height: 300px;
background-color: orange;
}
.c2{float: left;
width: 300px;
background-color: purple;
height: 300px;
}
</style>
</head>
<body>
<div class="box">
<div class="c1">1</div>
<div class="c2">2</div>
</div>
</body>
</html>
3.清除浮动
3.1清除浮动的本质 清楚浮动元素造成影响(如果父盒子有高度就不用清除)
clear属性 一般只用both
3.2清除浮动的方法
- 额外标签法也称隔墙法,w3c推荐
- 父级添加overflow属性
- 父级添加after为元素
- 父级添加双伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 800px;
background-color:gray;
border: 1px solid red;
}
.c1{
float: left;
width: 200px;
height: 300px;
background-color: orange;
}
.c2{float: left;
width: 300px;
background-color: purple;
height: 300px;
}
/*隔墙法 需要在父级盒子里面且子盒子最后添加标签
.qingchu{
clear:both;
} */
/*父元素overflow
.box{overflow: hidden;} */
/* after伪元素在最后添加一堵墙但是不用添加标签只需给父级盒子加个类名
/* .clearfix:after{
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
.clearfix{
/* IE6.7专有 */
/* *zoom: 1; */
/* } */
/* 双伪元素在父级盒子里面添加两堵墙,也不用添加标签,只需给父级盒子加个类名
.clearfix::after,.clearfix::before{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom: 1;<!--兼容IE6.7-->
} */
</style>
</head>
<body>
<div class="box clearfix"><!--可以是两个类名-->
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<!-- 这是墙<div class="qingchu"></div> -->
</div>
</body>
</html>
| 清除浮动方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 好 |
| 父级双伪元素 | 结构语义化正确 | 好 |
css属性书写顺序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0nS8vlx-1686755957663)(…/…/…/…/…/…/Typora/Typora/images/css书写顺序.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l92ETDcU-1686755957664)(…/…/…/…/…/…/Typora/Typora/images/css书写顺序2.png)]
1.2页面布局整体思路
为了提高页面制作的效率,有以下思路
- 必须指定页面的版心(可视区),测量可得知
- 分析页面中的行模块,以及每个行模块的列模块
- 一行中的列模块经常浮动布局,先确定列的大小,在确定列的位置
- 制作html结构,现有结构后有样式
父盒子中的子盒子如果没有加浮动且加了margin-top就会脱下来父盒子
子盒子如果加了float就不会拖拽了
- 定位
定位可以让盒子资源的在某个盒子内移动或笃定在屏幕中某个位置,并且可以压住其他位置
定位组成
定位=定位模式(定位方式)+边偏移(最终位置)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J3gxPLWX-1686755957664)(…/…/…/…/…/…/Typora/Typora/images/定位1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cZBXf22V-1686755957665)(…/…/…/…/…/…/Typora/Typora/images/定位2.png)]
相对定位relative
1.相对自己原来位置来移动
2.原来在标准流位置继续占有,后面盒子仍然以标准流方式对待他(不脱标,保留原有位置)
绝对定位absolute
1.移动位置是参照祖先元素来说的,如果没有祖先元素或祖先元素没有定位,则以浏览器为准
2.如果祖先元素有定位(相对,绝对,固定),则以最近一级的有定位的祖先元素为参考
3.绝对定位是脱标的,不保留原来位置
子绝父相 (相对定位是绝对定位的父级)
1.子级绝对定位,不会占有位置,可放到父级里任何一个地方,不影响其他兄弟盒子
2.父盒子需要加定位限制滋贺子在父盒子内显示
3.父盒子布局是,需要占有位置,因此父亲只能是相对定位
固定定位fixed
元素嘟嘟在可视区域,页面固定
1.以浏览器可视窗口为参照
2.跟父元素没有任何关系(以浏览器为参照)
3.不保留原来位置(可看作一种特殊的绝对定位)
固定定位小技巧
不是永远以浏览器为参照物:例如固定在版心右侧
1.让固定定位的盒子left:50%,走到浏览器可是去的一半
2.让笃定定位的盒子margin-left:版心宽度一半
就可以让固定定位的盒子贴着版心移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner{
width: 800px;
height: 1200px;
margin: 0 auto;
background-color: pink;
}
.fixed{
position: fixed;
left: 50%;
margin-left: 405px;
width: 100px;
height: 50px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="fixed">
</div>
<div class="banner">
版心
</div>
</body>
</html>
定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| relative相对定位 | 否(占有位置) | 相对自身位置移动 | 是 |
| absolute绝对定位 | 是(不占有位置) | 相对带有定位的父级 | 是 |
| fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 是 |
定位叠放次序z-index
1.选择器{z-index:数值;}数值可以是正负整数,越大越往上
2.默认值是auto,后来者居上
3.数字后不能加单位
4.只有定位的盒子才有z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: absolute;
left: 50%;
margin-left: -100px;
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
定位的特殊性
绝对定位和固定定位也和浮动类似
1.行内元素添加绝对定位或固定定位,可以直接设置宽高
2.块级元素添加绝对定位或固定定位,如果不给宽高,默认大小是内容大小
3.脱标的盒子不会外边距塌陷
定位拓展
浮动元素会压住他下面标准流的盒子,但是不会压住下面标准流盒子里卖弄的文字…之所以,是因为浮动产生的最初目的就是为了做文字环绕效果.文字会围绕浮动元素
但是添加绝对定位或固定定位会完全压住盒子无论是否有文字
2.CSS过度
口诀,谁做过度给谁加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sabXuGHO-1686755957665)(…/…/…/…/…/…/Typora/Typora/images/过度.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7kyUI4A-1686755957665)(…/…/…/…/…/…/Typora/Typora/images/过度1.png)]
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>guodu</title>
<style>
.transition{
/*transition: 属性(一般写all) 时间单位 后面两个可省 变化曲线 何时开始 */
transition: width 1s ease 0s;
}
.transition:hover{
width:400px}
</style>
</head>
<body>
<div class="transition">
</div>
</body>
</html>
3.2D转换transform
3.1移动translate
- 最大优点是不会影响到其他元素的位置
- 参数可以用百分比是以自身的宽高来对比
- 对行内标签没有效果
实现子盒子居中一般采用这种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translate</title>
<style>
.box{
position: relative;
width: 500px;
height: 500px;
background-color: aqua;
}
.son{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="son">123</div>
</div>
</body>
</html>
:hover{
transform: translate(x,y);
}
3.2旋转rotate
语法:transform:rotate(度数deg)
- rotate里面跟度数,单位deg
- 角度为正,顺时针,角度为负,逆时针
旋转案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转案例</title>
<style>
div{
overflow: hidden;
width: 200px;
height: 200px;
margin: 50px auto;
border: 2px solid pink;
}
div::after{
content: "黑马";
display: block;
width: 100%;
height: 100%;
background-color: purple;
transform: rotate(180deg);
transform-origin: left bottom;<!--改变旋转中心-->
transition: all 0.1s;
}
div:hover::after{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
CSS三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角</title>
<style>
.box{
position: relative;
width: 249px;
height: 35px;
border: 2px solid #000;
}
.box::after{
content: "";
position: absolute;
right: 12px;
top: 7px;
border-right:2px solid #000 ;
border-bottom:2px solid #000 ;
width: 10px;
height: 10px;
transform: rotate(45deg);
transition: all 0.3s;
}
.box:hover::after{
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
3.32D转换之缩放scale
语法tramsform:scale(x,y)/(x);
- 其中的x和y用逗号隔开
- transform(1,1):宽和高都放大了一倍
- transform(2,2)都放大两倍
- transform:scale(0.5,0.5)缩小;
- transform:scale(2);都放大为两倍
- scale最大的优势在于可以设置中心点transform-origin 而且不影响下面的盒子
图片放大缩放案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
overflow: hidden;
float: left;
margin: 10px;
}
div img{
transition: all 0.3s;
}
div img:hover
{
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="./pink课堂案例/images/logo.png" alt=""></a></div>
<div><a href="#"><img src="./pink课堂案例/images/logo.png" alt=""></a></div>
<div><a href="#"><img src="./pink课堂案例/images/logo.png" alt=""></a></div>
</body>
</html>
分页按钮缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页按钮缩放</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
div ul li{
float: left;
margin: 10px 10px ;
border: 1px solid green;
border-radius: 50%;
font-size: 20px;
text-align: center;
height: 30px;
width: 30px;
line-height: 30px;
cursor: pointer;
transition: all 0.3s;
}
div ul li:hover{
transform: scale(2);
}
</style>
</head>
<body>
<div>
<ul>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
</ul>
</div>
</body>
</html>
4.2D转换综合写法
注意
- 同时使用多个转换,其格式为transform:translate() rotate() scale()…
- 顺序会影响转换的效果
- 当同时有位移和其他属性的时候,要把位移放在最前
5.2D总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7EDcnU4-1686755957666)(…/…/…/…/…/…/Typora/Typora/images/2D转换总结.png)]
4.动画
4.1基本使用
分为两步1.定义动画2.调用动画
用@keyframes定义动画
动画序列
- 0%是动画的开始,100%是动画的完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
/* 定义动画 */
/* @keyframes move{
0%{
transform: translate(0,0);
}
100%{
transform: translate(1000px,0);
}
} */
div{
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
/* animation-name: move;
animation-duration: 2s; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
4.2动画常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wt2rzYsL-1686755957666)(…/…/…/…/…/…/Typora/Typora/images/动画常用属性.png)]
大概简写形式(不包含animation-play-state一般写在hover里面)
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
animation:myfirst 5s linear 2s infinite alternate;
animation-timng-function:速度曲线
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾速度相同.匀速 |
| ease | 默认.先低速,然后加快,在结束前变慢 |
| ease-in | 以低速开始 |
| ease-out | 以低俗结束 |
| ease-in-out | 以低速开始和结束 |
| steps() | 指定的时间函数中的间隔数量(步长) |
5127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
