preface

Speaking of CSS development skills, in fact, all of my previous articles on CSS are some of the small skills of CSS! It is also worth mentioning that I wrote a summary of the commonly used effects of CSS and some not commonly used effects of CSS. In fact, these are relative. There are some effects we don’t use very often in development, but some projects might use them too! For example, I recently worked on a small project that used the CSS resize property. In fact, I did not want to use this property, because it is not compatible with Internet Explorer browser, but my project just does not need to be compatible with Internet Explorer, is the internal system! I’ll start this article with the resize property, although resize applications are not exactly CSS development tips!

Resize to compare pictures

The syntax for resize is as follows:

Resize: none | both | horizontal | verticalCopy the code

The case effect is shown as follows (move the mouse pointer to the white area in the lower left corner and drag it to the right to achieve the image comparison effect) :

I applied the following code to resize:

resize: horizontal;Copy the code

You can stretch horizontally!

Two, :not() application skills

When we write the separator line of the navigation bar at ordinary times, the last label does not have the separator line, we generally write as follows:

Nav li {border-right: 1px solid #666; } /* Remove the last border */. Nav li:last-child {border-right: none; }Copy the code

Use :not() to write:

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

You can also use our previous ~ wave selector to achieve, do not understand you can click into, check the 8th!

.nav li:first-child ~ li {
  border-left: 1px solid #666;
}Copy the code

We’re in a comma-separated list, and the last one, which has no commas, is written like this:

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

Not application, let us convenient a lot, save some code!

Three, any element is vertically centered

I’ve written a few times before about how to center an element inside a CSS DIV vertically, and how to center an element inside a CSS DIV vertically. Today, in the body, we initialize the definition to center any element vertically, as follows:

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}Copy the code

Of course, there are compatibility issues with this! But modern browsers are fine!

Table cells of equal width

Use the following code to make the table cells equal in width

.haorooms{
  table-layout: fixed;
}Copy the code

Get rid of all kinds of Margin Hacks with Flexbox

When implementing the sidebar, we no longer need various NTH -, first- and last-child margin Settings, and can easily achieve even distribution using Flexbox! The code is as follows:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}Copy the code

Use property selectors for empty connections

I used this in my last post, using the before or after content attr attribute!

Specific can see: www.haorooms.com/post/conten…

We can also add attributes to the empty A tag as follows:

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

Initialize box-sizing

Inherit box-sizing from HTML, so that later maintenance is easier.

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}Copy the code

Use negative numbers in nth-child

Nth-child uses negative numbers. You can select values less than or equal to a certain number, for example:

li:nth-child(-n+4){background:red}Copy the code

Li, less than or equal to 4, is red!

It can also be applied as follows:

li {
  display: none;
}

li:nth-child(-n+3) {
  display: block;
}Copy the code

Let’s show the first three Li’s (those less than or equal to 3) and hide the rest!

Before about the NTH – the application of the child, I also have written articles, see: www.haorooms.com/post/css3_n…

Ninth, text display optimization

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}Copy the code

The above code can make the font in our device optimal display!

Ten, border application skills!

With regard to border, I have already described its writing of dialog boxes in my previous article. www.haorooms.com/post/css_dh…

The application of border is quite extensive! I previously in moOCs course HTML5 left navigation, talked about three bar writing! , is to use a box – shadow, about the article, specific look at: www.haorooms.com/post/box_sh…

But, this is the cSS3 attribute, today to tell you to use the border to write three bars, compatibility is very good! The code is as follows:

width:40px; height:7px; color: #999; border-top:18px double; border-bottom: 6px solid;Copy the code

Use the double attribute of border, you can easily draw three bars, compatibility is very good! Border-color = “color”; border-color = “color”; border-color = “color”

Vertical-align attribute

Vertical-align works only on inline elements, inline, inline-block, etc. When we use vertical center in a div is whether to use, I wrote articles before using vertical – align vertically centered approach, specific look at: www.haorooms.com/post/div_gu…

Vertical-align also supports numbers and percentages!

We can write as follows:

.haorooms{vertical-align:-2px; } .haorooms{vertical-align:-10%; }Copy the code

The negative value is similar to margin-bottom, but vertical-align extends the parent element.

12. List of margin overlap solutions

1, landing the parent element, ignorant of the mood to see me before landing the article: www.haorooms.com/post/css_BF…

2. The parent element is given a padding

The parent element is given a border

4. Add any empty inline element before the child element (e.g. Span, NBSP, etc.)

Font-size :0

Display: Inline-block elements have a gap of one character, which causes the last one to fall. The solutions are as follows:

1, set the parent element to font-size: 0px;

2, cancel the newline character, as follows:

<span>aaaa</span><span>aaaa</span><span>aaaa</span>Copy the code

Continuous.

Or as follows:

<div class="space"> <a href="##"> melancholy </a><! -- --><a href="##"> -- -- -- > < a href = "# #" > blood < / a > < / div > < div class = "space" > < a href = "# #" > melancholy < / a > < a href = "# #" > light < / a > < a href = "# #" > blood < / a > < / div >Copy the code

But this is not recommended

3. Use margin negative values.

4. Use floats.

5. Use spacing like letter-spacing and word-spacing.

The best solution is to set font size:0

Font-size :0 example:

html:

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>Copy the code

css:

.box{
  width: 90px;
  height: 60px;
  border: 1px solid #ccc;
}
.box div{
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  width: 30px;
  border: 1px solid ;
}Copy the code

In theory the three divs below the box should all be 30px and appear on one line, but in practice it looks like this:

Font-family: arial, sans-serif; font-size:0; And let’s see what happens