前端CSS基础学习之——居中，定位，画圆

一个demo 目的是实现浏览器内一个div的居中，然后在div的对角上分别加一个四分之一圆。

首先要实现浏览器内居中，怎么实现呢？

第一步肯定是建立一个div,并且设置它的高度宽度。

第二步是把它的position属性设置为absolute,并设置top和left的参数设置为50%，这样div的左上角就居中了。下一步就是要让div的中心居中。

第三步是通过 translate 位移元素使之中心居中，由于 translate 支持百分比，所以也就不用自己算偏移量了，

transform: translate(-50%, -50%)

这样就解决了居中问题。

.main{
    background-color: #205AA7;
    width: 400px;
    height: 200px;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
   
}

接下来实现在对角画圆。

添加一个div<>

设置高度宽度为想要的圆的直径，然后利用border-radius，把border-radius的参数设置为50%就成了一个圆

width: 100px;
height: 100px;

border-radius: 50%;

但是我们要求的是顶角半圆，所以要把它设置为移动。

于是还是利用 position 把它移动,position的属性为absolute(相对于父元素),因为圆的直径为width和height的50%，所以现在要把它往左上角移动50px，

position: absolute;
left: -50px;

top: -50px;

但是这样做并没有完成，由于使用了position:absolute使得这个圆脱离了文档流，把它往左上角移之后，其余的四分之三为出现在div的外面，这不是我们需要的。

那么，怎么解决呢？

可以在.div中添加overflow:hidden,则溢出的部分隐藏。

这样效果就出来了，

代码如下

 <style>
        .main{
            background-color: #205AA7;
            width: 400px;
            height: 200px;
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
        }
        .left-top{
            background-color: #ffcc00;
            position: absolute;
            left: -50px;
            top: -50px;
            width: 100px;
            height: 100px;

            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="left-top">

    </div>
    <div class="right-bottom">

    </div>
</div>

前端CSS基础学习之——居中，定位，画圆

猜你喜欢