ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS学习杂记

2021-05-09 22:01:15  阅读:170  来源: 互联网

标签:居中 solid height 学习 杂记 0px border CSS 200px


一、css画三角形

参考:https://blog.csdn.net/weixin_36270908/article/details/98947183

核心重点:给一个div,设置宽高为0,设置border加粗、有颜色或透明

效果:

 

 

 

代码:

 

二、css画梯形

 

 

 效果:

 

 

 代码:

<!DOCTYPE html>
<html>
<head>
    <title>css3绘制三角形</title>
    <style type="text/css">
        /* css3绘制梯形 */
        .tiXing1{
            width: 0px;
            height: 0px;
            border-top: 200px solid transparent;
            border-right: #ffa43f 200px solid;
            margin-left: 400px;
        }
        .tiXing2{
            width: 0px;
            height: 0px;
            border-top: 200px solid #ffa43f;
            border-left: #ffa43f 200px solid;
        }
        .tiXing3{
            width: 0px;
            height: 0px;
            border-top: 200px solid transparent;
            border-left: #ffa43f 200px solid;
        }
        div{
            float: left; /* 设置在一行上 */
        }
    </style>
</head>
<body>
<div class="tiXing1"></div>
<div class="tiXing2"></div>
<div class="tiXing3"></div>
</body>
</html>

 

三、css画圆

 

 

 效果:

 

 

 

代码:

<!DOCTYPE html>
<html>
<head>
    <title>css3绘制三角形</title>
    <style type="text/css">
        /* css3绘制梯形 */
        .tiXing1{
            width: 0px;
            height: 0px;
            border: #ffa43f 100px solid;
        }
        .tiXing2{
            width: 0px;
            height: 0px;
            border: #c96eff 100px solid;
        }
        .tiXing3{
            width: 0px;
            height: 0px;
            border: #ffee47 100px solid;
        }
        #fatherDiv{
            display: flex;

            /*水平居中*/
            justify-content: center;

            /*垂直居中*/
            wdith:100%;
            height:100vh;
            align-items: center;
            /*wdith:100%; height:100vh; 必须有才能使用align-items*/
        }
        #Circle{
            /*外圆设置居中*/
            display: flex;

            /*水平居中*/
            justify-content: center;

            /*垂直居中*/
            wdith:100%;
            height:100vh;
            align-items: center;
            /*wdith:100%; height:100vh; 必须有才能使用align-items*/
            border: #ffa43f 2px solid;
            border-radius: 50%;
            width: 200px;
            height: 200px;
        }
        #Circle1{
            border: #ffa43f 2px solid;
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="fatherDiv">
    <div class="tiXing1"></div>
    <div class="tiXing2"></div>
    <div class="tiXing3"></div>
    <div id="Circle">
        <div id="Circle1"></div>
    </div>
</div>
</body>
</html>

 

四、垂直居中flex实现

1、多个div一行并水平居中:

float: left;
margin-left: Px;

2、多个div一行并水平居中:

display: flex;
justify-content: center;

3、单个div水平居中:

margin: 0 auto;

4、多个div水平居中垂直居中

display: flex;

/*水平居中*/
justify-content: center;

/*垂直居中*/
wdith:100%;
height:100vh;
align-items: center;
/*wdith:100%; height:100vh; 必须有才能使用align-items*/

 

参考:https://www.runoob.com/w3cnote/flex-grammar.html

https://www.cnblogs.com/echolun/p/11299460.html

 

标签:居中,solid,height,学习,杂记,0px,border,CSS,200px
来源: https://www.cnblogs.com/zzz990214/p/14749041.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有