css新生陌生又常用的属性大全

2024年3月13日 175次阅读 来源: kioo

vw,vh,vmin,vmax

实现完整覆盖

#mask {
  height: 100vh;
  position: fixed;
  left:0;
  top:0;
}

字体适配(横竖屏切换)

font-size: 5vmin

伪元素选择器::after ::before

用法:清除浮动

用法:写对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left,.right{
            min-height: 40px;
            position: relative;
            display: table;
            text-align: center;
            border-radius: 7px;
            background-color: #9EEA6A;
            border: 1px solid #736262;
        }
        .right{      /*使左右的对话框分开*/
            top: 40px;
            left: 60px;
        }
        .left > p,.right > p{    /*使内容居中*/
            display: table-cell;
            vertical-align: middle;
            padding: 0 10px;
        }
        .left:before,.right:after,.left:after,.right:before{   /*用伪类写出小三角形*/
            content: '';
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            position: absolute;
            top: 11px;
        }
        /*分别给左右两边的小三角形定位*/
        .left:before{
            border-right: 8px solid #9EEA6A;
            left: -16px;
        }
        .left:after{      /*左边对话框小三角形的边框样式*/
            border-right: 8px solid #736262;
            left: -17px;
            z-index: -1;
        }
        .right:after{
            border-left: 8px solid #9EEA6A;
            right: -16px;
        }
        .right:before{    /*右边对话框小三角形的边框样式*/
            border-left: 8px solid #736262;
            right: -17px;
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="left">
    <p>吃了吗</p>
</div>
<div class="right">
    <p>吃过了，吃了红烧排骨和酸菜鱼</p>
</div>
</body>
</html>

未定义行为

button.addEventListener('mousedown', functioin(event) {
    event.preventDefault();
});
// 这段代码会阻止元素的默认行为,从而让拖动等操作更为流畅
    原文作者：kioo
    原文地址: https://segmentfault.com/a/1190000017951894
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