CSS三角做法、CSS用户界面样式、vertical-align 属性应用、溢出的文字省略号显示、常见的布局技巧（margin 负值运用、文字围绕浮动元素、行内块巧妙运用、css三角强化）、CSS初始-CSDN博客

本文链接：https://blog.csdn.net/weixin_70320000/article/details/129003931

文章详细介绍了CSS中的一些实用技巧，包括如何使用纯CSS绘制三角形，设置用户界面样式如鼠标指针和表单轮廓，应用vertical-align属性实现元素垂直对齐，处理文字溢出显示省略号，以及常见的布局技巧如margin负值、文字环绕和行内块元素的运用。此外，还强调了CSS初始化在跨浏览器兼容性中的重要性。

摘要由CSDN通过智能技术生成

一、CSS三角做法

二、CSS用户界面样式

三、vertical-align 属性应用

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

五、常见的布局技巧（margin 负值的运用、文字围绕浮动元素、行内块的巧妙运用、css三角强化）

六、CSS初始化

一、CSS三角做法

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

由上图，可以知道CSS三角是怎么来的了，做法如下：

将元素的高和宽设置为0，边框先设置为透明色，根据三角大小设置宽度，然后根据三角方向再设置一侧边框的颜色即可，代码如下。

        div {
            width: 0;
            height: 0;
            /* 行高和字体大小的设置是为了照顾浏览器的兼容问题，一般不写也没问题 */
            line-height: 0;
            font-size: 0;
            /* 想要多大的小三角就设置边框多宽 */
            border: 10px solid transparent;
            border-left-color: red;
        }

二、CSS用户界面样式

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

更改用户的鼠标样式

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

<body>
    <ul>
        <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>
    </ul>  
</body>

表单轮廓

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

防止表单中的文本域（textarea）拖拽

实际开发中，文本域右下角是不可以拖拽的，使用resize 属性。

textarea { resize：none; }

三、vertical-align 属性应用

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

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

语法：

图片、表单和文字对齐

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

如图片和文字想要垂直对齐(图片与文字默认基线对齐)，文本域和备注想要垂直对齐，

可为图片或文本域设置vertical-align:middle

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

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

主要解决方法有两种：

1. 给图片添加 vertical：middle | top | bottom 等。（提倡使用的）

2. 把图片转换为块级元素 display: block；

块级元素不存在和文字对齐属性

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

单行文字溢出省略号显示

必须满足三个条件

1. 先强制一行内显示文本 white-space: nowrap; （默认 normal 自动换行）

2. 超出部分隐藏 overflow：hidden;

3. 文字用省略号替代超出的部分 text-overflow: ellipsis;

多行文字溢出省略号显示

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

语法：

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

注意：需要严格控制盒子的大小，以至于让省略号下面不再出现文字

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

五、常见的布局技巧（margin 负值的运用、文字围绕浮动元素、行内块的巧妙运用、css三角强化）

1. margin 负值的运用

1. 让每个盒子margin 往左侧移动负值边框宽度，正好压住相邻盒子边框

2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index），因为除了最后一个盒子其余盒子的右边框都被其相邻盒子的边框压住了，所以要提高当前盒子的层级。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
        ul li {
            position: relative;
            float: left;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* margin-top: -1px; */
            margin-left: -1px;
        }
        /* ul li:hover {
            1.如果盒子没有定位，则鼠标经过添加相对定位即可
            position: relative;
            border: 1px solid blue;
        } */

        /* 2.如果盒子有定位，则利用z-index 提高层级 */
        ul li:hover {
            border: 1px solid blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

2. 文字围绕浮动元素

3. 行内块的巧妙运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        /* 注意选择器权重问题 */
        .box .prev,
        .box .next {
            width: 85px;
        }
        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }
        .box input {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
        }
        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>
</html>

4. css三角强化

.box {
    width: 0;
    height: 0;
    /* 1. 只保留右边框有颜色 */
    border-color: transparent red transparent transparent;
    /* 2.边框样式都设置为solid */
    border-style: solid;
    /* 3. 上边框宽度要大，右边框 宽度稍小， 其余的边框应该为0 */
    border-width: 100px 50px 0 0;
    /* border-top: 100px solid transparent;
    border-right: 50px solid pink; */
}

将上面的价格盒子制作书写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px red solid;
        }
        .miaosha {
            position: relative;
            /* span 是行内元素，不能设置大小 */
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;

        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent white transparent transparent;
            border-style: solid;
            border-width: 24px 12px 0 0;
        }
        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>
</html>