20.17.11.7笔记
来源：互联网 发布：男士发型 知乎 编辑：程序博客网 时间：2024/05/18 00:08
居中和对齐
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个参数，第一个参数作为左上角的半径，第二个参数作为右上角和左下角的半径，第三个参数作为右下角的半径。
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个参数。- 第一个参数：控制阴影在水平方向的偏移。
- 第二个参数：控制阴影在垂直方向的偏移。
- 第三个参数：控制阴影的模糊程度。
- 第四个参数：控制阴影的缩放程度。
- 第五个参数：改属性值控制阴影的颜色。
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 20px 10px 100px 100px #888888;
}<
/style>
</head>
<body>
<div></div>
动画
1.渐变动画
transition 动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。
- 第一个参数：指定对哪个HTML元素进行处理。
- 第二个参数：定义持续时间。
- 第三个参数：指定渐变的速度。 （有多个可用的属性值，请完成自学）
- 第四个参数：指定延迟时间。
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}d
iv: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>
