CSS高级技巧：CSS三角、CSS用户界面样式、vertical-align 属性应用、溢出的文字省略号显示以及常见的布局技巧

1、CSS三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

div {
    width: 0;
    height: 0;
    /* border: 20px solid pink; */
    border-top: 20px solid pink;
    border-right: 20px solid red;
    border-bottom: 20px solid blue;
    border-left: 20px solid green;
}

上述代码的效果如下：

所以想要得到右三角
，代码如下：

div {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: green;
    /* border-bottom-color: blue; */
}

案例：京东三角

效果图如下：

代码：

.jd {
    position: relative;
    width: 120px;
    height: 249px;
    background-color: skyblue;
}
.jd span {
    position: absolute;
    right: 15px;
    top: -10px;
    width: 0;
    height: 0;
    /* 为了照顾兼容性 */
    line-height: 0;
    font-size: 0;
    border: 5px solid transparent;
    border-bottom-color: skyblue;
}

html代码:
<div class="jd">
    <span></span>
</div>

2、CSS 用户界面样式

2.1 什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

2.2 鼠标样式 cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.3 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

2.4 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea { resize: none;}

3、vertical-align 属性应用

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline | top | middle | bottom;

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐。
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

3.1 图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

3.2 解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1. 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2. 把图片转换为块级元素 display: block;

4、溢出的文字省略号显示

4.1 单行文本溢出显示省略号

必须满足三个条件：

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

4.2 多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）。

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

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

5、 常见布局技巧

5.1 margin负值的运用

方法：

1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框。
2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）。

代码：

html代码：
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

css代码：
<style>
    ul li {
        position: relative;
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        margin-left: -1px;
    }
    /* ul li:hover {
        1.如果盒子没有定位，则鼠标经过添加相对定位即可，相对定位会压住标准流或浮动
        position: relative;
        border: 1px solid blue;
    } */
    
    ul li:hover {
        /* 如果li都有定位，则利用z-index提高层级 */
        z-index: 1;
        border: 1px solid blue;
    }

5.2 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性。

代码：

html代码：
<div class="box">
    <div class="pic">
        <img src="images/img.png" alt="">
    </div>
    <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>

css代码：
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 300px;
        height: 70px;
        border: 1px solid #ccc;
        margin: 0 auto;
        padding: 5px;
    }
    .pic {
        float: left;
        width: 120px;
        height: 60px;
        margin-right: 5px;
    }
    .pic img {
        width: 100%;
    }
</style>

5.3 行内块的巧妙运用

页码在页面中间显示：

1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;。
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中。

5.4 CSS三角强化

原理：

代码：

div {
    width: 0;
    height: 0;
    /* 把上边框宽度调大 */
    /* border-top: 100px solid transparent;
    border-right: 50px solid skyblue; */
    /* 左边和下边的边框宽度设置为0 */
    /* border-bottom: 0 solid blue;
    border-left: 0 solid green; */
    
    /* 1.只保留右边的边框有颜色 */
    border-color: transparent red transparent transparent;
    /* 2.样式都是solid */
    border-style: solid;
    /* 3.上边框宽度要大，右边框宽度稍小，其余的边框都为0 */
    border-width: 100px 50px 0 0;
}