CSS advanced skills summary

Don't be lazy 2021-04-07 23:01:36
css advanced skills summary

One . Sprite chart

1. Sprite chart (sprites) Use

Using the sprite core :
Sprite technology is mainly used for background images . It is to integrate multiple small background images into a large image .
This big picture is also called sprites Sprite chart perhaps Sprite
Move the background image position , You can use background-position .
The moving distance is the distance of the target image x and y coordinate . Notice that the coordinates in the page are different
Because it's usually moving up and left , So the number is negative .
You need to measure accurately when you use sprites , The size and position of each small background image .

Two . The fonts icon

Font Icon usage scenarios : It is mainly used to display the general 、 Some common small icons .
The sprite map has many advantages , But the disadvantages are obvious .
The picture file is quite large .
The image itself will be distorted if it is enlarged or shrunk .
Once the picture is finished, it's very complicated to replace it .
here , There is a kind of technology to solve the above problems , It's the font icon iconfont.
Font icons can provide a convenient and efficient way for front-end engineers to use icons , It's an icon , The essence belongs to the font .
1. The advantages of font icons
 Lightweight : An icon font is smaller than a series of images . Once the fonts are loaded , The icon will be rendered immediately , Reduced server requests
 flexibility : The essence is words , You can change the color at will 、 Create shadows 、 Transparent effect 、 Spin, etc
 Compatibility : Almost all browsers are supported , Please feel free to use
Be careful : Font icons can't replace sprite Technology , It's just the improvement and optimization of icon technology in work .
summary :
If you encounter some small icons with simple structure and style , Just use the font icon .
If you encounter some small pictures with complex structure and style , Just use the sprite map .
2. Download font icon
Recommended download site :
 icomoon Word stock http://icomoon.io Recommend index *****
IcoMoon Founded on 2011 year , Launched the first custom icon font generator , It allows the user to select the desired icon , Make them
One word . There are many kinds of contents in this library , Very comprehensive , The only regret is that foreign servers , It's slow to turn on the Internet .
 Ali iconfont Word stock http://www.iconfont.cn/ Recommend index *****
This is Ali's mother M2UX One of the iconfont Font icon font library , Including Taobao Icon Library and Ali mom icon library . have access to AI
Create icon upload generation . The key is , free !
3. The introduction of font icons
After downloading , Pay attention not to delete the original document , I'll use it later .
Put the... In the download package fonts Put the folder in the root of the page


 4. Font file format

Different browsers support different font formats , Font icons are compatible , Because it contains font files supported by mainstream browsers .
TureType(.ttf) Format .ttf The font is Windows and Mac The most common font , Browsers that support this font are IE9+、Firefox3.5+、
Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
Web Open Font Format(.woff) Format woff typeface , Browsers that support this font are IE9+、Firefox3.5+、Chrome6+、
Embedded Open Type(.eot) Format .eot The font is IE Special Fonts , Browsers that support this font are IE4+;
SVG(.svg) Format .svg Fonts are based on SVG A form of font rendering , Browsers that support this font are Chrome4+、Safari3.1+、
Opera10.0+、iOS Mobile Safari3.2+;
stay CSS Global declaration font in style : Easy to understand, put these font files through css Bring it to our page .
Pay attention to the path of font file .
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;


html Add a small icon to the label .
<span> </span>


