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

This article mainly introduces the relevant knowledge of "how to use CSS reset". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "how to use CSS reset" can help you solve the problem.

01. Reset with CSS

CSS reset can adhere to a common style on different browsers. You can use the CSS reset library Normalize, etc., or you can use a more simplified reset method:

* {box-sizing: border-box; margin: 0; padding: 0;} now the margin and padding of the element are 0.BoxMusizing can manage your CSS box model layout.

Note: if you follow the technique that follows from box-sizing, you don't need to add box-sizing features to the above code.

02. Inherit box-sizing

Inherit box-sizing from the html element:

Html {box-sizing: border-box;} *, *: before, *: after {box-sizing: inherit;} makes it easy to change box-sizing in plug-ins or other components.

03. Use the not () picker to determine whether the form shows the border

Add a border to the element first

/ * add a border * / .nav li {border-right: 1px solid # 666;} remove the border for the last element

/ * remove the border * / .nav li:last-child {border-right: none;} but don't do this, use the not () pseudo class to achieve the same effect:

Nav li:not (: last-child) {border-right: 1px solid # 666;} of course, you can also use .nav li + li or .nav li:first-child ~ li, but not () is clearer and readable.

04. Increase the row height for the body element

You don't have to do it for everyone

Add line-height one by one, directly to the body element

Body {line-height: 1. 5;} text elements can easily inherit the style of body.

05. Straight center any element

No, no! This is by no means dark magic, and it can really center on any element:

Html, body {height: 100%; margin: 0;} body {- webkit-align-items: center;-ms-flex-align: center; align-items: center; display:-webkit-flex; display: flex;} is not enough? Straight, horizontal? Any element, any moment, any address? CSS-Tricks has a good article about a variety of centring techniques.

Note: IE11's support for flexbox is a bit bug.

06. Comma separated list

Make each item of the list separated by a comma:

Ul > li:not (: last-child):: after {content: ",";} because the final item does not add a comma, it can be used: not () pseudo class.

Note: this technique is not ambitious for accessibility, especially for screen readers. And copy and paste will not take away the content generated by CSS, you need to pay attention.

07. Use negative nth-child to select elements

Using negative nth-child, 1 to n elements can be selected.

Li {display: none;} / * pick elements 1 to 3 and show * / li:nth-child (- nasty 3) {display: block;} maybe you've mastered how to use the technique: not (), try this:

/ * pick the 1st to 3rd elements and show them * / li:not (: nth-child (- nasty 3)) {display: none;} is so simple!

08. Use the SVG icon

There is no reason not to use the SVG icon:

Logo {background: url ("logo.svg");} SVG has excellent zooming at all resolutions and supports all future IE9 browsers. Get rid of your .png, .jpg, or .gif-jif-whatev files.

Note: for buttons with only icons, if SVG does not load successfully, the following styles are helpful for accessibility:

.no-svg. Icon-only:after {content: attr (aria-label);}

09. Use an owl-like picker

This name may be unfamiliar, but the universal selector (*) is used in conjunction with the neighboring sibling selector (+) for a special purpose:

In this example, all neighboring sibling elements in the document stream will set the style of margin-top: 1.5em.

For more "owl-like" selectors, see the Heydon Pickering article on A List Apart.

10. Use max-height to set up a pure CSS slider

Max-height and overflow hidden work together to build a pure CSS slider:

.slider {max-height: 200px; overflow-y: hidden; width: 300px;} .slider: hover {max-height: 600px; overflow-y: scroll;} increase its max-height value when the mouse moves into the slider element to show the overflow.

11. Invent a table of the same width as the grid

Table-layout: fixed can keep each grid equal in width:

.layout {table-layout: fixed;} painless table layout.

12. Use Flexbox to remove the remaining outer margin

Instead of using nth-, first-, and last-child to remove the remaining gaps between columns, use the space-between features of flexbox:

The gap between the .list {display: flex; justify-content: space-between;} .list .person {flex-basis: 23%;} columns is always uniform.

Use a feature picker to select an empty link element when it has no text content but has the characteristics of href, showing its href characteristics:

A [href ^ = "http"]: empty::before {content: attr (href);} is appropriately concise.

13. Define the style for the "acquiescence" link

Style the "acquiescence" link:

A [href]: not ([class]) {color: # 008000; text-decoration: underline;} links inserted through the CMS system usually do not have class features, and the above styles can identify them and will not affect other styles.

14. Common straight rhythm

The universal picker (*) is used with elements to maintain a common straight rhythm:

.intro > * {margin-bottom: 1.25remr;} A common straight rhythm can provide visual beauty and enhance the readability of the content.

15. Fixed share box

To create a box with a fixed share, all you need to do is set a padding for div:

.container {height: 0; padding-bottom: 20%; position: relative;} .container div {border: 2px dashed # ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%;} use 20% padding-bottom to make the box equal to 20% of its width. Regardless of the viewport width, the div of the child element adheres to its aspect ratio (100% / 20% = 5:1).

16. Style for the broken image world

A little CSS can beautify a broken image:

Img {display: block;font-family: Helvetica, Arial, sans-serif;font-weight: 300 position height: auto; line-height: 2; position: relative; text-align: center; width: 100%;} to show user information and citation of URL by adding pseudo elements:

Img:before {content: "We're sorry, the image below is broken: ("; display: block;margin-bottom: 10px;} img:after {content: "(url:" attr (src) ")"; display: block; font-size: 12px;} learn more about this style tips Ire Aderinokun original post.

17. Use rem to adjust the overall size; use em to adjust part of the size

After the root element sets the basic font size (html {font-size: 100%;}), use em to set the font size of the text element:

H3 {font-size: 2em;} p {font-size: 1em;} then set the font size of the module to rem:

Article {font-size: 1.25remm;} aside .module {font-size: .9rem;} now, each module is independent, and simpler, flexible styles are easy to maintain.

18. Hide movies that are not muted and play automatically

This is a good technique for self-defining user style watches. Prevents automatic playback when the page is loaded. If there is no mute, the video does not appear:

Video [autoplay]: not ([muted]) {display: none;} again, we use the strengths of: not ().

19. Use the picker: root to manipulate font flexibility

In an echo layout, the font size is adjusted according to different viewports as needed. You can calculate the font size based on the font size and width of the viewport height, when you need to use: root:

: root {font-size: calc (1vw + 1vh + .5vmin);} now you can use root em

Body {font: 1rem/1.6 sans-serif;}

For better mobile experience, set the font size for the form elements

When the drop-down list is triggered, to prevent form elements from zooming on mobile browsers (ios Safari, etc.), add font-size:

/ / code from http://caibaojian.com/css-protips.htmlinput[type="text"],input[type="number"],select,textarea {font-size: 16px;} support these techniques apply to the latest versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

21 useful CSS tips to help you take CSS technology to a high level [there are more than 8000 star on Github]. Includes Flexbox, REM,: not () picker, negative nth-child, and so on.

01. Reset with CSS

CSS reset can adhere to a common style on different browsers. You can use the CSS reset library Normalize, etc., or you can use a more simplified reset method:

* {box-sizing: border-box; margin: 0; padding: 0;} now the margin and padding of the element are 0.BoxMusizing can manage your CSS box model layout.

Note: if you follow the technique that follows from box-sizing, you don't need to add box-sizing features to the above code.

02. Inherit box-sizing

Inherit box-sizing from the html element:

Html {box-sizing: border-box;} *, *: before, *: after {box-sizing: inherit;} makes it easy to change box-sizing in plug-ins or other components.

03. Use the not () picker to determine whether the form shows the border

Add a border to the element first

/ * add a border * / .nav li {border-right: 1px solid # 666;} remove the border for the last element

/ * remove the border * / .nav li:last-child {border-right: none;} but don't do this, use the not () pseudo class to achieve the same effect:

Nav li:not (: last-child) {border-right: 1px solid # 666;} of course, you can also use .nav li + li or .nav li:first-child ~ li, but not () is clearer and readable.

04. Increase the row height for the body element

You don't have to do it for everyone

Add line-height one by one, directly to the body element

Body {line-height: 1. 5;} text elements can easily inherit the style of body.

05. Straight center any element

No, no! This is by no means dark magic, and it can really center on any element:

Html, body {height: 100%; margin: 0;} body {- webkit-align-items: center;-ms-flex-align: center; align-items: center; display:-webkit-flex; display: flex;} is not enough? Straight, horizontal? Any element, any moment, any address? CSS-Tricks has a good article about a variety of centring techniques.

Note: IE11's support for flexbox is a bit bug.

06. Comma separated list

Make each item of the list separated by a comma:

Ul > li:not (: last-child):: after {content: ",";} because the final item does not add a comma, it can be used: not () pseudo class.

Note: this technique is not ambitious for accessibility, especially for screen readers. And copy and paste will not take away the content generated by CSS, you need to pay attention.

07. Use negative nth-child to select elements

Using negative nth-child, 1 to n elements can be selected.

Li {display: none;} / * pick elements 1 to 3 and show * / li:nth-child (- nasty 3) {display: block;} maybe you've mastered how to use the technique: not (), try this:

/ * pick the 1st to 3rd elements and show them * / li:not (: nth-child (- nasty 3)) {display: none;} is so simple!

08. Use the SVG icon

There is no reason not to use the SVG icon:

Logo {background: url ("logo.svg");} SVG has excellent zooming at all resolutions and supports all future IE9 browsers. Get rid of your .png, .jpg, or .gif-jif-whatev files.

Note: for buttons with only icons, if SVG does not load successfully, the following styles are helpful for accessibility:

.no-svg. Icon-only:after {content: attr (aria-label);}

09. Use an owl-like picker

This name may be unfamiliar, but the universal selector (*) is used in conjunction with the neighboring sibling selector (+) for a special purpose:

In this example, all neighboring sibling elements in the document stream will set the style of margin-top: 1.5em.

For more "owl-like" selectors, see the Heydon Pickering article on A List Apart.

10. Use max-height to set up a pure CSS slider

Max-height and overflow hidden work together to build a pure CSS slider:

.slider {max-height: 200px; overflow-y: hidden; width: 300px;} .slider: hover {max-height: 600px; overflow-y: scroll;} increase its max-height value when the mouse moves into the slider element to show the overflow.

11. Invent a table of the same width as the grid

Table-layout: fixed can keep each grid equal in width:

.layout {table-layout: fixed;} painless table layout.

12. Use Flexbox to remove the remaining outer margin

Instead of using nth-, first-, and last-child to remove the remaining gaps between columns, use the space-between features of flexbox:

The gap between the .list {display: flex; justify-content: space-between;} .list .person {flex-basis: 23%;} columns is always uniform.

Use a feature picker to select an empty link element when it has no text content but has the characteristics of href, showing its href characteristics:

A [href ^ = "http"]: empty::before {content: attr (href);} is appropriately concise.

13. Define the style for the "acquiescence" link

Style the "acquiescence" link:

A [href]: not ([class]) {color: # 008000; text-decoration: underline;} links inserted through the CMS system usually do not have class features, and the above styles can identify them and will not affect other styles.

14. Common straight rhythm

The universal picker (*) is used with elements to maintain a common straight rhythm:

.intro > * {margin-bottom: 1.25remr;} A common straight rhythm can provide visual beauty and enhance the readability of the content.

15. Fixed share box

To create a box with a fixed share, all you need to do is set a padding for div:

.container {height: 0; padding-bottom: 20%; position: relative;} .container div {border: 2px dashed # ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%;} use 20% padding-bottom to make the box equal to 20% of its width. Regardless of the viewport width, the div of the child element adheres to its aspect ratio (100% / 20% = 5:1).

16. Style for the broken image world

A little CSS can beautify a broken image:

Img {display: block;font-family: Helvetica, Arial, sans-serif;font-weight: 300 position height: auto; line-height: 2; position: relative; text-align: center; width: 100%;} to show user information and citation of URL by adding pseudo elements:

Img:before {content: "We're sorry, the image below is broken: ("; display: block;margin-bottom: 10px;} img:after {content: "(url:" attr (src) ")"; display: block; font-size: 12px;} learn more about this style tips Ire Aderinokun original post.

17. Use rem to adjust the overall size; use em to adjust part of the size

After the root element sets the basic font size (html {font-size: 100%;}), use em to set the font size of the text element:

H3 {font-size: 2em;} p {font-size: 1em;} then set the font size of the module to rem:

Article {font-size: 1.25remm;} aside .module {font-size: .9rem;} now, each module is independent, and simpler, flexible styles are easy to maintain.

18. Hide movies that are not muted and play automatically

This is a good technique for self-defining user style watches. Prevents automatic playback when the page is loaded. If there is no mute, the video does not appear:

Video [autoplay]: not ([muted]) {display: none;} again, we use the strengths of: not ().

19. Use the picker: root to manipulate font flexibility

In an echo layout, the font size is adjusted according to different viewports as needed. You can calculate the font size based on the font size and width of the viewport height, when you need to use: root:

: root {font-size: calc (1vw + 1vh + .5vmin);} now you can use root em

Body {font: 1rem/1.6 sans-serif;}

For better mobile experience, set the font size for the form elements

When the drop-down list is triggered, to prevent form elements from zooming on mobile browsers (ios Safari, etc.), add font-size:

/ / code from http://caibaojian.com/css-protips.htmlinput[type="text"],input[type="number"],select,textarea {font-size: 16px;} support these techniques apply to the latest versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

This is the end of the introduction to "how to use CSS reset". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.