CSS之高级技巧

时间：2020-04-04 20:39:45 阅读：89 评论：0 收藏：0 [点我收藏+]

标签：tar smooth http 服务器 src play 兼容 resize 阿里

一.显示与隐藏

1.display属性

display: none；隐藏对象

display: block;  除了转换块级元素之外，同时还有显示元素的意思。

注意点：
display隐藏元素之后，不在占有原来的位置，会被其他元素取代。

2.visibility(可见性)

visibility: visible; 元素可见

visibility： hidden；元素隐藏

注意点：
visibility 隐藏元素之后，继续占用原来的位置

3.overflow(溢出)

overflow：属性；

属性

属性	效果
hidden	隐藏溢出的内容，不添加滚动条
scroll	不管内容溢出否，总是显示滚动条
auto	内容溢出自动显示滚动条，不溢出不显示滚动条
visible	不隐藏溢出内容，也不添加滚动条

demo

<style>
    div {
         height: 100px;
         width: 200px;
         border: red 3px solid;
        }
</style>
<body>
    <div>
        二十多岁就选择安逸，是对自己最大的残忍。人生前期越偷懒，后来就越可能错过让你心动的人和事。请记住，
        在能力与理想相匹配之前，一切舒适都是绊脚石。
    </div>
</body>

技术图片
添加滚动条

overflow: auto;

技术图片

二.CSS用户界面样式

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

1.鼠标样式（cursor)

li {cursor: pointer;}

属性值	描述
default	箭头
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.轮廓线

轮廓线一般都是取消掉

/* 取消轮廓线*/
input, 
textarea {
         outline: none;
}

轮廓线
技术图片

3.防止拖动文本域

textarea {
        /*防止文本域拖拽*/
        resize: none;
}

技术图片
注
加了resize: none；后没有那个标志，不可以拖动。

5.vertical-align属性

(1)使用场景：

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

（2）语法

vertical-align: 属性值

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素放在顶端与行中最高元素的顶端对齐
middle	把元素放置在父元素的中部

各线的位置：
技术图片
demo

<style>
   .top {
       vertical-align: top;
    }
    .middle {
       vertical-align: middle;
    } 
    img {
        width: 100px;
        height: 100px;
    }
</style>
<body>
   <div>
       <img src="./background1.jpg" alt="">默认基线对齐
   </div>
   <br/>
   <div>
      <img src="./background1.jpg" alt="" class="top">顶部对齐
   </div>
   <br/>
   <div>
      <img src="./background1.jpg" alt="" class="middle">中间对齐
   </div>
</body>

效果图
技术图片

6.图片底部留白的问题

** 原因：**
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
解决的方式：

1. 给图片添加vertical-align: middle | top |bottom。（提倡使用）

2. 给图片转换为块级元素 display: blok;

7.超出文本隐藏

技术图片
超出的文本隐藏，并且用省略号表示
三部曲
1.强制在一行显示

white-space: nowrap;

2.超出自动隐藏

overflow: hidden;

3.超出的部分用省略号隐藏

text-overflow: ellipsis;

demo

<style>
  div {
     width: 100px;
     height: 20px;
     border: red solid 1px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     }
</style>
 <div>
   12345678999988884477
 </div>

技术图片

三.精灵图，字体图标

1.精灵图（sprites)

(1)目的

为了有效地减少服务器接收和发送请求的次数，提高网页的加载速度。

(2) 核心

1.精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大的图片中。

2.这个大图也称为sprites精灵图或者雪碧图

3.移动的距离就是这个目标图片的x和y坐标，（水平往右为正，垂直往下为正）

4.使用精灵图需要准确测量，每个小背景图片的大小和位置。

(3)使用

语法一：

选择器 {
         width: 60px;
         height: 60px;
         background: url(背景图片路径)；
         background-position: xpx ypx;
}

语法二：（简写）

