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

What are the advanced skills of CSS, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

◆ uses: not () to apply / unapply borders on menus

Add a border to each menu item first

CSS Code copies content to the clipboard

/ * add border * /

.nav li {

Border-right: 1px solid # 666

}

…… And then remove the last element.

CSS Code copies content to the clipboard

/ / * remove border * /

.nav li:last-child {

Border-right: none

}

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

CSS Code copies content to the clipboard

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

Border-right: 1px solid # 666

}

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 (~):

CSS Code copies content to the clipboard

.. nav li:first-child ~ li {

Border-left: 1px solid # 666

}

◆ adds line height to body

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

Wait. Simply add to body:

CSS Code copies content to the clipboard

Body {

Line-height: 1

}

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

◆, everything is vertically centered.

It's too easy to center all elements vertically:

CSS Code copies content to the clipboard

Html, body {

Height: 100%

Margin: 0

}

Body {

-webkit-align-items: center

-ms-flex-align: center

Align-items: center

Display:-webkit-flex

Display: flex

}

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:

CSS Code copies content to the clipboard

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

Content: ",

}

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

◆ uses negative nth-child to select items

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

CSS Code copies content to the clipboard

Li {

Display: none

}

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

Li:nth-child (- nasty 3) {

Display: block

}

It's that easy.

◆ uses SVG for icons

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

CSS Code copies content to the clipboard

.logo {

Background: url ("logo.svg")

}

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

◆ optimized display of text

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

CSS Code copies content to the clipboard

Html {

-moz-osx-font-smoothing: grayscale

-webkit-font-smoothing: antialiased

Text-rendering: optimizeLegibility

}

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

◆ uses max-height for pure CSS sliders

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

CSS Code copies content to the clipboard

.slider ul {

Max-height: 0

Overlow: hidden

}

.slider: hover ul {

Max-height: 1000px

Transition: .3s ease

}

◆ inherits box-sizing

Let box-sizing inherit html:

CSS Code copies content to the clipboard

Html {

Box-sizing: border-box

}

*, *: before, *: after {

Box-sizing: inherit

}

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

◆ table cells of equal 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:

CSS Code copies content to the clipboard

.calendar {

Table-layout: fixed

}

◆ uses 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:

CSS Code copies content to the clipboard

.list {

Display: flex

Justify-content: space-between

}

.list .person {

Flex-basis: 23%

}

The list delimiter now appears at evenly spaced locations.

◆ uses an attribute selector for empty links

Displays a link when the element has no text value but the href attribute has a link:

CSS Code copies content to the clipboard

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

Content: attr (href)

}

It's quite convenient.

◆ supports these advanced techniques that work effectively in current versions of Chrome, Firefox, Safari, Edge, and IE11.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.