【开发】css 小伎俩

最新推荐文章于 2024-05-04 15:39:07 发布

逆风飞翔的代码单身狗

最新推荐文章于 2024-05-04 15:39:07 发布

阅读量62

点赞数

分类专栏：开发 css3

本文链接：https://blog.csdn.net/weixin_41530639/article/details/115345887

版权

css3 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

开发

2 篇文章 0 订阅

订阅专栏

移动端通过rem布局，当文字已经缩小到最小的12px了，已经没有办法再缩小了，可以通过增加宽度，让文字尽可能地排到一行，然后通过transform:scale()来对它进行缩小，最终达到设计图的效果


    width: 140%;
    transform:scale(0.8)

### **1.当设计图很小，而要摆放的文字很多，**

	字体已经是最小的12px的时候,	保证父元素的宽度，子元素先扩宽宽度，让内容尽量并排显示，再通过transform:scale()属性去进行缩放

### **2.怎么画曲线**

画曲线一般用到radial-gradient这个属性

### **3.怎么画直线**

最好是用::before和::after这两个伪类去画直线，或者画三角形也可以用伪类元素，或者其他一些小标记都可以用伪类来实现


// 用伪类画一条直线
        .line-item::before{
            content:'';/* 必不可少的一部分*/
            display: block;
            width: 30px;
            height:1px;
            background:#000;
        }  
    <div class="line-item"></div>
 
 // 用伪类画一个三角形
 
    p::after{
        content:'';
        /* display: block; */
        border:20px solid transparent;
        border-top:20px solid #ccc;
    }
  
  // 只需要这条语句就可以了
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="伪类写三角形">
    <title>Document</title>
    <style>
    div{
        width:200px;
        height:100px;
        position: relative;
        margin:50px auto;
        border:1px solid black;
    }
    div:before{
        content:"";
        border:10px solid transparent;
        border-bottom-color:black;
        position:absolute;
        left:20px;
        top:0;
        margin-top:-20px;

    }
    div:after{
        content:"";
        border:10px solid transparent;
        border-bottom-color:white;
        position: absolute;
        top:0;
        left:20px;
        margin-top:-19px;
    }

    </style>
</head>
<body>
    <div></div>
</body>
</html>



[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5tEQtm4-1618281779404)(C:\Users\wangboqing\AppData\Roaming\Typora\typora-user-images\image-20210402144515537.png)]

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JRr2Gfrb-1618281779406)(C:\Users\wangboqing\AppData\Roaming\Typora\typora-user-images\image-20210402145856175.png)]

### **4.transition 设定属性过渡，怎么设置属性变化过去然后再变化回来**

// 注意一般的写法是将transition写在元素里面，transform写在一个触发的样式里，一般通过hover或者js事件来触发


        ul,li,ol{
            list-style:none;            
        }
        .items{
            display: flex;
        }
        .item{
            width: 200px;
            height: 200px;
            background-color:goldenrod;
            margin-right:20px;
            font-size: 30px;
            text-align: center;
            line-height:200px;
            transition: all .5s ease;
        }
        .item.active{
            transform: scale(0.5);
        }

    <ul class = "items">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
    
    
        <script src="./common/js/jquery.min.js"></script>

        // 实现鼠标移入，引起样式变化，但是一段时间后就恢复到原来的样式，类似于hover
        $('.items .item').on('mouseenter',function(){
            $(this).toggleClass('active')
            // that.toggleClass('active')
            setTimeout(()=>{
                $(this).toggleClass('active')
            },300)
        })




**鼠标移入(hover)引起的样式变化，把样式写在hover里，把transition写在元素的样式中**

### **5.setTimeout() 和timeSetInterval()** 的this指向问题

1.**它们的this指向默认指向外层的window对象**

**但是可以通过写成**

**setTimeout(()=>{**

	**这个时候内部的this就会指向调用它的对象**

**})**



2. 类似于vue里面的一种东西，默认的指向是window，但是可以在进入这个函数或者队列之前重新定义this指向


               let that = $(this)
               setTimeout(function(){
                   // console.log(1)
                   // console.log(that.children())
                   that.children('img').removeClass('active')
   
               },1000)


   

### 6.怎么设置文本文字间的间隙和开头空两格



开头空格用text-indent

文字间的间隙用letter-spacing



### 7.当子元素的margin和父元素的margin重叠

给父元素添加一个border-top:1px solid transparent;



### 8.怎么设置省略号


    p{
        width: 100px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    // 元素必须要有宽度，超过部分隐藏，不换行






 9.内容太多导致横向出现滚动条


html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}


10.当你使用flex布局的时候，最后一行怎么进行左对齐？

### 最后一行如果是两个元素呢，你又怎么对齐间隙？




.yhjc>.content::after{
    content:'';
    display: block;
    flex:.75;
}


11.当你的网页里面含有video标签时，光添加loop=“loop” 和autoplay = "autoplay"仍旧无法自动播放

的时候需要在标签添加muted = "muted"



### ps:

**z-index好像只有对定位的元素才有用**

**要重复触发的效果千万不要用mouseout，只会触发第一次**

**要重复变化的样式尽量不要通过css()去设置**



 12.注意在用getElementsByClassName、getElementsById、getElementsByTagName去选中元素的时候，
 需要加上[index]下标。因为这三个获取方法获取到的是一个数组，指定下标才能获取到对应的元素，否则会报错





13.禁止用户拖拽图片：

1.img标签上可以加上draggable = "false"

2.全局样式写上 


img{
    /* draggable:false; */
    
    -webkit-user-drag: none;
}

逆风飞翔的代码单身狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【开发】css 小伎俩

移动端通过rem布局，当文字已经缩小到最小的12px了，已经没有办法再缩小了，可以通过增加宽度，让文字尽可能地排到一行，然后通过transform:scale()来对它进行缩小，最终达到设计图的效果 width: 140%; transform:scale(0.8)...
复制链接

扫一扫

专栏目录