• 常用的CSS

    文章目录

    1-1:弹性布局 --横向居中

    display:block; 允许设定宽高,添加换行符
    display:inline-block:允许设定宽高,且不添加换行符，因此该元素可以位于其他元素旁边
    display:inline:设定宽高无效,且不添加换行符，因此该元素可以位于其他元素旁边

    讲display:flex的好文

    使文字等比例放大缩小全局设定:font-size:25px;有文字的元素中设定font-size:0.25rem
    注:10px=1em

    块级标签弹性布局: 父元素设定使子元素上下左右垂直:display: flex; justify-content: center; align-items: center;
    在这里插入图片描述

    1-2:文字居中

    vertical-align

    父元素:display: table; 子元素: display: table-cell; vertical-align: middle; text-align: center;
    在这里插入图片描述

    line-height

    子元素设定固定高度:height: 100px;text-align: center; line-height: 100px;
    在这里插入图片描述

    1-3 文字超出父级标签

    文字一行-超出为省略号

    text-overflow: ellipsis;overflow: hidden; white-space:nowrap
    在这里插入图片描述

    文字多行-超出为省略号

    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    在这里插入图片描述

    1-4 图片随div的大小变化,自动填充并居中显示

    在这里插入图片描述

    1-5 普通流布局

    去除默认间隙:父元素: font-size:0; letter-spacing: -4px;
    子元素: display: inline-block
    在这里插入图片描述

    1-6 清除浮动

    为什么清除浮动
    1.当父元素不设定高度时,高度由子元素的内容决定.但子元素为浮动时,父元素的高度为0
    2.为了避免产生浮动，父组件的背景或边框不能正确显示，这个时候我们就需要clear:both清除浮动

    不清除浮动
    在这里插入图片描述
    清除浮动
    可使用overflow:hidden或者clear:both

    overflow:hidden-----------在父组件中用
    clear:both-----------创建同级子组件,样式中增加
    在这里插入图片描述

    在这里插入图片描述

    1-7 :after :before 的使用

    功能:before,after 在元素内容前后加入指定内容

    利用after 画小三角形

      .flex_container:after{
    content: '';
    display: inline-block;   /*使设定的宽高有效*/        
    width: 0;
    height: 0;
    border: 16px solid transparent; /*transparent:透明*/
    border-left: 16px solid #b31d1d;
    /* border-top: 16px solid #54b31d;
    border-right: 16px solid #b7ca0d;
    border-bottom: 16px solid #1815b8; */
    position: relative;
    top: 2px;
    left: 10px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    如果设定全部的border
    在这里插入图片描述

    1-8 块级元素上下左右居中

    宽高已知

    width: 100px;height:100px;position:absolute; left:0;right:0; top:0;bottom:0;margin:auto;
    在这里插入图片描述

    宽高未知

    width:20%; height: 20%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: orange;
    在这里插入图片描述

    1-9 动画

    div波纹

    在这里插入图片描述
    在这里插入图片描述

    .main{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color:  darkturquoise;    
    padding: 10px;
    border-radius:40%;
    animation: wave 5s linear infinite;
}
@keyframes wave{
    100%{
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    1-10 border属性

    原图:
    在这里插入图片描述

    border-image/borderdemo样列
    round border-image: url('./image/border.png') 30 30 round;在这里插入图片描述
    stretch border-image: url('./image/border.png') 30 30 stretch;$12
    double border: 12px double #b1a4a4;$12
    groove border: 4px groove #5a9fe9;在这里插入图片描述
    ridge border: 4px ridge #5a9fe9;在这里插入图片描述
    inset border: 4px inset #5a9fe9;在这里插入图片描述
    outset border: 4px outset #5a9fe9;在这里插入图片描述
    inherit#inheritPartent{border:1px dotted #5a9fe9; } #inheritChildren{ border:inherit }在这里插入图片描述

    1-11 渐变色

    background-image:linear-gradient(45deg,red,yellow)

    code

    1-6

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>   
    <style>     
    *{
        margin:0;
        padding:0;
    }  
     .flex_container{
        border:1px solid #0aabb1;
    }
        .clear{
            clear: both;
        }
        .flex_item-left{
            width:10rem;
            height: 10rem;
            border:1px solid #0aabb1;
            float: left;
            
        }
        .flex_item-right{
            width:10rem;
            height: 10rem;
            border:1px solid #0aabb1;
            float: right;
            
        }
     </style>
</head>
<body>
    <div class="flex_container">
        <div class="flex_item-left"></div>
        <div class="flex_item-right"></div>
        <div class="clear"></div>
    </div>     
</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    1-5

    <style>  
   html,body{
       margin:0;
       padding:0;
       height:100%; 
   }
   .flex_container {
       width: 50%;
       height: 50%;
       background-color: #bff7d4;
       margin: 0 auto;
       margin-top: 15%;
       /*去除普通流布局子元素之间的div间隙*/
       font-size:0;
       letter-spacing: -4px;
    }
    .flex_item{
        width: 15%;
        height: 50%;
        background-color: palevioletred;  
        margin: 0 auto; 
        /* 普通流布局 */
        display: inline-block; /*子元素在一样*/
    } 
   
</style>
<div class="flex_container">
     <div class="flex_item"></div>
     <div class="flex_item"></div>
     <div class="flex_item"></div>
     <div class="flex_item"></div>
     <div class="flex_item"></div>
</div> 


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    1-4

    <style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
        margin-top:10%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
     }
     .flex_item{
         width: 20%;
         height: 50%;
         background-color: palevioletred;  
         margin: 0 auto; 
         margin-right: 1%;  
         text-align: center;
         position: relative;
         background-image: url('./油彩.jpeg'); /*图片背景颜色 ---当图片想要填充到一个div中时*/
         background-position: 50% 50%; /*图片居中*/
         background-size: 90% 90%; /* 图片大小*/
         background-repeat: no-repeat;/*图片只有一张,不重复*/
     }
 </style>
 <div class="flex_container">
      <div class="flex_item"></div>
      <div class="flex_item"></div>
      <div class="flex_item"></div>
      <div class="flex_item"></div>
      <div class="flex_item"></div>
 </div> 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    1-3-2

    <style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
     }
     .flex_item{
         width: 50%;
         height: 40px;
         background-color: palevioletred;  
         margin: 0 auto; 
         /* 文字多行-超出显示为省略号 */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /*表示显示的行数,溢出加省略号*/
        -webkit-box-orient: vertical;/*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
     }
    
 </style>
 <div class="flex_container">
      <div class="flex_item">文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中</div>
 </div>    
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    1-3-1

    <style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
     }
     .flex_item{
         width: 50%;
         height: 100px;
         background-color: palevioletred;  
         margin: 0 auto;      
         /* 文字一行-超出显示为省略号 */
         text-overflow: ellipsis;
         overflow: hidden;
         white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止  */
     }
    
 </style>

 <div class="flex_container">
      <div class="flex_item">文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中</div>
 </div>    
  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    1-2-2

    <style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto; /*div 左右居中*/
     }
     .flex_item{
         width: 50%;
         height: 100px;
         background-color: palevioletred;  
         margin: 0 auto;           
         text-align: center;/*文字左右居中*/
         line-height: 100px;/*文字垂直居中*/
     }
    
 </style>
