三角形制作，鼠标样式、表单轮廓和防止文本域拖拽、vertical-align实现行内快和文字垂直居中对齐等学习笔记

1、三角形制作

给盒子设置宽高为0，设置边框为透明的，然后取边框的任意一边设置颜色

.box2 {
            width: 0;
            height: 0;
            /*透明*/
            border: 10px solid transparent;
            border-top-color: turquoise;
        }

2、鼠标样式

   <li style="cursor: default;">默认鼠标样式</li>
    <li style="cursor: pointer;">小手</li>
    <li style="cursor: move;">移动</li>
    <li style="cursor: text;">文本</li>
    <li style="cursor: not-allowed;">禁止</li>

3、表单轮廓和防止文本域拖拽

 input {
            /* <!-- 取消表单轮廓 --> */
            outline: none;
        }
 textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }

4、vertical-align实现行内快和文字垂直居中对齐

vertical-align: bottom; 底部对齐
 vertical-align: middle;  中间对齐
 vertical-align: top;  顶部对齐

5、单行文字溢出用省略号表示

 /*这个单词的意思是如果文字显示不开自动换行*/
 /* white-space: normal;*/
 /*1.这个单词的意思是如果文字显示不开也必须强制一行内显示*/
     white-space: nowrap;
 /*2.溢出部分隐藏起来*/
     overflow: hidden;
/* 3.文字溢出的时候用省略号显示 */
     text-overflow: ellipsis;

6、多行文字溢出用省略号表示

 overflow: hidden;
 text-overflow: ellipsis;
 /*弹性伸缩盒子模型显示*/
 display: -webkit-box;
 /*限制在一个块元素显示的文本的行数*/
 -webkit-line-clamp: 3;
 /*设置或检索伸缩盒对象的子元素的排列方式*/
 -webkit-box-orient: vertical;