整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
绍三个和行相关的属性。
定义行高，即行的高度，数值单位用px、字号倍数、百分比表示。
<!--方式一 属性单位 为px-->
<style>
p {
line-height:30px
}
</style>
<!--方式二 不带单位，表示字号的倍数-->
<style>
p {
line-height: 1.5
}
</style>
<!--方式三 百分号， 表示 原字号的百分比（倍数）-->
<style>
p {
line-height: 150%
}
</style>垂直居中
有一种垂直居中的方式就是用行高等于盒子高。
<!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 {
height: 300px;
width: 300px;
background-color: red;
line-height: 300px;
}
</style>
</head>
<body>
<div class="box">
<p>文字</p>
</div>
</body>
</html>文本的水平对齐方式
值 | 意思 |
left | 左对齐 |
right | 右对齐 |
center | 水平居中 |
<style>
p {
width: 1100px;
}
.aleft {
text-align: left;
}
.aright {
text-align: right;
}
.acenter {
text-align: center;
}
</style>
<body>
<p class="aleft">左端对齐</p>
<p class="aright">右端对齐</p>
<!-- 开发过程中通常可以用text-align实现水平居中-->
<p class="acenter">水平居中</p>
</body>一个实现垂直和水平居中的例子
垂直方向：行高等于盒子高。
水平方向：文字的text-align属性为center。
<!--文字垂直和水平都居中-->
<!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 {
height: 300px;
width: 300px;
background-color: red;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<p>文字</p>
</div>
</body>
</html>文本和内容的缩进量。
梯机动态效果图
程序员总是会在无聊的时候做出一些让我们觉得脑洞大开的效果，这次就用了430纯css代码做了一个小球弹跳上楼梯这样的效果，而且不加任何javascript代码，下面我们一起来看一下效果的源码吧。
小球弹跳上楼梯源码：
因为代码高达500行全部发出感官效果不理想，只能截取部分源码用于文章分享。
代码过长有需要文档版源码的可以加群589651705获取，已上传群文件
需要更多的web前端企业级特效，学习方法，敬请关注本头条号！
*请认真填写需求信息，我们会在24小时内与您取得联系。