选择器 {
         width: 60px;
         height: 60px;
         background: url(背景图片路径) no-repeat xpx ypx；
}

(4)缺点

图片文件还是比较大

图片本身放大或者缩小会失真

一旦图片制作完毕想要跟换非常复杂

2.字体图标

(1)优点

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标会立马渲染出来，减少了服务器请求。

灵活性：本质是文字，可以随意更改颜色，透明效果等

兼容性：几乎支持所有的浏览器

(2)下载

国外：https://icomoon.io/

国内：https://www.iconfont.cn/

(3)引用

<style>
/*第一步引入font文件*/
      @font-face {
           font-family: ‘iconfont‘;
           src: url(‘./font/iconfont.eot‘);
           src: url(‘./font/iconfont.eot?#iefix‘) format(‘embedded-opentype‘),
                url(‘./font/iconfont.woff2‘) format(‘woff2‘),
                url(‘./font/iconfont.woff‘) format(‘woff‘),
                url(‘./font/iconfont.ttf‘) format(‘truetype‘),
                url(‘./font/iconfont.svg#iconfont‘) format(‘svg‘);
        }
/*第二步创建 font- css样式*/
      .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
 </style>
/*第三步 引入样式（字体图片）*/
<body>
我是一个小字体图标<span class="iconfont">&#xe603</span>
</body>

效果
技术图片

总结

一些结构和样式比较简单的小图标，就用字体图标

一些结构复杂和样式复杂一点的小图片，就用精灵图

字体图标不能代替精灵图技术，只是对工作中图标部分技术的提升和优化
注释
其他方法参考阿里妈妈的这篇文章

四.布局小技巧

1. margin负值的妙用

原理
让每个盒子margin往左移动 -1px 正好压在相邻盒子边框，就不会产生边框重叠。
添加margin前

<style>
  div {
    float: left;
    width: 50px;
    height: 100px;
    border: red solid 1px;
}
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

效果
浮动的盒子会紧紧挨在一起，两个盒子的边框会叠加在一起，造成’粗边框‘边框的效果。
技术图片
加了margin

<style>
  div { 
      margin-left: -1px;
       }
</style>

技术图片

2.鼠标经过更改样式

如果要实现鼠标经过某个盒子显示特定样式，提高当前盒子的层级即可
原理
如果没有定位，则添加相对定位（保留位置）
如果有定位，则添加z-index
demo

<style>
       div {
           
           float: left;
           width: 50px;
           height: 100px;
           border: red solid 1px;
           margin-left: -1px;

       }
       div:hover {
           position: relative;
           border: blue solid 1px;
           background-color: pink;
       }
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

技术图片

注释
如果不把鼠标经过的样式提升到最高级，会被覆盖（浮动高于标准流）
技术图片

2.文字环绕图片

浮动元素不会压住文字

<style>
????.box?{
????????width:?300px;
????????height:?70px;
????????background-color:?pink;
????????margin:?0?auto;
????}
????.pic?{
????????margin-right:?5px;
????????float:?left;
????????width:?36px;
????????height:?70px;
????}
????.pic?img?{
????????width:?100%;
????}
</style>
<body>
????<div?class="box">
????????<div?class="pic">
????????????<img?src="img.png"?alt="">
????????</div>
????????<p>键盘敲烂去捡破烂</p>
????</div>
</body>

技术图片

3.CSS三角

(1)原理

制作一个宽度和高度为零的盒子，添加边框颜色和大小。
demo

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-top: 10px solid pink;
    border-right: 10px solid red;
    border-bottom: 10px solid blue;
    border-left: 10px solid green;
}

** 效果图**
技术图片

（2）制作三角形

把其余三边弄成透明色

div {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left-color: green;                  /*需要什么方向的三角自行更改*/
}

技术图片

CSS之高级技巧

标签：tar smooth http 服务器 src play 兼容 resize 阿里

原文地址：https://www.cnblogs.com/lc-snail/p/12620613.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行