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

Today, I would like to share with you the relevant knowledge points of case analysis of css skills. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Add row heights for body

You don't have to do it separately for everyone.

, and other elements to add row height, but for body to add:

Body {

Line-height: 1

}

Comma separated list

Make the list look more like a true comma-separated list:

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

Content: ",

}

Use: not () to remove unwanted borders on navigation

Add a border...

/ * add a border * /

.nav li {

Border-right: 1px solid # 666

}

... Then remove the border of the last element.

/ * remove the border * /

.nav li:last-child {

Border-right: none

}

Text display optimization

Some fonts are not optimal on all devices, so ask the device browser to help:

Html {

-moz-osx-font-smoothing: grayscale

-webkit-font-smoothing: antialiased

Text-rendering: optimizeLegibility

}

Table cells are equal in width

Using tables can be very difficult, so use table-layout:fixed to keep cells the same width:

.calendar {

Table-layout: fixed

}

Use the property selector to select an empty connection

Displays a link to an element that has no text value but whose href attribute has a link:

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

Content: attr (href)

}

It's easy to do this.

The above tips support Chrome,Firefox, Safari, and Edge, and IE11

The above is all the content of this article "case Analysis of css usage skills". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.