正文

前端基础-css高级技巧(代码片段)

咖啡壶子  咖啡壶子  2023-01-01  761

关键词：

一.精灵图

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高级(代码片段)

一.精灵图1.为什么需要精灵图减少服务器接收和发送请求的次数，提高页面的加载速度2.精灵图（sprites）的使用原理核心：background-position小测试：拼出自己名字二.字体图标1.优点（了解）轻量级;灵活... 查看详情

零基础学前端之css3高级特效(代码片段)

css3高级特效1、本章目标掌握2D转换对元素进行移动、旋转、缩放和倾斜掌握在3D空间中改变元素的形状、位置和大小2、2D转换方法移动：translate()旋转：rotate()缩放：scale()倾斜：skew()2D转换属性：transform作用... 查看详情

零基础学前端之css3高级特效(代码片段)

css高级技巧(代码片段)

CSS高级技巧1.精灵图1.1为什么需要精灵图？1.2精灵图(sprites)的使用2.字体图标2.1字体图标的产生2.2字体图标的优点2.3字体图标的使用步骤2.3.1字体图标的下载2.3.2字体图标的使用2.5字体图标的追加2.6字体图标的加载原理3.CSS制作... 查看详情

前端基础(代码片段)

目录11.1html基础1.创建html文件2.基本格式3.head标签(5)4.body标签(7)11.2CSS基础1.div标签2.lable标签2.css(层叠样式表)3.css选择器11.3CSS浮动内容回顾：1.div和span标签在网页中的作用2.css基础选择器和高级选择器有哪些？3.盒子模型的属性有... 查看详情

同样是网页前端小白你的页面为什么更高级？(代码片段)

...片与文字之间的距离6.常见布局技巧总结前言学习了网页前端中的HTML和CSS也许你的页面已经有了一定的改善。在现有的技术你的页面有了一定的雏形一些简单的效果可以展示出来，但我们为了让用户有更好的使用体验所以我... 查看详情

前端基础只是学习(代码片段)

目录第十一章前端开发11.1html基础1.创建html文件2.基本格式3.head标签(5)4.body标签(7)11.2CSS基础1.div标签2.lable标签2.css(层叠样式表)3.css选择器11.3CSS浮动内容回顾：1.div和span标签在网页中的作用2.css基础选择器和高级选择器有哪些？3.... 查看详情

20个css高级样式技巧汇总(代码片段)

...越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。 1.黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？1img.desaturate2filter:grayscale(100%);3-webkit-filter:grayscale(100%);4-moz-filter:gray... 查看详情

常用前端布局，css技巧介绍(代码片段)

常用前端布局，CSS技巧介绍对前端常用布局的整理总结，并对其性能优劣，兼容等情况进行介绍css常用技巧之可变大小正方形的绘制1：若通过设置width为百分比的方式，则高度不能通过百分比来控制.在这个地方可以使用padding来... 查看详情

前端基础二之css篇(代码片段)

文章目录题外话前言CSS1.嵌入HTML2.CSS基础语法3.CSS高级语法3.1组选择器3.2继承4.选择器4.1派生选择器4.2id选择器4.3类选择器4.4属性选择器5.css常见样式5.1背景5.2文本5.3字体5.4链接5.5列表5.6表格结语题外话📢博客主页：❤布小... 查看详情

前端基础二之css篇(代码片段)

css高级技巧背景和边框(代码片段)

box-shadowbox-shadow属性支持多个阴影，用逗号分隔使用inset时，需要同时增加相应的内边距边框内圆角的实现可以用该属性配合outline来实现，因为box-shadow时贴着圆角的，而outline显示为直角，此方案可能会在以后的提案中不可行outli... 查看详情

认识css中高级技巧之元素的显示与隐藏(代码片段)

前端之HTML，CSS（八）　　CSS高级技巧　　元素的显示与隐藏　　CSS中有三个属性可以设置元素的显示于隐藏，分别是：display、visibility和overflow。　　display　　隐藏元素：display：none；　　显示元素：display：block；（两层含义：1... 查看详情

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

1.页面顶部阴影body:before{content:"";position:fixed;top:-10px;left:0;width:100%;height:10px;box-shadow:0px0px10pxrgba(0,0,0,.8);z-index:100;}2.给body添加行高你不需要分别添加line-height到每个p,h标记等。只要添加到body即可：body{line-hei 查看详情

前端之css（宽高）设置小技巧(代码片段)

一、css宽高自适应： 1.宽度自适应：元素宽度设为100%（块状元素的默认宽度为100%）注：应用在通栏效果中 2.高度自适应： height:auto;或者不设置高度 3.最小，最大高度，最小，最大宽度： a)最小高度mi... 查看详情

10个css技巧前端开发(代码片段)

1、使用相对单位通常我们在项目开发中，使用px作为尺寸的单位，而不是使用相对单位，如：rem、em等。在万物互联的时代，最好的方式是相对单位rem、vh、vw等现代CSS布局（如flexbox和grid）方式，最大限度的支持各种终端设备。... 查看详情

前端必会的html+css常用技巧之虚线的特殊实现方式(代码片段)

前端必会的HTML+CSS常用技巧之虚线的特殊实现方式利用边框border属性利用background的linear-gradient属性上下左右矩形利用边框border属性这个属性比较简单<divclass="dashed">利用边框borderdashed属性实现虚线</div><divcla... 查看详情

玩转css这些高级技巧，你都会吗(代码片段)

🔥一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去🎶🦋欢迎关注🖱点赞👍收藏🌟留言🐾🦄本文由程序喵正在路上原创，CS... 查看详情