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

This article mainly explains "summing up CSS advanced skills". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "summarize CSS advanced skills".

Use: not () to apply / unapply borders on menus

Add line heights to body

Everything is vertically centered.

Comma separated list

Select a project using a negative nth-child

Use SVG with icons

Optimize display of text

Use max-height for pure CSS sliders

Inherit box-sizing

Table cells are equal in width

Use Flexbox to get rid of all kinds of hack with outer margin

Use the property selector for empty links

Use: not () to apply / unapply borders on menus

Add a border to each menu item first

1.

two。

3.

/ * add border * /

4.

.nav li {

5.

Border-right: 1px solid # 666

6.

}

…… And then remove the last element.

/ / * remove border * /

1.

.nav li:last-child {

two。

Border-right: none

3.

}

4.

…… You can directly use the: not () pseudo class to apply the element:

5.

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

6.

Border-right: 1px solid # 666

7.

}

This makes the code clean, easy to read, and easy to understand.

Of course, if your new element has a sibling element, you can also use the general sibling selector (~):

.. nav li:first-child ~ li {

1.

Border-left: 1px solid # 666

two。

}

Add line heights to body

You don't need to add line-height to each separately

Wait. Simply add to body:

Body {

1.

Line-height: 1

two。

}

This makes it easy for text elements to inherit from body.

Everything is vertically centered.

It's too easy to center all elements vertically:

1.

two。

3.

Html, body {

4.

Height: 100%

5.

Margin: 0

6.

}

7.

Body {

8.

-webkit-align-items: center

9.

-ms-flex-align: center

10.

Align-items: center

11.

Display:-webkit-flex

twelve。

Display: flex

13.

}

Look, isn't it easy.

Note: beware of flexbox in IE11.

Comma separated list

Make the HTML list items look like a real, comma-separated list:

1.

two。

3.

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

4.

Content: ",

5.

}

Use the: not () pseudo class for the last list item.

Select a project using a negative nth-child

Use negative nth-child in CSS to select items 1 to n.

Li {

1.

Display: none

two。

}

3.

/ * select items 1 through 3 and display them * /

4.

Li:nth-child (- nasty 3) {

5.

Display: block

6.

}

It's that easy.

Use SVG with icons

There is no reason why we should not use SVG for icons:

1.

.logo {

two。

Background: url ("logo.svg")

3.

}

SVG is scalable for all resolution types and supports all browsers to return to IE9. This avoids .png, .jpg, or .gif files.

Optimize display of text

Sometimes fonts don't work best on all devices, so you can ask the device browser to help you:

1.

two。

3.

Html {

4.

-moz-osx-font-smoothing: grayscale

5.

-webkit-font-smoothing: antialiased

6.

Text-rendering: optimizeLegibility

7.

}

Note: please use optimizeLegibility responsibly. In addition, IE / Edge does not have text-rendering support.

Use max-height for pure CSS sliders

Use max-height and overflow hiding to implement the CSS-only slider:

.slider ul {

1.

Max-height: 0

two。

Overlow: hidden

3.

}

4.

.slider: hover ul {

5.

Max-height: 1000px

6.

Transition: .3s ease

7.

}

1.

Inherit box-sizing

two。

Let box-sizing inherit html:

3.

Html {

4.

Box-sizing: border-box

5.

}

6.

*, *: before, *: after {

7.

Box-sizing: inherit

8.

}

This makes it easier to change the box-sizing in other components of plug-ins or other behaviors of leverage.

Table cells are equal in width

Tables are troublesome to work with, so be sure to use table-layout: fixed as much as possible to keep cells equal in width:

1.

.calendar {

two。

Table-layout: fixed

3.

}

Use Flexbox to get rid of all kinds of hack with outer margin

When you need to use column delimiters, you can get rid of the hack of nth-,first-, and last-child through the space-between property of flexbox:

1.

.list {

two。

Display: flex

3.

Justify-content: space-between

4.

}

5.

.list .person {

6.

Flex-basis: 23%

7.

}

The list delimiter now appears at evenly spaced locations.

Use the property selector for empty links

Displays a link when the [url=] element has no text value but the href attribute has a link: [/ url]

[url=]

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

1.

Content: attr (href)

two。

}

It's quite convenient.

Thank you for your reading, the above is the content of "summing up the advanced skills of CSS". After the study of this article, I believe you have a deeper understanding of the problem of summarizing the advanced skills of CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.