Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the skills for using CSS". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the skills for using CSS?"

1. Use: not () to add / remove borders for navigation

Many people add borders to the navigation like this, and then cancel the last one:

/ * add border * /

.nav li {

Border-right: 1px solid # 666

}

/ * remove border * /

.nav li:last-child {

Border-right: none

}

In fact, the: not () of CSS can be reduced to the following code:

.nav li:not (: last-child) {

Border-right: 1px solid # 666

}

Of course, you can also use .nav li + li or even .nav li:first-child ~ li, but use: not () to make the intention clearer.

2. Add line-height attribute to body

You don't have to fight for

, add the line-height attribute respectively, on the contrary, just add it to the body:

Body {

Line-height: 1

}

In this way, the text element can easily inherit the attribute from body.

3. Vertical center

It's not magic, you can center any element vertically:

Html, body {

Height: 100%

Margin: 0

}

Body {

-webkit-align-items: center

-ms-flex-align: center

Align-items: center

Display:-webkit-flex

Display: flex

}

Do you need anything else? Horizontal center, vertical center, at any time, anywhere? You can take a look at CSS-Tricks 's article.

Note: flexbox has some bug under IE11.

4. Separate the list with commas

Make the list look like it is separated by a comma:

Ul > li:not (: last-child):: after {

Content: ",

}

Remove the comma after the last element through the not () pseudo class.

5. Use negative nth-child to select elements

Use a negative nth-child to select elements between 1 and n:

Li {

Display: none

}

/ * Select the first to third elements and display them * /

Li:nth-child (- nasty 3) {

Display: block

}

Of course, if you know: not (), you can also do this:

Li:not (: nth-child (- nasty 3)) {

Display: none

}

Isn't it very simple?

6. Use SVG as the icon icon

There is no reason not to use SVG as the icon icon:

.logo {

Background: url ("logo.svg")

}

SVG zooms well at any resolution and supports all IE9+ browsers, so give up .png, .jpg, and .gif files.

Note: the following code can improve accessibility for users who use auxiliary devices to surf the Internet:

. no-svg. Icon-only:after {

Content: attr (aria-label)

}

7. Text display optimization

Sometimes fonts don't work best for all devices, so use a browser to help:

Html {

-moz-osx-font-smoothing: grayscale

-webkit-font-smoothing: antialiased

Text-rendering: optimizeLegibility

}

8. Use max-height to realize pure CSS slides.

Slides that use max-height and beyond hiding to achieve pure CSS:

.slider ul {

Max-height: 0

Overlow: hidden

}

.slider: hover ul {

Max-height: 1000px

Transition: .3s ease; / * animate to max-height * /

}

9. Inherit box-sizing

Let box-sizing inherit from html:

This makes it easier to modify the box-sizing property in a plug-in or other component.

10. Set the same width of the table

.calendar {

Table-layout: fixed

}

11. Use Flexbox to avoid Margin Hacks

When doing multi-column layout, you can use the space-between property of Flexbox to avoid hacks such as nth-, first-, last-child, and so on:

.list {

Display: flex

Justify-content: space-between

}

.list .person {

Flex-basis: 23%

}

In this way, the blanks between the columns will be filled evenly.

12. Use the attribute selector for empty links

When there is no text in and href is not empty, display its link:

A [href ^ = "http"]: empty::before {

Content: attr (href)

}

At this point, I believe you have a deeper understanding of "what are the skills for the use of CSS?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.