前端样式笔记

1.未知宽度元素保持宽高一致(自适应高度)

/*当元素有绝对定位或固定定位时无效*/
div::after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

2.文字裁切样式

p {
    background-color: #FFEB3B;
    font-weight: 900;
    -webkit-background-clip: text;  /*裁切背景保留文字*/
    -webkit-text-fill-color: transparent;  /*文字填充色*/
    -webkit-text-stroke: 1px #000;  /*文字描边*/
}

3.文字单行、多行溢出隐藏

/*单行文字溢出隐藏为...*/
p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*多行文字溢出隐藏为...*/
p {
    display: -webkit-box;
    /*! autoprefixer: off */  /*停止编译*/
    -webkit-box-orient: vertical;   /*webpack打包时会被跳过，加上上面两行注释即可*/
    /* autoprefixer: on */  /*开始编译*/
    -webkit-line-clamp: 3;  /*超过几行隐藏*/
    overflow: hidden;
}

4.元素裁切

div {
    -webkit-clip-path:polygon(50% 0px,100% 100%,0px 100%);  /*三边形*/
    -webkit-clip-path:polygon(0 46%,50% 0,100% 46%,80% 100%, 20% 100%);  /*五边形*/
}

5.深度选择器(样式穿透)

/*当引用第三方组件修改样式不成功时*/
>>> .el-dialog__wrapper{
}
或
/deep/ .el-dialog__wrapper{
}

6.Flex弹性布局(详细教程)

/*父级*/
.container {
    display: flex | inline-flex; /*将对象作为块/内联块元素弹性盒子*/
    justify-content: flex-start | center | flex-end | space-between | space-around;  /*左右*/
                     /*起点对齐 | 居中对齐 | 结尾对齐 | 两端对齐 | 两端对齐(左右留白)*/
    align-items: flex-start | flex-end | center | baseline | stretch;  /*上下，值同上*/
                  /*居上对齐 | 居下对齐 | 居中对齐 | 第一行文字对齐 | 未设高度时高度100%*/
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;  /*上下，内容多行时有效*/
    flex-direction: row | row-reverse | column | column-reverse;  /*主轴方向*/
                     /*居左起点左 | 居右起点右 | 垂直起点上 | 垂直起点下*/
    flex-wrap: nowrap | wrap | wrap-reverse;  /*是否换行*/
                /*不换行 | 换行 | 换行倒叙(第一行在下)*/
    flex-flow: flex-direction(row | column...) flex-wrap(nowrap | wrap...);  /*flex-direction、flex-wrap的复合属性*/
}
/*子级*/
.container div {
    order: <integer>;  /*值越小排名越靠前，可以为负数*/
    flex-shrink: <number>;  /*是否允许空间不足时压缩大小(0:不压缩)*/
    flex-grow: <number>;  /*存在剩余空间时放大元素(0:不放大 2:如果其他项为1则该项为其他项1倍)*/
    flex-basis: 100px;  /*在未分配大小前可将值固定为具体数值*/
    flex: flex-grow(0 | 1...) flex-shrink(1 | 0...) flex-basis(auto...);  /*flex-grow、flex-shrink、flex-basis的复合属性*/
    align-self: auto | flex-start | flex-end | center | baseline | stretch;  /*单独对子级进行同父级align-items一样的操作，可覆盖父级align-items属性*/
}