前端基础-css高级技巧

Posted 2021-09-28 咖啡壶子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础-css高级技巧相关的知识，希望对你有一定的参考价值。

一.精灵图

1.为什么需要精灵图

减少服务器接收和发送请求的次数，提高页面的加载速度

2.精灵图（sprites）的使用

原理核心：background-position

    <style>
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .p {
            width: 100px;
            height: 112px;
            /* background-color: pink; */
           background-position:  -493px -276px;
        }
        .i {
            width: 60px;
            height: 108px;
            /* background-color: pink; */
            background-position: -327px -142px;
        }
        .n {
            width: 108px;
            height: 109px;
            /* background-color: pink; */
            background-position: -215px -141px;
        }
        .k {
            width: 105px;
            height: 114px;
            /* background-color: pink; */
           background-position: -495px -142px;
        }
    </style>
</head>
<body>
    <span class="p">p</span>
    <span class="i">i</span>
    <span class="n">n</span>
    <span class="k">k</span>
</body>

二.字体图标

1.优点（了解）

轻量级;
灵活性;
兼容性

2.字体图标的下载

icomoon 字库
阿里 iconfont 字库

3.适用场景

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

4.CSS 三角

做法:宽高为0，用border的各个方向去实现

    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .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: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>

三.CSS 用户界面样式

1.鼠标样式

li {cursor: pointer; }

2.取消表单轮廓和防止拖拽文本域

input {outline: none; }
textarea{ resize: none;}
文本域标签写到一行

四.vertical-align 属性应用

1.图片文字垂直居中对齐

vertical-align : middle

    <style>
        img {
            /* vertical-align: bottom; */
            /* 让图片和文字垂直居中 */
            vertical-align: middle;
            /* vertical-align: top; */
        }
        textarea {
            vertical-align: middle;
        }
    </style>
    <body>
    <img src="images/ldh.jpg" alt="">  pink老师是刘德华

    
</body>

2.图片底部空隙

给图片添加 vertical-align:middle | top| bottom 等。
把图片转换为块级元素 display: block;

五.溢出的文字省略号显示

1.单行

white-space: nowrap; （ 默认 normal 自动换行）
  overflow: hidden;
   text-overflow: ellipsis;

2.多行

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

六.常见布局技巧

1.margin负值运用

不用担心同时走的问题
鼠标移动上去显示边框的效果

2.文字围绕浮动元素

3.CSS 三角巧妙应用

直角三角形和梯形

  <style>
         .box1 {
            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 ;

        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color:red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

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

4.CSS初始化：重设浏览器的样式

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\\5B8B\\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

以上是关于前端基础-css高级技巧的主要内容，如果未能解决你的问题，请参考以下文章

2017年总结的前端文章——CSS高级技巧汇总

夯实基础--CSS=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）

认识CSS中高级技巧之元素的显示与隐藏

web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率

同样是网页前端小白你的页面为什么更高级？

前端基础-css高级