css的运用

已于 2022-10-12 17:17:09 修改
阅读量359 收藏 2
点赞数
分类专栏： CSS 文章标签： css javascript 前端
于 2022-09-29 15:31:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TWenYuan/article/details/127089793
版权

自写复选框

<input type="checkbox" id="l">
<label for="l">复选框</label>
<style>
        input:checked+label{
            color: red;
        }
</style>

手风琴效果（展开图片）

手风琴效果

<body style="background-color: black;">
    <div class="wrap">
          <div class="box">
        <div class="picBox">
            <img src="img/手风琴效果/1.jpg">
            <div class="mask">计算机</div>
            <div class="mask">计算机</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/2.jpg">
            <div class="mask">家</div>
            <div class="mask">家</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/3.jpg">
            <div class="mask">抽象</div>
            <div class="mask">抽象</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/4.jpg">
            <div class="mask">车</div>
            <div class="mask">车</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/5.jpg">
            <div class="mask">日出</div>
            <div class="mask">日出</div>
        </div>
    </div>
    </div>
  
</body>

<style>
        .wrap{
            /* 用于负责外框的  防止鼠标经过白框的时候的动图出现bug*/
            width: 805px;height: 400px;
            border: 5px solid white;
        }
        .box{
            /* 用于装所有每部结构的 */
            width: 805px;height: 400px;
        }
        .picBox{
            width: 160px;
            height: 400px;
            border-right: 1px solid white;
            position: relative;
            overflow: hidden; 
            float: left;
        }
        /* .picBox中的img标签 */
        .picBox img{
            width: 500px;
            height: 400px;
           transition: 0.5s;
        }
        .mask{
            width:100%;
            height: 400px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            line-height: 400px;
           transition: 0.5s;

        }
        /* 表示某个父类标签中的第二个后代标签是.mask 的.mask标签 
        (这个mask标签在它的父类标签中排第二个位置，前面还有个img标签)*/
        .mask:nth-child(2){
            position: absolute;
            top: 0;
            left: 0;
       
        }
      
        .mask:nth-child(3){
            position: absolute;
            bottom: 0;
            left: 0;
        }
       /* 包含了两个选择器 */
        .box:hover .picBox{
            width: 75px;
        } 
         /* 必须要有两个选择器，与上一个代码块一样，防止代码等级低被覆盖 */
        .box .picBox:hover{
            width: 500px;
        }
        .picBox:hover .mask:nth-child(2){
            height: 60px;
            line-height: 60px;
        }
        .picBox:hover .mask:nth-child(3){
            height: 60px;
            /* 必须控制行高，否则行高还是原来的行高，文字的位置就不会 */
            line-height: 60px;
        }
    </style>

双重阴影按钮

双重阴影按钮

 <div class="box">
        双重阴影
 </div>
    
 <style>
        .box{
            width: 200px;
            height: 60px;
            color: white;
            background-color: red;
            margin: 100px auto;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
            text-align: center;
            line-height: 60px;
            transition: 0.5s;
            cursor: pointer;
        }
        /* 鼠标经过 */
        .box:hover{
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5),0 0 40px  rgba(0, 0, 0,                           0.5) inset ;
         }
        /* 鼠标按下时(激活) */
        .box:active{
            box-shadow: 0 0 0px rgba(0, 0, 0, 0.5),0 0 40px  rgba(0, 0, 0, 0.5)                         inset ;
            margin-top: 110px;
        }
 </style>

图片上下滚动

图片上下滚动

<div class="box">
        <div class="bg"></div>
        <div class="bg"></div>
        <div class="bg"></div>
        <div class="bg"></div>
 </div>
 <style>
        .box{
            width: 216px;
            height: 60px;
            background-color: rgb(255, 255, 255);
        }
        .bg{
            width: 54px;
            height: 42px;
            /* border: black 1px solid; */
             background-repeat: no-repeat;
            background-position: center 0;
             float: left;
             margin-top: 10px;
             transition: 0.5s;
        }
        .bg:nth-child(1){
            background-image: url("img/图片上下滚动/bg_01.png");
        }
        .bg:nth-child(2){
            background-image: url("img/图片上下滚动/bg_02-03.png");
        }
        .bg:nth-child(3){
            background-image: url("img/图片上下滚动/bg_02-04.png");
            }
        .bg:nth-child(4){
            background-image: url("img/图片上下滚动/bg_02.png");
        }    
        .bg:nth-child(1):hover{
            background-position: center -42px;
        }
        .bg:nth-child(2):hover{
            background-position: center -42px;
        }
        .bg:nth-child(3):hover{
            background-position: center -42px;
        }
        .bg:nth-child(4):hover{
            background-position: center -42px;
        }
    </style>

