css查漏补缺day05

最新推荐文章于 2024-09-23 21:31:45 发布

才不是小弱鸡

最新推荐文章于 2024-09-23 21:31:45 发布

阅读量202

点赞数

分类专栏： css web

本文链接：https://blog.csdn.net/qq_40996739/article/details/108752758

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

0x00 css三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">

    </div>
</body>
<style>
    .box {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-left-color: pink;
        /*以下两行是兼容性代码*/
        line-height: 0; 
        font-size: 0;
    }
</style>
</html>

用这种方法即可实现三角

0x01 用户样式更改

cursor属性可以更改鼠标样式

、

outline属性可以设置input的轮廓线

resize：none可以使textarea变成不可拖拽

textarea标签写在一行的话文本域中的文字就没有text-indent了

0x02 元素的垂直居中

vertical-align是用来给行内元素以及行内块元素设置垂直居中的，块元素无法使用

主要用于图片，表单，文字的对齐，如文字与图片的对齐，设置图片的vertical-align：middle即可（图片在的标签必须为行内元素或者行内块元素）

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

0x03 单行文字溢出用省略号显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        泰拉世界普遍存在一种矿物， 大部分呈黑色半透光晶体。源石都蕴藏着巨大的能量， 是引发天灾的首要因素。通常被运用于法术领域，是制造各种施术工具和法术道具的基本材料和催化物，离开了源石辅助，法术的使用效率会大幅下降。现在，随着源石引擎技术的革新，越来越多的源石被各个国家作为能源使用。
    </div>
</body>
<style>
    .box {
        width: 180px;
        height: 80px;
        border: 5px solid black;
        /*默认属性为normal，即会自动换行*/
        white-space: nowrap;
        /*设置隐藏溢出的文字*/
        overflow: hidden;
        /*设置溢出的文字用省略号显示*/
        text-overflow: ellipsis;
    }
</style>
</html>

0x03 相邻盒子边框的重叠问题解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<style>
    .box li {
        width: 200px;
        height: 200px;
        background-color: aqua;
        list-style: none;
        float: left;
        border: 1px solid black;
        /*这里可以这样的原因是因为代码首先执行float，在第一个盒子往左移动1px后，第二个盒子先浮动到第一个盒子右侧然后左移1px，这样就让边框重叠了*/
        margin: -1px;
    }
</style>
</html>

基于上面的代码，如果需要做到鼠标经过时更改边框颜色，因为是通过移动margin实现的消除多余边框，会出现边框显示不全的情况，当遇到这种情况时先看盒子有没有定位，没有定位的话在hover中加入一个position：relative即可实现。若盒子本身已经有了定位，则在hover中设置z-index。

0x04 行内块元素的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <a href="" class="last-page">&lt;&lt;上一页</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="" class="next-page">&gt;&gt;下一页</a>
    </div>
</body>
<style>
    .box {
        text-align: center;
    }
    .box a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #f7f7f7;
        text-decoration: none;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 36px;
        color: #333;
    }
    .box .last-page,.box .next-page {
        width: 85px;
    }
</style>
</html>