十一月七日课堂笔记

最新推荐文章于 2022-03-30 15:38:40 发布

weixin_40886102

最新推荐文章于 2022-03-30 15:38:40 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/weixin_40886102/article/details/78470259

版权

专题：居中和对齐
我们在学习中经常会遇到需要水平居中、垂直居中、对齐元素的场景，而居中和对齐又有很多方法和前提条件，本节我们来整理一下。

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>

动画
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;}
    }


<body>
    <div></div>

</body>

weixin_40886102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十一月七日课堂笔记

专题：居中和对齐我们在学习中经常会遇到需要水平居中、垂直居中、对齐元素的场景，而居中和对齐又有很多方法和前提条件，本节我们来整理一下。1.margin设置区块元素水平居中 margin:0 auto;设置左右外边距的大小，控制元素的水平居中。<style> .center{ margin: 20px auto;
复制链接

扫一扫