[Css skills improvement] css advanced skills and css skills improvement

[Css skills improvement] css advanced skills and css skills improvement
Reset with CSS

CSS reset can maintain consistent style on different browsers. You can use the CSS reset library Normalize and so on, or use a simpler reset method:

* {  box-sizing: border-box;  margin: 0;  padding: 0;}

Now the margin and padding values of the element are 0,box-sizingYou can manage the layout of your CSS box model.

Note: If you follow the subsequent inheritancebox-sizingYou do not need to addbox-sizingAttribute.

 

Inheritance box-sizing

SlavehtmlElement inheritancebox-sizing:

html {  box-sizing: border-box;}*, *::before, *::after {  box-sizing: inherit;}

This changes in the plug-in or other components.box-sizingEasy to use.

Use :not()Selector to determine whether the form displays a border

Add Borders for elements first

/* Add a border */. nav li {border-right: 1px solid #666 ;}

 

Remove borders for the last element

/* Remove the border */. nav li: last-child {border-right: none ;}

But do not do this. Use:not()To achieve the same effect:

.nav li:not(:last-child) {  border-right: 1px solid #666;}

You can also use.nav li + liOr.nav li:first-child ~ li,:not()It is clearer and readable.

Is bodyAdd Row Height to element

You do not have<p>,Add elements one by oneline-height, Directly addbodyElement:

body {  line-height: 1.5;}

Text elements can be easily inheritedbody.

 

Vertically center any element

No! This is by no means a black magic. You can really 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;}

Note: IE11 has a bug in flexbox support.

Comma-separated list

Each item in the list is separated by a comma:

ul > li:not(:last-child)::after {  content: ",";}

Because the last item does not contain commas, you can use:not()Pseudo class.

Note: this technique is not ideal for accessibility, especially for screen readers. In addition, copying and pasting do not take away the content generated by CSS. Note that.

Use negative nth-childTo select elements

Use negativenth-childYou can select 1 to n elements.

Li {display: none;}/* selects 1st to 3rd elements and displays */li: nth-child (-n + 3) {display: block ;}

 

Maybe you have mastered how to use it.:not()Try this:

/* Select 1st to 3rd elements and display them */li: not (: nth-child (-n + 3) {display: none ;}

So easy!

Use SVG icons

There is no reason not to use the SVG icon:

.logo {  background: url("logo.svg");}

 

SVG scales well at all resolutions and supports all browsers after IE9. Discard your. png,. jpg, or. gif-jif-whatev files.

Note: For buttons with only icons, if SVG is not loaded successfully, the following style is helpful for accessibility:

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

Use an owl-like Selector

This name may be unfamiliar, but the general selector (*) And adjacent sibling selector (+:

* + * {  margin-top: 1.5em;}

For more "owl-like" selectors, referA List ApartThe above Heydon Pickering article

Use max-heightTo create a pure CSS slider.

max-heightUse overflow hidden to create a CSS-only slider:

.slider {  max-height: 200px;  overflow-y: hidden;  width: 300px;}.slider:hover {  max-height: 600px;  overflow-y: scroll;}

When the mouse moves the slider element, it increasesmax-heightTo display the overflow part.

Create a grid Wide Table

table-layout: fixedEach grid can be kept at the same width:

.calendar {  table-layout: fixed;}

Painless table layout.

Remove extra margins with Flexbox

Usenth-,first-, Andlast-childRemove unnecessary gaps between columns. It is better to use flexbox'sspace-betweenAttribute:

.list {  display: flex;  justify-content: space-between;}.list .person {  flex-basis: 23%;}

The gap between columns is always even and equal.

 

Use the attribute selector to select an empty Link

When<a>The element has no text content,hrefWhen the attribute is displayedhrefAttribute:

a[href^="http"]:empty::before {  content: attr(href);}

It is quite simple.

Define a style for the "default" Link

Define a style for the "default" link:

a[href]:not([class]) {  color: #008000;  text-decoration: underline;}

The link inserted through the CMS system usually does notclassAttribute. The above styles can be identified without affecting other styles.

Consistent vertical rhythm

General selector (*) Used with elements to maintain a consistent vertical rhythm:

.intro > * {  margin-bottom: 1.25rem;}

 

Consistent vertical rhythm can provide visual aesthetic and enhance the readability of the content.

 

Fixed proportion box

To create a box with a fixed proportion, all you need to do is set a padding for the 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 padding-bottom of 20% to make the frame equal to the height of 20% of its width. The div of the child element will maintain its aspect ratio (100%/20% = 5:1) regardless of the width of the view ).

 

Define styles for broken Images

Just a bit of CSS can beautify the broken image:

img {    display: block;  font-family: Helvetica, Arial, sans-serif;  font-weight: 300;  height: auto;  line-height: 2;  position: relative;  text-align: center;  width: 100%;}

 

Display User Information and URL references 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;}

Understanding