CSS重点冷点属性【二】

Try Tomato

已于 2022-03-10 11:39:07 修改

阅读量230

点赞数 1

于 2022-03-09 16:47:28 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/123378146

版权

+ HTML & CSS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一.行内块元素的对齐

vertical-align : 用于设置图片或者表单等行内块元素和文字对齐

值：baseline => 与父元素基线上对齐

top => 元素顶端与行内中最高元素顶端对齐

middle => 元素放在父元素中部

bottom => 与最低元素顶端对齐

代码演示:

<!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>
</head>
<style>
    div{
        display: inline-block;/*必须为行内块元素*/
        width: 200px;
        height: 200px;
        background-color: pink;
        vertical-align: middle;/* 元素放在父元素中部 */
        /*vertical-align: baseline;与父元素基线上对齐*/
        /* vertical-align: top;元素顶端与行内中最高元素顶端对齐 */
        /*vertical-align: bottom;与最低元素顶端对齐*/
    }
    p{
        display: inline;
    }
</style>
<body>
   <div></div>
   <p>我到底应该和谁对齐？</p>
</body>
</html>

将其他代码注释，只留与父元素中部对齐效果的相关代码，效果已经实现。

二.【重点】溢出文字显示省略号

这个效果我们在平时浏览网站时也是不陌生的，当文字太多，在固定的大小的父元素中放不下，这时就会用到我们的溢出文字转换为省略号

分为俩种情况：

1.单行文字：

当我们只需要显示一行文字的时候，我们这样操作：

第一步：先强制一行内显示文本：white-space: nowrap;

第二步：隐藏溢出部分：overflow: hidden;

第三步：超出文字使用省略号代替：text-overflow:ellipsis;

我们通过代码实践一下：

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 250px;
        height: 20px;
        background-color: pink;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    p{
        display: inline;
    }
</style>
<body>
    <div>
        <p>我是一个P，我超出去了吗?我是一个P，我超出去了吗？我是一个P，我超出去了吗？我是一个P，我超出去了吗？我是一个P，我超出去了吗？</p>
    </div>
</body>
</html>

2.单行的我们已经实现了，接下来看看俩行以及多行怎么做：

1.溢出隐藏：overflow:hidden;

2.溢出使用省略号代替：text-overflow:ellipsis;

3.转换为弹性盒子：display:-webkit-box;

4.限制在一个块元素内显示的文本行数：-webkit-line-clamp: N;

5.设置或检索弹性盒子对象的子元素排列方式：-webkit-box-orient: vertical;【使子元素垂直居中】

我们使用代码实现一下：

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        display: -webkit-box;
        width: 250px;
        height: 40px;
        background-color: pink;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    p{
        display: inline;
    }
</style>
<body>
    <div>
        <p>我是一个P，我超出去了吗?我是一个P，我超出去了吗？我是一个P，我超出去了吗？我是一个P，我超出去了吗？我是一个P，我超出去了吗？</p>
    </div>
</body>
</html>

三.【重点】使用盒子做出等腰三角形

像网页中这样的标签怎么做出来的呢？盒子倒是好做，可是小三角呢？CSS可没有直接给我们小三角的命令，这时，就需要我们自己突发奇想了

具体操作：

1.我们可以设置一个盒子，将它的宽、高都设置为0

2.将盒子每一个边都给到边框命令，例如：border-top:10px solid #000;

3.将俩个邻边的颜色改为：transparent(透明)；

这样三步就可以实现等腰三角形的做法了，我们利用代码来进行实现一下：

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left: 20px solid transparent;
        border-bottom: 20px solid #000;
        border-right: 20px solid #000;
    }

</style>
<body>
    <div>
        
    </div>
</body>
</html>

我们已经设置出来了等腰小三角，接下来只要任意翻转一下就可以使用在网页中的标签上了

我们已经会等腰三角形了，那么问题来了，如果特殊需要我们制作一个直角非等腰三角形呢？

很简单，我们只需要将显示出来的一条邻边边框变为另一条的一半大小，将最大的边框透明就可以实现了，快去自己动手试试吧！

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        border-top: 100px solid transparent;
        border-left: 50px solid #000;
        border-bottom: 0 solid #000;
        border-right: 0 solid #000;
    }
</style>
<body>
   <div></div>
</body>
</html>

四.去除表单轮廓线

当我们创建一个表单元素后，发现默认当它获得焦点时，就会有一个默认的边框，很丑，一点也不实用，所以我们想要去掉它，可以使用专门的代码：

outline:0 / none;

我们通过图片来看一下俩种获取焦点后的样式：

这是去除前的，当表单获取焦点之后，会出现一个黑色的粗边框，接下来我们将它去掉：

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    input{
        outline: none;/*去掉默认焦点边框*/
    }
</style>
<body>
   <input type="text" name="" id="" placeholder="你获取一下焦点，看看我是什么样的">
</body>
</html>