<!-- 准备好一个容器 -->
 <div class="flex_container">
      <div class="flex_item">文字居中</div>
 </div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    1-2-1

    <style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 500px;
        background-color: #bff7d4;
        /* margin: 0 auto;
        line-height: 500px; */
        display: table;           
     }
     .flex_item{
         width: 50%;
         height: 50%;
         background-color: palevioletred;
         display: table-cell;
         vertical-align: middle;/*垂直居中*/
         text-align: center;/*水平居中*/

     }
   </style> 

 <div class="flex_container">
      <div class="flex_item">文字居中</div>
 </div>    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    1-1

    <style>  
     /* 宽度高度为整个屏幕   */
    html,body{
        margin:0;
        padding:0;
        /* 宽度不用设置,默认为100% */
        height:100%; 
        font-size: 25px;
    }
    /* 使div上下左右居中 */
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
        margin-top: 5%;
        display: flex; /*弹性布局*/
        flex-direction:row;/*子元素横向排列*/
        justify-content: center;/*相对父元素水平居中-包括行和块级元素*/
        align-items: center; /*相对父元素垂直居中*/
       
     }
     .flex_item{
         width: 20%;
         height: 50%;
         margin-right: 2%;
         background-color: palevioletred;
         text-align: center; /* 文字居中 */
         font-size: 0.25rem;
         /*
         1.定义了项目的放大 比例，如果为0，即使有剩余空间也不会放大
         2.如果取值为负数那么和0的取值效果相同
         */
         flex-grow: 0;
         /* font-size: 0.16em; */
     }
    
 </style>
<!-- 准备好一个容器 -->
 <div class="flex_container">
      <div class="flex_item">文字居中</div>
      <div class="flex_item">文字居中</div>
      <div class="flex_item">文字居中</div>
      <div class="flex_item">文字居中</div>
      <span>文字居中</span>
 </div>    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
  • 相关阅读:
    [环境配置]anaconda3的base环境与python版本对应关系表
    外包公司干了不到3个月，我离职了...
    华为机试真题 C++ 实现【考勤信息】
    数据结构与算法初体验
    qt颜色与字符串相互转换
    浅谈 volatile
    编写一款2D CAD/CAM软件（十七）绘制选择框
    Java后端开发（七）-- 在gitee上部署远程仓库，通过idea上传本地代码（用idea2022版本开发）
    Problem B: 排序二叉树
    HTML5 —— 初识 Canvas 画布
  • 原文地址：https://blog.csdn.net/c_x_m/article/details/120011637