图片翻转效果

图片翻转效果

<div class="box">
        <div class="picBox">
            <div class="font">
                <img src="img\01.jpg" alt="">
                <div class="text">春</div>
            </div>
            <div class="pic">生机勃勃</div>
        </div>
        <div class="picBox">
            <div class="font">
               <img src="img\02.jpg" alt="">
            <div class="text">夏</div>  
            </div>
           
            <div class="pic">阳光明媚</div>
        </div>
        <div class="picBox">
            <div class="font">
                 <img src="img\03.jpg" alt="">
            <div class="text">秋</div>
            </div>
           
            <div class="pic">硕果累累</div>
        </div>
        <div class="picBox">
            <div class="font">
                <img src="img\04.jpg" alt="">
            <div class="text">冬</div>
            </div>
            
            <div class="pic">白雪皑皑</div>
        </div>
    </div>
    
    <style>
        .box {
            width: 840px;
            height: 300px;
            /* border: olive 1px solid; */

        }

        .picBox {
            width: 210px;
            height: 300px;
            /* background-color: olive; */
            float: left;

            position: relative;
            perspective: 800px;
        }

        .font {
            width: 200px;
            height: 300px;
            position: absolute;
            left: 5px;
            top: 0;
            z-index: 2;
            /* 步骤2 */
            /* 过渡 */
            transition: 1s;
             /* 设置翻转以后的背面不可见 */
             backface-visibility: hidden;
        }

        .picBox img {
            width: 200px;
            height: 300px;
            border-radius: 20px;
        }

        .text {
            width: 36px;
            height: 36px;
            color: white;
            font-size: 30px;
            font-family: 楷体;
          

            position: absolute;
            left: 34px;
            top: 34px;
        }

        .pic {
            width: 200px;
            height: 300px;
            background-color: black;
            border-radius: 20px;
            color: white;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            font-family: 楷体;
            font-weight: bold;

            position: absolute;
            left: 5px;
            top: 0;

            /* 步骤2 */
             /* 先做出翻转效果 */
             transform: rotateY(180deg);
             /* 过渡 */
             transition: 1s;

             /* 设置翻转以后的背面不可见 */
             backface-visibility: hidden;
        }
        .picBox:hover .font{
            /* 步骤2 */
            /* 翻转效果 */
            transform: rotateY(-180deg);
           
        }
        .picBox:hover .pic{
            /* 步骤2 */
             /* 翻转效果 */
             transform: rotateY(0deg);
        }
        /* 步骤2 */
        .picBox:nth-child(1) .pic{
            color: yellowgreen;
        }
        /* 步骤2 */
        .picBox:nth-child(2) .pic{
            color: rgb(231, 0, 0);
        }
        /* 步骤2 */
        .picBox:nth-child(3) .pic{
            color: rgb(255, 230, 0);
        }
        /* 步骤2 */
        .picBox:nth-child(4) .pic{
            color: rgb(255, 255, 255);
        }
    </style>

雨刷效果

雨刷效果

<div class="picBox">
        <img src="img\10.jpg" alt="">
        <div class="mask"></div>
        <div class="text">Come Back</div>
        <div class="mask1"></div>
 </div>
 
 <style>
        body{
            background-color: #e9dcdc;
        }
        .picBox{
            width: 480px;height: 360px;
           margin: 50px auto;
           position: relative;
         
        }
        .mask{
            width: 480px;height: 360px;
            background-color: rgba(0, 0, 244, 0.3);
            position: absolute;
            left: 0;top: 0;
            opacity: 0;
            transition: 0.5s;
        }
        .text{
            color: white;
            font-size: 30px;
            position: absolute;
            left: 50px;
            top: 30px;
            opacity: 0;
            transition: 0.5s;
        }
        .mask1{
            width: 480px;height: 360px;
           position: absolute;
           top: 0;left: 0;
           
              /* 雨刷效果  transparent:透明度
                    linear-gradient(渐变方向，一边渐变透明度，一边渐变色，另一边渐变色，另                     一边渐变透明度)
             */
           background: linear-gradient(to right top,transparent 40%,rgba(255,255,255,0.5) 40% ,rgba(255,255,255,0.5) 50% ,transparent 50%);
           background-repeat: no-repeat;
           background-size: 200% 200%;
           background-position: 410px -250px;
          transition: 0.5s;
        }
       
        .picBox:hover .mask1{
           background-position: -480px 0px;
        }
        .picBox:hover .text{
            opacity: 1;
        }
        .picBox:hover .mask{
            opacity: 1;
        }
    </style>

