居中和对齐
我们在学习中经常会遇到需要水平居中、垂直居中、对齐元素的场景，而居中和对齐又有很多方法和前提条件，本节我们来整理一下。
1.margin设置区块元素水平居中
margin:0 auto;设置左右外边距的大小，控制元素的水平居中。
<style>
.center{
margin: 20px auto;
width: 600px;
border: 3px solid green;
text-align: center;
}
</style>
<body>
<div class="center">
<p>使用margin进行元素的居中</p>
</div>
</body>
注：width不能设置为100%，是没有效果的。
2.position属性设置元素的左右对齐
<style>
.right{
position: absolute;
right: 0;
width: 300px;
border: 3px solid pink;
padding: 10px;
z-index: 0;
}
<style>
<body>
<div class="right">
<p>我是右对齐的区块</p>
</div>
</body>
</html>
3.float属性设置左右对齐
<sty>
.right1{
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
</head>
<body>
<div class="right1">
<p>我是浮动右对齐的区块</p>
</div>
</body>
</html>
4.padding属性设置水平垂直居中
<style>
.padCenter{
padding: 70px 0;
border: 3px dotted yellow;
text-align: center;
}
</style>
<body>
<div class="padCenter">
<p>我是用padding垂直居中的元素</p>
</div>
</body>
</html>
5.line-height属性设置水平垂直居中
<style>
.lineCenter{
line-height:300px;
border: 3px solid #33ff33 ;
height: 300px;
}
</style>
<body>
<div class="lineCenter">
<p>我是利用行高进行水平居中的元素</p>
</div>
</body>
</html>
6.绝对定位和transform属性设置水平垂直居中
<style>
.poCenter{
border: 3px solid #ff88c2;
height: 200px;
position: relative;
}
.poCenter p{
position: absolute;
top: 50%;
left: 50%;
/*对水平垂直居中进行修正*/
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="poCenter">
<p>我是利用绝对定位进行水平垂直居中的元素</p>
</div>
</body>
</html>
CSS3边框
1.圆角边框
border-radius :用于指定圆角边框的圆角半径。
如指定1个参数，则4个圆角都使用该长度作为半径。
如指定2个参数，则第一个参数作为左上角和右下角的半径，第二个参数作为右上角和左下角的半径。
如指定3个参数，第一个参数作为左上角的半径，第二个参数作为右上角和左下角的半径，第三个参数作为右下角的半径。
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
<body>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>
2.边框阴影
box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。
第一个参数：控制阴影在水平方向的偏移。
第二个参数：控制阴影在垂直方向的偏移。
第三个参数：控制阴影的模糊程度。
第四个参数：控制阴影的缩放程度。
第五个参数：改属性值控制阴影的颜色。
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 20px 10px 100px 100px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
动画
1.渐变动画
transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。
第一个参数：指定对哪个HTML元素进行处理。
第二个参数：定义持续时间。
第三个参数：指定渐变的速度。（有多个可用的属性值，请完成自学）
第四个参数：指定延迟时间。
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
<body>
<div></div>
</body>
2.Animation动画
annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性，有5个参数：
第一个参数：指定动画的名称。
第二个参数：指定动画的持续时间。
第三个参数：指定动画的变化速度。
第四个参数：指定动画延迟多久开始执行。
第五个参数：指定动画循环执行的次数。
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
<body>
<div></div>
</body>
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