Define the font for the label .
span {
font-family: "icomoon";


5. Addition of Font Icon

If at work , The original font icon is not enough , We need to add a new font icon to the original font file .
Put the selection.json Upload from New , Then select the new icon you want , Download the compressed package from New , And replace the original file .



3、 ... and .CSS Triangle

Some triangles are common in web pages , Use CSS Just draw it directly , You don't have to make pictures or font icons .
A picture , You will know CSS How did the triangle come about , Doing this : 
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;


Four .CSS User interface style

So called interface style , Is to change some user operation styles , To improve a better user experience .
 Change the user's mouse style
 Form outline
 Prevent form fields from dragging
1. Mouse style cursor
li {cursor: pointer; }
Set or retrieve what system predefined cursor shape the mouse pointer moves over the object .



2. Contour line outline

Add... To the form outline: 0; perhaps outline: none; After the pattern , You can remove the default blue border . 
input {outline: none; }


3. Prevent dragging text or resize

In development , We can't drag the lower right corner of the text field . 
textarea{ resize: none;}


5、 ... and .vertical-align Attribute application

CSS Of vertical-align Attribute usage scenarios : Often used to set up pictures or forms ( Inline block element ) Align vertically with the text .
Official explanation : Used to set the vertical alignment of an element , But it works only for inline elements or inline block elements . 
vertical-align : baseline | top | middle | bottom


1. picture 、 Align form with text

picture 、 Forms belong to inline block elements , default vertical-align It's baseline alignment . 
Now you can give the picture 、 These elements in the form are vertical-align Property is set to middle You can make the text and the picture vertical
It's centered .
2. Solve the problem of default blank gap at the bottom of the picture
bug: There will be a gap at the bottom of the picture , The reason is that the inline block elements align with the baseline of the text .
There are two main solutions :
Add... To the picture vertical-align:middle | top| bottom etc. . ( Advocate the use of )
Convert images to block level elements display: block;

6、 ... and . Overflow text ellipsis display

1. Single line text overflow display ellipsis -- Three conditions must be met  
/*1. Force text in one line first */
white-space: nowrap; ( Default normal Word wrap )
/*2. The part beyond is hidden */
overflow: hidden;
/*3. Use an ellipsis instead of an ellipsis in the text */
text-overflow: ellipsis;
2. Multi line text overflow display ellipsis
Multi line text overflow display ellipsis , There are big compatibility issues , Suitable for webKit Browser or mobile terminal ( Most mobile terminals are webkit kernel )
overflow: hidden;
text-overflow: ellipsis;
/* The elastic telescopic box model shows */
display: -webkit-box;
/* Limit the number of lines of text displayed in a block element */
-webkit-line-clamp: 2;
/* Set or retrieve the arrangement of children of the expansion box object */
-webkit-box-orient: vertical;


本文为[Don't be lazy]所创,转载请带上原文链接,感谢

  1. Element tree control: invalid to modify current node key
  2. linux下安装apache(httpd-2.4.3版本)各种坑
  3. How to install Apache (httpd-2.4.3) under Linux
  4. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  5. Nacos serialize for class [com.alibaba.nacos.common.http.HttpRestResult] failed.
  6. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  7. Nacos serialize for class [ com.alibaba.nacos . common.http.HttpRestResult ] failed.
  8. Seamless management of API documents using eolink and gitlab
  9. vue 的基础应用(上)
  10. 28岁开始零基础学前端,这些血的教训你一定要避免
  11. Basic application of Vue
  12. Starting at the age of 28, you must avoid these bloody lessons
  13. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  14. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  15. 利用Vue实现一个简单的购物车功能
  16. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  17. Using Vue to realize a simple shopping cart function
  18. 【css】伪类和伪类元素的区别
  19. 【css效果】实现简单的下拉菜单
  20. 【vue】父子组件传值
  21. The difference between pseudo class and pseudo class elements
  22. [CSS effect] simple drop-down menu
  23. [Vue] value transfer by parent-child component
  24. 【css】设置table表格边框样式
  25. 【css】修改input,textarea中的placeholder样式
  26. vue-router的两种模式(hash和history)及区别
  27. CSS3的滤镜filter属性
  28. [CSS] set table border style
  29. [CSS] modify the placeholder style in input and textarea
  30. Two modes of Vue router (hash and History) and their differences
  31. Filter property of CSS3
  32. 全局安装gulp 报错问题解决
  33. Solution of error report in global installation of gulp
  34. 18个好用的自定义react hook
  35. 你应该知道的常用服务器HTTP状态码?
  36. 18 user defined react hooks
  37. What HTTP status codes should you know about common servers?
  38. 手把手教你打造属于自己团队的前端小报系统
  39. Hand in hand to teach you to build your own front-end tabloid system
  40. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?
  41. vue cli4.0 快速搭建项目详解
  42. Vue cli4.0 quick build project
  43. vue-cli脚手架安装
  44. Installation of Vue cli scaffold
  45. [JS knowledge] method of getting elements from DOM
  46. 【jQuery效果】文字滚动
  47. [jQuery effect] text scrolling
  48. [front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities
  49. React native introduces third party Android SDK
  50. Using html2canvas to generate shared images, CDN images do not show the problem
  51. Using hooks to write react components
  52. Explain the module hot replacement function of webpack in detail
  53. An incomplete guide to writing a simple native wechat applet
  54. How JavaScript calculates 1 + 1 - Part 1 creates a source string
  55. Jsonp method to solve cross domain problems
  56. Canvas animation demo (from zero to one)
  57. El dialog of elementui component encapsulation
  58. Transition group of Vue source code
  59. When encountering bracket validity, next larger element, specific minimum value, try stack
  60. Vue3 virtual DOM