字体光束

字体光束

<div class="box">
        前途似海,来日方长。
</div>

<style>
        body {
            background-color: #000000;
        }

        .box {
            height: 300px;
            width: 1000px;
            background-color: aquamarine;
            margin: 50px auto;
            color: rgba(255, 255, 255,0.5);
            font-size: 100px;
            font-family: 楷体;
            text-align: center;
            line-height: 300px;
            /* 背景光束 */
            background: linear-gradient(to right top, transparent 35%, #ffffff 48%, #ffffff 53%, transparent 65%);
            background-size: 300px 300px;
            background-repeat: no-repeat;
            /* 步骤2 */
            /* 设置背景在整个框里的位置 */
            background-position: 0px 0px;
            /* 将背景裁剪到文字 */
            -webkit-background-clip: text;
            /* 调用动画 */
            animation: move 1.5s infinite;
        }

        /* 步骤2 */
        /* 设置动画 */
        @keyframes move{
            0%{background-position: -180px 0;}
            100%{background-position: 800px 0;}
        }
    </style>

背景渐变

在这里插入图片描述

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
</body>
<style>

        .box{
            float: left;
            width: 300px;
            height: 200px;
            margin: 30px 30px ;
        }
        .box:nth-child(1){
           background:repeating-linear-gradient(#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
        }
        .box:nth-child(2){
           background:repeating-linear-gradient(to right,#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
        }
        .box:nth-child(3){
           background:repeating-linear-gradient(to left  bottom,#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
        }
        .box:nth-child(4){
           background:linear-gradient(to left  bottom,#e08127 0,#e08127 50%,#00abed 50% ,#00abed 100%) ;
        }
        .box:nth-child(5){
           background:linear-gradient(to left  bottom,#e08127 0,#e08127 50%,#00abed 50% ,#00abed 100%) ;
           background-size: 50px 50px;
        }
        .box:nth-child(6){
           background:linear-gradient(to right,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%) ,linear-gradient(to bottom,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%);
        }
        .box:nth-child(7){
           background:linear-gradient(to right,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%) ,linear-gradient(to bottom,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%);
           background-size: 50px 50px;

        }
    </style>

字体图标（圆角）

字体图标

<body>
    <ul class="text">
        <li> <span class="icon"></span>Home</li>
        <li><span class="icon"></span>About Me</li>
        <li><span class="icon"></span>work</li>
        <li><span class="icon"></span>photography</li>
        <li><span class="icon"></span>contact</li>
    </ul>
</body>
<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background-color: #29a79b;
        }
        
        .icon{
            position: relative;
            float: left;
            margin-bottom: 20px;
            display: block;
            height: 95px;
            width: 80px;
            height: 80px;
            border: 1px solid white;
            border-radius: 50%;
        }
        li:nth-child(1) .icon{
            background:#fff  no-repeat center center;
        }
        li:nth-child(2) .icon{
            background:#fff url("img/字体图标-圆角练习02.png") no-repeat center center;
        }
        li:nth-child(3) .icon{
            background:#fff url("img/字体图标-圆角练习03.png") no-repeat center center;
        }
        li:nth-child(4) .icon{
            background:#fff url("img/字体图标-圆角练习04.png") no-repeat center center;
        }
        li:nth-child(5) .icon{
            background:#fff url("img/字体图标-圆角练习05.png") no-repeat center center;
        }
        .text{
            margin-top: 200px;
        }
        .text li{
            float: left;
            padding:0 40px;
            width: 85px;
            text-align: center;
            font-weight: bold;
            color: #0c6766;
        }
        .icon::after{
            content: "";
            float: left;
            border-style: solid solid none solid;
            border-width: 15px 12px 0  12px;
            border-color: rgb(255, 255, 255) transparent transparent transparent;
            /* content: url("img/小三角.jpg");*/
            position: absolute;
            bottom: -14px;
            left: 50%;
            margin-left: -12px; 
        }
        li:hover{
            color: white;
            transition: 1s;
        }
        /* ********** 1 ********** */
        li:nth-child(1) .icon{
            transform: rotate(90deg);
            transform-origin:center bottom;
            opacity: 0;
            transition: 1s;
        }
        li:nth-child(1):hover .icon{
            transform: rotate(0deg);
            opacity: 1;
        }
        /* ********** 2 ********** */
        li:nth-child(2) .icon{
            transform-origin:center bottom;
            transform: scale(0);
            opacity: 0;
            transition: 1s;
        }
    
        li:nth-child(2):hover .icon{
            transform: scale(1);
            opacity: 1;
        }
        /* ********** 3 ********** */
        li:nth-child(3) .icon{
            transform: scalex(-1);
            opacity: 0;
            transition: 1s;
        }
        
        li:nth-child(3):hover .icon{
            transform: scalex(1);
            opacity: 1;
        }
        /* ********** 4 ********** */
        li:nth-child(4) .icon{
            transform: translateY(10px);
            transform-origin:center bottom;
            opacity: 0;
            transition: 1s;
        }
      
         li:nth-child(4):hover .icon{
             transform: translateY(0);
            opacity: 1;
        }
        /* ********** 5 ********** */
        li:nth-child(5) .icon{
            transform: translateY(-10px);
            transform-origin:center bottom;
            opacity: 0;
            transition: 1s;
        } 
      
         li:nth-child(5):hover .icon{ 
             transform: translateY(0px);
            opacity: 1;
        }
    </style>

弹性盒（）

居中对齐
<div class="box">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
    </div>
<style>
        .box{
            margin: 50px auto;
            width: 400px;
            height: 400px;
            border: 2px solid #bbbbbb;

            /* 1、弹性盒设置 */
            display: flex;
            justify-content: center;   // /* 居中排列 */
            align-items: center;

           /* 2、弹性盒设置 */
            display: flex;
            justify-content: space-between;   // /* 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。 */
            align-items: center;

          /* 3、弹性盒设置 */
            display: flex;
            justify-content: space-evenly;   // /* 均匀排列每个元素，每个元素之间的间隔相等。 */
            align-items: center;

         /* 4、弹性盒设置 */
            display: flex;
            justify-content: space-around;   // /* 均匀排列每个元素，每个元素周围分配相同的空间。 */
            align-items: center;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
对角线

在这里插入图片描述

<div class="box">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
</div>
<style>
        .box{
            margin: 50px auto;
            width: 400px;
            height: 400px;
            border: 2px solid #bbbbbb;

            /* 1、弹性盒设置 */
            display: flex;
            justify-content: space-around;

          /* 2、弹性盒设置 */
            display: flex;
            justify-content: space-between;
        }
        img{
            width: 100px;
            height: 100px;
        }
        img:nth-child(1){
            align-self: flex-start;
        }
        img:nth-child(2){
            align-self: center;
        }
        img:nth-child(3){
            align-self: flex-end;
        }
    </style>
TWenYuan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
align-item 与 align-content 的区别
ASIYAas的博客
02-18 9895
align-item 与 align-content 的区别
HarmonyOS鸿蒙学习笔记（11）Flex组件alignItems属性说明
最新发布
菜鸟博客
09-20 1477
HarmonyOS Flex组件使用说明
flex布局（弹性盒子二）
m0_72959685的博客
08-24 1424
意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，且每个子元素盒子与父元素之间都有一定的空隙。意思是设置属性值为space-around后，三个盒子分别排列在父元素盒子的左 右 中间，且两边盒子与父元素两边有较大空隙。意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，意思是设置属性值为 flex-end后，盒子从右向左排列在父元素盒子中，开始位置在最右最上边。
CSS布局flex布局 对齐 等分 均分 详解
热门推荐
boy火巨的博客
04-23 3万+
一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到float属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在float: center的写法，那么text-align: center、verticle-align: center是否...
css设置子元素均匀分布
qq_35779070的博客
06-14 4849
设置子元素均匀分布：（4个子元素，总宽度400px） 第一种： 子元素宽度：100px，会发现并没有排在父元素中，因为会考字符的空白 解决方法：在父元素上设置font-size为0，子元素上的font-size单独设置 第二种：flex方式 父元素设置 display：flex 子元素设置 flex：1 如果想单独设置某一项，可以将该项 flex 属性设置为 inherit ...
CSS运用的技巧（word）
12-14
这份名为“CSS运用的技巧（word）”的文档集合了CSS的一些实用技巧，可以帮助开发者提高工作效率，创建出更具美感和功能性的网站。下面，我们将深入探讨这些技巧，并详细阐述其原理和应用场景。 一、选择器的高效...
CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
11-21
进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的，点击添加到库 选择完之后，点击右上角的购物车图标（前提是... 之后在个人主页中可以看见 1.Unicode 2.Font class 此次便是对于这两个的使用 Unicode ...
css
03-19
CSS，全称Cascading Style Sheets，中文名...通过深入理解和熟练运用这些CSS知识点，开发者可以构建出美观、高效且适应多设备的网页。同时，不断学习新的CSS规范和最佳实践，将有助于保持与时俱进，提升网页设计能力。
50个强大璀璨的CSS3/JS技术运用实例
09-25
"50个强大璀璨的CSS3/JS技术运用实例"展示了这两个技术的潜力和创新性，即使在浏览器支持有限的情况下，设计师们依然积极探索并实践这些新特性。 首先，CSS3的引入为网页设计带来了许多新的视觉特效和布局技术。...
CSS运用的二十四则技巧
11-19
以下是一些关于CSS运用的关键知识点： 1. **浏览器差异处理**：不同的浏览器对CSS的解析方式可能有所不同，如Firefox和IE对`ul`标签的默认样式处理就有区别。要解决这种兼容性问题，可以通过浏览器特定的hack或使用...
css解决含不同字数的相同宽度的多个盒子，自动排列对齐（基础实用）
high_height的博客
01-05 6866
文本2端对齐 - flex *{padding: 0;margin: 0;} html,body{height: 100%} ul{list-style: none;} .plist { position: relative; padding: 9px 15px; background-color: #fff; } .plist .plist-
flex布局 align-content和align-item的区别
小白前端
03-15 2300
最明显的区别是align-content 适用于多行，align-item 则是适用于单行。 align-content（单行无效）可以设置上对齐、下对齐、居中、拉伸、平分剩余空间；align-item上对齐、下对齐、居中、拉伸。 <style> .demo { display: flex; flex-wrap: wrap; width: 500px; height: 500p
关于align-items和align-content的区别和使用场景
weixin_30314631的博客
12-14 1789
　　最近在研究flex布局，容器中有两个属性，是用来定义crossAxis测轴排列方式的。一开始接触align-items还可以理解感觉不难,后来看到align-content就感觉有点混淆了，特开一篇博客记录一下我的学习过程。先来看看两个属性的基本用法和定义，这里摘抄于萤火虫塔莉上的回答。 align-items The align-items property applies to a...
align-items
qq_30970807的博客
12-10 926
一、实例居中对齐弹性盒的各项div元素div{ display: flex; align-item:center; }二、定义和用法 align-items用于定义flex子项在flex容器的纵轴方向上的对齐方式三、属性 1、stretch 默认值，项目被拉伸以适应容器2、center 项目位于容器中心3、flex-start 项目位于容器开头4、flex-end 项目位于容器结尾5、b
align-content、justify-content、align-items三个属性的作用和效果
qq_44329870的博客
11-20 2万+
一.align-content属性 作用：设置同一列子元素在Y轴的对齐方式 属性值 描述 flex-start 排列在当前列的最上方 flex-end 排列在当前列的最下方 center 排列在当前列的中间位置 space-between 间距相等排列，上下不留白 space-around 间距相等排列，上下留白等于间距的一半 二.justify-content属性 作用：设置同一行子元素在X轴的对齐方式 属性值 描述 flex-start 排列在当前行的
CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例
陈小峰（iefreer）的专栏
03-01 2万+
弹性项目可以按弹性容器当前行的cross axis来对齐，和justify-content类似，但在垂直方向上。其中align-items属性用于弹性容器，而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。
align-item 和 align-content的区别
weixin_34343000的博客
03-08 2102
align-content 和align-items ： 1：共同点：它们对齐方向为交叉轴 2：不同点：align-content 应用于为 多行 而 align-items:应用于单行。 转载于:https://www.cnblogs.com/huanhuan55/p/10493899.html...
概述flex布局中align-items 和align-content的区别
小马过河
05-07 5651
align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。   align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。   align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。   对于只有一行的flex元...
css自动均匀分布,如何在CSS中均匀分布？
weixin_35349608的博客
08-03 2924
我会建议使用grid 960系统或类似的东西。网格960使用12列网格行布局，均匀分布即时div。这非常灵活，您可以使用多种不同的组合。它实现了你所追求的。希望这有助于。CSS：.container_12{width:98%;margin-left:1%;margin-right:1%;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7...
CSS高效运用指南：十八般技巧解析
尽管已有《常用css缩写语法总结》提供具体规则，但关键在于理解如何合理地运用这些缩写，比如避免在数值和单位间添加空格。 2. 尺寸单位明确：在CSS中，尺寸值必须明确指定单位，如像素（px）、em、rem等，除非是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值