After learning these 7 CSS attributes, my CSS skills have improved again!

Front end intelligence 2020-11-10 08:26:28
learning css attributes css skills


author :Mustapha Aouas
translator : The front end little wisdom
source :dev
Enjoy it , Develop habits

this paper GitHub https://github.com/qq44924588... I have included , More categories of previous high praise articles , I've also compiled a lot of my documents , And tutorial materials . welcome Star And perfection , You can refer to the interview site review , I hope we have something .

Everyone said that there was no project in the resume , I helped you find a project , There is also a bonus 【 Set up a tutorial 】.

Study CSS It's a way to build good looking web pages . however , In the learning process , We tend to ( Most of the time ) Limit yourself , Use the same properties over and over again . After all , We are a habitual animal , We use what we are used to and familiar with .

therefore , In this article , Introduce to you 7 individual It's rare and easy to use CSS attribute , I hope it helped you .

1. vertical-align

CSS Properties of vertical-align Used to specify inline elements (inline) Or table cells (table-cell) Vertical alignment of elements .

As the definition says , This property allows you to align text vertically . It's for sequence indicators (st, nd etc. )、 Enter the asterisk as required (*) Or not properly centered icons are particularly useful .vertical-align Take one of the values :super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom, Or the length from the baseline (px,%, em, rem wait ).

baseline: Align the baseline of the element with the baseline of the parent element .HTML The specification does not specify the baseline for partially replaceable elements , Such as <textarea> , This means that the behavior of these elements using this value varies from browser to browser .

sub: Align the baseline of the element with the subscript baseline of the parent element .

super: Align the baseline of the element with the superscript baseline of the parent element .

text-top: Align the baseline of the element with the superscript baseline of the parent element .

text-bottom: Align the bottom of the element with the bottom of the font of the parent element .

middle: Add the parent element to the middle of the element and the baseline of the parent element x-height( Translation notes :x Height ) Half of the alignment .

 Picture description

Be careful vertical-align Only for inline elements 、 Table cell elements take effect : You can't use it to align block level elements vertically .

resources :MDN.

2. writing-mode

writing-mode Attributes define the horizontal or vertical layout of the text and the direction of the text in the block level element . When setting up a book for the entire document , It should be set on the root element ( about HTML The document should be in html Set... On the element ). It uses one of the following values horizontal-tb (default) | vertical-rl | vertical-lr.

clipboard.png

horizontal-tb: For left alignment (ltr) Script , Content flows horizontally from left to right . For right alignment (rtr) Script , Content flows horizontally from right to left . The next horizontal line is below the previous line .

vertical-rl: For left alignment (ltr) Script , Content flows vertically from top to bottom , The next vertical line is to the left of the previous line . For right alignment (rtr) Script , Content flows vertically from bottom to top , The next vertical line is to the right of the previous line .

vertical-lr: For left alignment (ltr) Script , Content flows vertically from top to bottom , The next vertical line is to the right of the previous line . For right alignment (rtr) Script , Content flows vertically from bottom to top , The next vertical line is to the left of the previous line .

resources :MDN.

Everyone said that there was no project in the resume , I helped you find a project , There is also a bonus 【 Set up a tutorial 】.

3. font-variant-numeric

font-variant-numeric CSS Attributes control numbers , The use of alternative glyphs for fractions and serial numbers .

It takes one of these values : normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions.

This property is useful for setting number styles . According to the circumstances , You may want to display old-fashioned numbers or zeros with slashes , For these cases ,font-feature-settings It is useful to .

 Picture description

Please note that , font-variant-numeric yes font-feature-settings Part of a group attribute . Such as font-variant-caps or font-variant-ligatures Attributes like this belong to the group .
Also pay attention to , Like all font-feature-settings Same property , Your font needs to achieve the above functions to work properly . The font I use is Fira Sans.

resources :MDN.

4. user-select

Whenever we have text that we don't want users to choose , Or vice versa , If a double click or context click occurs , When you want to select all texts ,user-select Properties will be very useful .

This property takes one of the following values :none | auto | text | all.

none: The text of the element and its children cannot be selected . Please pay attention to this Selection Objects can contain these elements . from Firefox 21 Start , none Act like -moz-none, So you can use -moz-user-select: text Re enable selection on child elements .

auto
auto The specific value of depends on a series of conditions , As follows :

  • stay ::before and ::after On pseudo elements , The property value used is none
  • If the element is an editable element , The property value used is contain
  • otherwise , If the parent of this element user-select The attribute value used is all, Then the attribute value of the element is also all
  • otherwise , If the parent of this element user-select The attribute value used is none, Then the attribute value of the element is also none
  • otherwise , The attribute value used is text

text: The user can choose text .
all: In a HTML Editor , When you double-click a child element or context , The topmost element that contains the child element is also selected .

 Picture description

resources :MDN.

Everyone said that there was no project in the resume , I helped you find a project , There is also a bonus 【 Set up a tutorial 】.

5. clip-path

clip-path CSS Property can create a clipping area that only part of the element can display . Part of the area shows , Hidden outside the area . The clipping area is referenced and embedded URL Defined path or external svg The path of , Or as a shape, for example circle().clip-path Property instead of the now deprecated cut clip attribute .

This property takes one of the following values :circle() | ellipse() | polygon() | path() | url().

Because this is an introduction to this property , therefore , We won't go into every value here .

The two values I use most are circle and polygon.circle(radius at pair) Value has two parameters , The first parameter is the radius of the circle , The second parameter is the point that represents the center of the circle .polygon(pair, pair, pair ...) Value taking 3 Points or more , Represents a triangle 、 A rectangle and so on .

 Picture description

6. shape-outside

shape-outside Of CSS Property defines a shape that can be non rectangular , Adjacent inline content should be wrapped around this shape . By default , Inline content surrounds its margin box ; shape-outside Provides a way to customize this wrapper , You can wrap text around complex objects instead of simple boxes . It uses and clip-path The same value .

clip-path Define how users view elements ,shape-outside Define others HTML How to view elements .

clipboard.png

resources :MDN.

7. background-clip

Last ,backgroundclip CSS Property sets whether the background of the element extends to its borderpadding or content Under the box .

This property takes one of the following values :border-box (default) | padding-box | content-box | text

 Picture description

resources :MDN.

summary

Below is a combination of the above 7 Layout of attribute implementation , Let's deepen our impression .

clipboard.png

If you also know some novel properties , Welcome to leave a message .


Possible after code deployment BUG There's no way to know in real time , In order to solve these problems afterwards BUG, It took a lot of time log debugging , This way, I'd like to recommend an easy-to-use one for you BUG Monitoring tools Fundebug.

original text :https://dev.to/mustapha/7-ama...


communication

Articles are updated every week , You can search by wechat 「 The big move the world 」 First time reading and urging ( One or two articles earlier than blog ), this paper GitHub https://github.com/qq449245884/xiaozhi Included , I organized a lot of my documents , welcome Star And perfection , You can refer to the interview site review , Pay attention to official account. , The background to reply welfare , You can see the benefits , You'll see .

版权声明
本文为[Front end intelligence]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple